/* Alyssa & Adithya — alyssaandadithya.com
   One stylesheet, no build step. Tokens first, then components, then the single breakpoint. */

@font-face { font-family:"Meshed Display"; src:url("assets/MeshedDisplay.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("assets/InstrumentSans-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("assets/InstrumentSans-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("assets/InstrumentSans-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("assets/InstrumentSans-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

:root {
  --espresso:#341D09; --ivory:#F8F4EA; --forest:#07331F; --ink:#2A1A0B; --ink-2:#5C4A36;
  --text-on-dark:#E8DFC9; --text-on-dark-2:#C9BDA3;
  /* accent: none on espresso (everything is cream); forest green on ivory grounds. */
  --accent:var(--text-on-dark); --accent-ink:#07331F;
  /* hero ampersand + day count: cream. The oval ring and the RSVP link use --accent (lifted forest green) as the single accent on espresso. */
  --hero-accent:var(--text-on-dark);
  --gold:var(--accent); --gold-ink:var(--accent-ink);
  --display:"Meshed Display", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", "DM Sans", system-ui, -apple-system, sans-serif;
  --h1: clamp(2.6rem, 6vw, 5.4rem);
  --h2: clamp(2rem, 3.6vw, 3.4rem);
  --h3: clamp(1.7rem, 2.8vw, 2.6rem);
  --gutter: clamp(16px, 4vw, 64px);
  --card-overlap: clamp(48px, 10vw, 160px);
  --measure: 62ch;
  --botanical-room: 150px;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--espresso); color:var(--text-on-dark); font-family:var(--sans); font-size:17px; line-height:1.55; font-weight:500; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
p { margin:0; }
.skip { position:absolute; left:-999px; top:8px; background:var(--gold); color:var(--ink); padding:8px 12px; z-index:100; }
.skip:focus { left:8px; }

/* page grid */
.page { display:grid; grid-template-columns:[full-start] var(--gutter) [content-start] minmax(0,1fr) [content-end] var(--gutter) [full-end]; max-width:1440px; margin-inline:auto; }
.page > *, .page main > * { grid-column:content; }
.page > .bleed, .page main > .bleed { grid-column:full; }
[id] { scroll-margin-top:96px; }

/* type roles */
.eyebrow { font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.display { font-family:var(--display); font-weight:400; letter-spacing:-.01em; }
.h1 { font-family:var(--display); font-weight:400; font-size:var(--h1); line-height:.95; letter-spacing:-.01em; margin:0; color:var(--ivory); }
.h2 { font-family:var(--display); font-weight:400; font-size:var(--h2); line-height:1; letter-spacing:-.01em; margin:0; }
.h3 { font-family:var(--display); font-weight:400; font-size:var(--h3); line-height:1.05; margin:0; }
.lede { font-size:clamp(18px,1.5vw,21px); line-height:1.45; max-width:52ch; font-weight:400; color:var(--text-on-dark); }

/* nav */
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; position:relative; }
.nav-mark { display:flex; align-items:center; }
.nav-mark img { height:32px; width:auto; }
.links { display:flex; gap:clamp(18px,2.6vw,36px); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.links a { padding-bottom:4px; border-bottom:1px solid transparent; transition:border-color .2s; }
.links a:hover { border-bottom-color:color-mix(in srgb, var(--gold) 50%, transparent); }
.links a[aria-current="page"] { border-bottom-color:var(--gold); }
.links .rsvp { color:var(--gold); }
.menu { display:none; }

/* HOME hero */
.hero { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(24px,4vw,64px); padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,88px); }
.hero .names { font-family:var(--display); font-size:clamp(3rem,6.6vw,6.6rem); line-height:.92; letter-spacing:-.01em; color:var(--ivory); text-align:center; justify-self:center; margin:0; }
.hero .names .amp { display:block; color:var(--hero-accent); font-size:.6em; line-height:1.15; }
.cameo { width:clamp(240px,27vw,360px); aspect-ratio:3/4; object-fit:cover; border-radius:50%; outline:1px solid var(--accent); outline-offset:8px; }
.hero .counter { justify-self:start; max-width:26ch; display:grid; gap:14px; }
.hero .say { font-family:var(--display); font-size:clamp(1.5rem,2.3vw,2.15rem); line-height:1.15; color:var(--ivory); }
.hero .days { font-family:var(--display); font-size:clamp(3rem,5.4vw,5.2rem); line-height:.95; color:var(--ivory); font-variant-numeric:tabular-nums; }
.hero .days small { font-size:.42em; color:var(--ivory); margin-left:.2em; }

/* stationery cards (home) */
.cards { position:relative; display:grid; }
.invite { position:relative; z-index:2; width:min(100%,78%); background:var(--ivory); color:var(--ink); padding:clamp(24px,3vw,40px) clamp(24px,4vw,56px) clamp(16px,2vw,24px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; box-shadow:0 30px 50px -20px rgba(14,7,2,.6); }
.invite .stamp { position:relative; z-index:3; width:108%; max-width:none; margin:0 0 -20% -8%; }
.invite .copy { display:grid; gap:18px; padding-bottom:8px; }
.invite .copy .eyebrow { color:var(--gold-ink); }
.invite .line { font-family:var(--display); font-size:clamp(1.7rem,2.7vw,2.5rem); line-height:1.08; color:var(--ink); }
.invite .payoff { font-size:18px; font-weight:400; font-style:italic; color:var(--ink); }
.schedule { position:relative; z-index:1; width:min(100%,88%); justify-self:end; margin-top:calc(-1 * var(--card-overlap)); background:var(--forest); color:var(--text-on-dark); padding:calc(var(--card-overlap) + clamp(24px,4vw,56px)) calc(clamp(24px,4vw,64px) + var(--botanical-room)) clamp(32px,5vw,72px) clamp(24px,4vw,64px); overflow:hidden; box-shadow:0 30px 50px -20px rgba(14,7,2,.6); }
.schedule .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,72px); position:relative; z-index:1; }
.day .h3 { color:var(--text-on-dark); padding-bottom:14px; border-bottom:1px solid var(--text-on-dark); margin-bottom:8px; white-space:nowrap; }
.event { display:grid; grid-template-columns:64px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid color-mix(in srgb, var(--ivory) 12%, transparent); }
.event time, .event .t { font-family:var(--display); font-size:22px; line-height:1.1; color:var(--text-on-dark); font-variant-numeric:tabular-nums; }
.event b { display:block; font-weight:600; font-size:16.5px; color:var(--text-on-dark); }
.event span { display:block; font-size:14.5px; font-weight:400; color:var(--text-on-dark-2); margin-top:2px; }
.botanical { position:absolute; right:-8px; bottom:-14px; width:250px; opacity:.95; pointer-events:none; }

/* INNER pages */
.page-head { display:grid; gap:16px; padding-block:clamp(32px,5vw,72px) clamp(36px,5vw,64px); max-width:70ch; }
.sheet { position:relative; z-index:2; width:min(100%,82%); background:var(--ivory); color:var(--ink); padding:clamp(32px,5vw,64px) clamp(24px,5vw,72px); box-shadow:0 30px 50px -20px rgba(14,7,2,.6); }
.sheet.narrow { width:min(100%,72%); }
.panel { position:relative; z-index:1; width:min(100%,88%); justify-self:end; margin-top:calc(-1 * var(--card-overlap)); background:var(--forest); color:var(--text-on-dark); padding:calc(var(--card-overlap) + clamp(24px,4vw,56px)) calc(clamp(24px,5vw,72px) + var(--botanical-room)) clamp(36px,5vw,72px) clamp(24px,5vw,72px); overflow:hidden; box-shadow:0 30px 50px -20px rgba(14,7,2,.6); }
.panel > :not(.botanical) { position:relative; z-index:1; }
.panel .h2 { color:var(--text-on-dark); }
.stack { display:grid; }

/* prose scale (ivory ground) */
.prose { font-weight:400; color:var(--ink); max-width:var(--measure); }
.prose > * + * { margin-top:1em; }
.prose .h2 { color:var(--ink); }
.prose h2.h2 + * { margin-top:.6em; }
.prose .h2:not(:first-child) { margin-top:1.8em; }
.prose h3 { font-family:var(--sans); font-weight:600; font-size:18px; line-height:1.3; margin:1.6em 0 .35em; color:var(--ink); }
.prose h3 + p { margin-top:0; }
.prose p { line-height:1.6; }
.prose a { border-bottom:1px solid var(--gold); transition:border-color .2s; }
.prose a:hover { border-bottom-color:var(--ink); }
.prose ul { padding-left:1.1em; }
.prose li { margin:.35em 0; }
.prose li::marker { color:var(--gold-ink); }
.prose .note { font-style:italic; color:var(--ink-2); }
.prose .eyebrow { color:var(--gold-ink); }
.prose .callout { background:color-mix(in srgb, var(--forest) 8%, var(--ivory)); border-left:3px solid var(--gold); padding:14px 18px; font-size:15.5px; line-height:1.5; }
.tbc { color:var(--ink-2); font-weight:600; }
.panel .tbc, .schedule .tbc { color:var(--text-on-dark); }

/* prose on dark (green panel) */
.prose-dark { font-weight:400; max-width:var(--measure); color:var(--text-on-dark); }
.prose-dark > * + * { margin-top:1em; }
.prose-dark h3 { font-family:var(--sans); font-weight:600; font-size:18px; line-height:1.3; margin:1.6em 0 .35em; color:var(--text-on-dark); }
.prose-dark h3 + p { margin-top:0; }
.prose-dark a { border-bottom:1px solid color-mix(in srgb, var(--text-on-dark) 60%, transparent); }
.prose-dark p { line-height:1.6; }

/* definition rows (hotels, venue) */
.rows { display:grid; }
.row { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:16px 32px; padding:18px 0; border-top:1px solid color-mix(in srgb, var(--ivory) 14%, transparent); }
.row:last-child { border-bottom:1px solid color-mix(in srgb, var(--ivory) 14%, transparent); }
.row b { font-family:var(--display); font-weight:400; font-size:24px; line-height:1.1; color:var(--text-on-dark); }
.row span { font-size:15px; line-height:1.55; font-weight:400; color:var(--text-on-dark); }
.rows-light .row { border-color:color-mix(in srgb, var(--ink) 15%, transparent); }
.rows-light .row b { color:var(--ink); }
.rows-light .row span { color:var(--ink); }

/* palette swatches (attire) */
.swatches { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.sw { display:grid; gap:8px; font-size:13px; color:var(--text-on-dark); font-weight:500; }
.sw i { display:block; aspect-ratio:1; border-radius:50%; outline:1px solid color-mix(in srgb, var(--text-on-dark) 40%, transparent); outline-offset:4px; }

/* FAQ */
.faq details { border-top:1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.faq details:last-child { border-bottom:1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:16px 0; font-weight:600; font-size:18px; line-height:1.3; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--display); font-size:24px; color:var(--gold-ink); flex:none; }
.faq details[open] summary::after { content:"–"; }
.faq details p { padding:0 0 18px; margin:0; max-width:var(--measure); line-height:1.6; }
.faq .group { margin-top:2.2em; }
.faq .group:first-child { margin-top:0; }
.faq .group .eyebrow { margin-bottom:10px; }

/* buttons (RSVP only) */
.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border:1px solid var(--text-on-dark); color:var(--text-on-dark); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; transition:background .2s, color .2s; }
.btn:hover { background:var(--text-on-dark); color:var(--forest); }
.btn.dark { border-color:var(--ink); color:var(--ink); }
.btn.dark:hover { background:var(--ink); color:var(--ivory); }

/* footer */
.foot { margin-top:clamp(56px,8vw,112px); padding-block:36px 44px; border-top:1px solid var(--text-on-dark); display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:14px; color:var(--text-on-dark); }
.foot .mark { height:30px; width:auto; }
.nav-mark img, .foot .mark { filter:sepia(.28) brightness(1.06); } /* warms the swan drawing to the cream text colour */
.foot a { border-bottom:1px solid var(--gold); }

/* entrance */
@media (prefers-reduced-motion:no-preference) {
  .hero > * { animation:enter .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero > :nth-child(1) { animation-delay:.05s; } .hero > :nth-child(2) { animation-delay:.2s; } .hero > :nth-child(3) { animation-delay:.35s; }
  @keyframes enter { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
  .links a { background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100% / 0 1px; border-bottom:0; padding-bottom:5px; transition:background-size .35s cubic-bezier(.2,.7,.2,1); }
  .links a:hover, .links a[aria-current="page"] { background-size:100% 1px; }
}
/* reveal */
@media (prefers-reduced-motion:no-preference) {
  .rise { translate:0 14px; transition:translate .6s cubic-bezier(.2,.7,.2,1); }
  .rise.is-visible { translate:0 0; }
  .cameo { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  .cameo:hover { transform:scale(1.02); }
}

/* the one breakpoint */
@media (max-width:820px) {
  .links { display:none; position:absolute; right:0; top:64px; z-index:20; flex-direction:column; gap:0; min-width:200px; background:var(--espresso); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); padding:8px 18px; box-shadow:0 16px 30px rgba(14,7,2,.45); }
  .links.is-open { display:flex; }
  .links a { padding:12px 0; border-bottom:1px solid color-mix(in srgb, var(--ivory) 10%, transparent) !important; }
  .links a:last-child { border-bottom:0 !important; }
  .menu { display:inline-block; font:600 13px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); background:none; border:0; padding:8px 0; cursor:pointer; }
  .hero { grid-template-columns:1fr; justify-items:center; text-align:center; gap:28px; }
  .hero .names { text-align:center; justify-self:center; font-size:clamp(3rem,13vw,4.5rem); }
  .cameo { width:min(72vw,300px); }
  .hero .counter { justify-self:center; justify-items:center; text-align:center; max-width:30ch; }
  .invite, .schedule, .sheet, .sheet.narrow, .panel { width:100%; }
  .invite { grid-template-columns:1fr; }
  .invite { padding-top:24px; }
  .invite .stamp { width:110%; margin:0 0 -10% -5%; }
  .schedule .grid { grid-template-columns:1fr; }
  .schedule, .panel { --botanical-room:0px; padding-bottom:200px; }
  .botanical { width:190px; right:-6px; bottom:-10px; opacity:.95; }
  .row { grid-template-columns:1fr; gap:6px; }
  .swatches { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .foot { flex-direction:column; text-align:center; }
}