/* ═══════════════════════════════════════════════════════════════
   main.css — Wedding Planner landing page: tokens, base, chrome

   The palette is taken off the logo itself (assets/img/logo.png, the
   application's own artwork): the deep teal its serif is set in, and
   the gold of its script. Warm ivory grounds carry both. There is no
   third accent — a page selling one product should not out-colour the
   mark at the top of it.

   Contrast is measured, not chosen by eye. On --shell, the worst of
   the light grounds: --ink-500 is 4.86:1 and --gold-deep 4.58:1, both
   over the 4.5:1 small text needs. Plain --gold is 2.0:1 there, so it
   draws hairlines, rules and dots only and NEVER a word of type on a
   light ground; on the dark bands it measures 6.65:1 and carries the
   eyebrows. White on --accent is 9.4:1.
═══════════════════════════════════════════════════════════════ */

:root {
    /* light grounds */
    --ivory:     #FBF7F0;
    --shell:     #F3EDE2;
    --sand:      #EDE4D3;
    --paper:     #FFFDF9;

    /* dark grounds — the deep teal the logo's wordmark is set in */
    --sea-deep:  #0A2723;
    --sea:       #14453E;
    --sea-2:     #103A34;

    /* ink */
    --ink:       #10312C;
    --ink-700:   #274A44;
    --ink-500:   #566B65;   /* measured 4.86:1 on shell */
    --cream:     #F6EFE3;
    --cream-dim: rgba(246,239,227,.80);
    --cream-faint: rgba(246,239,227,.62);

    /* accents — both taken off the logo: the teal serif and the
       gold script. There is no third accent colour on this page. */
    --accent:      #0E4F47;   /* the wordmark's teal — buttons, pills */
    --accent-deep: #0A3B35;
    --gold:        #D2A24E;   /* hairlines, rules, dots — NEVER type on light */
    --gold-deep:   #8A6529;   /* measured 4.58:1 on shell — the gold that may carry type */
    --sage:        #7D8F7B;

    /* lines & surfaces */
    --line:        rgba(16,49,44,.13);
    --line-soft:   rgba(16,49,44,.07);
    --line-dark:   rgba(246,239,227,.16);
    --surface:     rgba(255,255,255,.55);
    --surface-dark: rgba(255,255,255,.05);

    /* structure */
    --maxw:      1180px;
    --gutter:    32px;
    --radius-lg: 20px;
    --radius:    14px;
    --radius-sm: 10px;
    --arc:       clamp(28px, 5vw, 64px);

    --shadow-card: 0 16px 42px -32px rgba(10,39,35,.30);
    --shadow-shot: 0 46px 96px -40px rgba(10,39,35,.52);
    --ease:      cubic-bezier(.16,1,.3,1);

    /* type scale — three sizes below 1rem, not eighteen */
    --fs-label:  12px;
    --fs-meta:   14px;
    --fs-sub:    15px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    overflow-x:hidden;
    color-scheme:only light;
}

body {
    background:var(--ivory);
    color:var(--ink);
    font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
    font-weight:400;
    font-size:17px;
    line-height:1.65;
    overflow-x:hidden;
}

::selection { background:rgba(210,162,78,.30); color:var(--ink); }
a { color:inherit; }
img, svg { display:block; max-width:100%; }
/* <picture> is a wrapper, not a box.

   Every frame on this page sizes the <img>, and two of them ask it for a
   PERCENTAGE height — `.band--photo > .band-photo img` and
   `.split--couple .shot--couple img` both say height:100%. A percentage
   height resolves against the parent, so the moment those <img>s were
   wrapped in a <picture> for the WebP <source>, their parent became a
   block with an auto height and height:100% silently degraded to auto:
   the couple screenshot stopped filling its card (a band of bare card
   below it) and the band photographs stopped covering their band.

   display:contents takes the wrapper out of layout entirely, so the <img>
   is laid out by the frame exactly as it was before it was wrapped — and
   every existing rule written against `.shot img`, `.hero-shot img` and
   friends keeps working without a wrapper-specific copy. */
picture { display:contents; }
button { font:inherit; color:inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:4px;
}

.visually-hidden {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip {
    position:absolute; left:14px; top:-60px; z-index:400;
    background:var(--accent); color:var(--cream); font-weight:500;
    padding:12px 20px; border-radius:0 0 12px 12px; text-decoration:none;
    transition:top .25s var(--ease);
}
.skip:focus { top:0; }

/* ── film grain, the house ambience ───────────────────────────── */
body::after {
    content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:.022;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ LAYOUT ═══════════════════════════════════════════════════ */

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

.band { position:relative; padding:clamp(72px,9vw,124px) 0; }
.band--shell { background:var(--shell); }
/* Every section carried the same vertical measure, which over 12,000px
   reads as one long template. The supporting sections are shallower. */
.band--compact { padding:clamp(58px,7vw,94px) 0; }
.band--paper { background:var(--paper); }

/* A band's decoration (the light wash, the limestone noise, the edge
   rule) is absolutely positioned, and an absolutely positioned layer
   paints ABOVE its in-flow siblings — so the content needs a stacking
   context of its own or the noise sits on top of the type. This is the
   rule that makes it ordering rather than luck. */
.band > .wrap { position:relative; z-index:1; }

/* Lit stone: summer light from the top right + a limestone noise that
   can only ever *lighten* (the range is remapped 240–255, because
   --shell has almost no contrast headroom). Same three devices the
   app's couple page uses, so the two read as one brand. */
.band--shell::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(58% 62% at 88% 4%, rgba(255,246,228,.85), transparent 66%);
}
.band--shell::after {
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.06' intercept='0.94'/%3E%3CfeFuncG type='linear' slope='0.06' intercept='0.94'/%3E%3CfeFuncB type='linear' slope='0.06' intercept='0.94'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
/* a drawn edge, not only a colour step */
.band--shell > .edge-rule {
    position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(125,143,123,.42) 22%, rgba(125,143,123,.42) 78%, transparent);
}

.band--dark {
    background:var(--sea-deep);
    color:var(--cream);
}
.band--dark .title,
.band--photo .title { color:var(--cream); }

/* the one photographic dark band */
.band--photo { position:relative; background:var(--sea-deep); color:var(--cream); }
.band--photo > .band-photo {
    position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.band--photo > .band-photo img {
    width:100%; height:100%; object-fit:cover; opacity:.30;
}
.band--photo > .band-photo::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(22,38,44,.86), rgba(22,38,44,.72) 45%, rgba(22,38,44,.90));
}
/* .band--photo's wrap is covered by the .band > .wrap rule above. */

/* the page's one organic edge: the closing band rises into the one
   above it as a very shallow arch — the arch motif at its quietest.
   The band's own box is pulled up and clipped, so the corners reveal
   whatever is actually behind (photograph included). */
.band--arc {
    margin-top:calc(var(--arc) * -1);
    border-radius:var(--arc) var(--arc) 0 0;
    padding-top:calc(clamp(72px,9vw,124px) + var(--arc));
}
.band--arc-above { padding-bottom:calc(clamp(72px,9vw,124px) + var(--arc)); }

/* ═══ TYPE ═════════════════════════════════════════════════════ */

.eyebrow {
    font-family:'Hanken Grotesk',sans-serif;
    font-size:var(--fs-label); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold-deep);
    display:flex; align-items:center; gap:12px;
}
.eyebrow::before {
    content:''; width:26px; height:1px; background:var(--gold); flex:none;
}
.eyebrow--center { justify-content:center; }
.band--dark .eyebrow, .band--photo .eyebrow { color:var(--gold); }

.title {
    font-family:'Fraunces','Cormorant Garamond',Georgia,serif;
    font-weight:400;
    font-size:clamp(1.9rem,3.6vw,3.05rem);
    line-height:1.12;
    letter-spacing:-.015em;
    color:var(--ink);
    margin:18px 0 0;
    text-wrap:balance;
}
.title em {
    font-style:italic; font-weight:300;
    color:var(--gold-deep);
}
.band--dark .title em, .band--photo .title em { color:var(--gold); }
.title--center { text-align:center; margin-left:auto; margin-right:auto; max-width:22ch; }
.title--wide { max-width:30ch; }

.lede {
    font-size:1.09rem; color:var(--ink-500);
    margin-top:20px; max-width:62ch; text-wrap:pretty;
}
.lede--center { margin-left:auto; margin-right:auto; text-align:center; }
.band--dark .lede, .band--photo .lede { color:var(--cream-dim); }

.sec-head { margin-bottom:clamp(38px,4.6vw,62px); }
.sec-head--center { text-align:center; }
.sec-head--center .eyebrow { justify-content:center; }

/* the gold rule with its keystone diamond — the arch as a mark */
.rule {
    display:flex; align-items:center; justify-content:center; gap:0;
    margin:26px auto 0; max-width:220px;
}
.rule::before, .rule::after {
    content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--gold));
}
.rule::after { background:linear-gradient(90deg,var(--gold),transparent); }
.rule i {
    width:7px; height:7px; margin:0 10px; flex:none;
    background:var(--gold); transform:rotate(45deg);
}

/* ═══ NAV ══════════════════════════════════════════════════════ */

.nav {
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; gap:22px;
    padding:16px clamp(18px,3vw,34px);
    transition:background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
.nav.scrolled {
    background:rgba(251,247,240,.88);
    box-shadow:0 1px 0 var(--line), 0 18px 40px -34px rgba(10,39,35,.5);
    padding-top:10px; padding-bottom:10px;
}
@supports (backdrop-filter:blur(10px)) {
    .nav.scrolled { background:rgba(251,247,240,.72); backdrop-filter:blur(14px) saturate(1.2); }
}

.brand { display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
/* The wordmark is the application's own artwork (tools/make_logo_web.php).
   Its width is set by its height so a re-derived file of different
   proportions cannot stretch it, and both variants carry their own pair. */
.brand-logo { height:38px; width:auto; flex:none; }
.nav.scrolled .brand-logo { height:33px; transition:height .3s var(--ease); }
.brand-sub {
    font-family:'Hanken Grotesk',sans-serif;
    font-size:10px; letter-spacing:.19em; text-transform:uppercase;
    color:var(--ink-500); font-weight:500;
    padding-left:12px; border-left:1px solid var(--line);
    align-self:center;
}

.nav-links { display:flex; gap:clamp(14px,2vw,28px); margin-left:auto; }
.nav-links a {
    text-decoration:none; font-size:var(--fs-sub); color:var(--ink-700);
    position:relative; padding:4px 0; transition:color .2s;
}
.nav-links a::after {
    content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--gold); transition:right .3s var(--ease);
}
.nav-links a:hover { color:var(--ink); }
.nav-links a:hover::after { right:0; }

.nav-right { display:flex; align-items:center; gap:14px; flex:none; }

.lang-sw { display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px; }
/* Rendered as <a href="?lang=xx"> so a crawler can reach the other
   language; the button-era reset stays because the shape did not change. */
.lang-btn {
    display:inline-block; border:0; background:transparent; cursor:pointer;
    font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.08em;
    line-height:1.45; text-decoration:none;
    padding:5px 10px; border-radius:999px; color:var(--ink-500);
    transition:background .2s, color .2s;
}
.lang-btn:hover { color:var(--ink); }
.lang-btn.active { background:var(--accent); color:var(--cream); }

.hamburger {
    display:none; width:42px; height:38px; border:1px solid var(--line);
    background:transparent; border-radius:10px; cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamburger span {
    display:block; width:18px; height:1.5px; background:var(--ink);
    transition:transform .3s var(--ease), opacity .2s;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
    position:fixed; inset:0 0 0 auto; width:min(86vw,340px); z-index:199;
    background:var(--paper); box-shadow:-24px 0 60px -30px rgba(10,39,35,.45);
    transform:translateX(100%); transition:transform .38s var(--ease);
    padding:96px 30px 30px; overflow-y:auto;
}
.mobile-menu.open { transform:none; }
.mm-links { display:flex; flex-direction:column; }
.mm-links a {
    text-decoration:none; padding:15px 0; border-bottom:1px solid var(--line-soft);
    font-family:'Fraunces',Georgia,serif; font-size:1.16rem; color:var(--ink);
}

/* ═══ HERO ═════════════════════════════════════════════════════ */

.hero {
    position:relative; overflow:hidden;
    padding:clamp(118px,15vw,168px) 0 clamp(64px,8vw,96px);
    background:var(--ivory);
}
.hero::before {   /* summer light, same direction as every other band */
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(52% 58% at 84% 2%, rgba(255,244,222,.9), transparent 64%),
        radial-gradient(46% 50% at 6% 96%, rgba(240,232,216,.75), transparent 62%);
}
.hero .wrap { position:relative; z-index:1; }

.hero-grid {
    display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(34px,5vw,64px); align-items:center;
}

.hero h1 {
    font-family:'Fraunces','Cormorant Garamond',Georgia,serif;
    font-weight:400; font-size:clamp(2.4rem,5vw,4.05rem);
    line-height:1.06; letter-spacing:-.022em; margin:20px 0 0;
    text-wrap:balance;
}
.hero h1 em { font-style:italic; font-weight:300; color:var(--gold-deep); }

.hero-lede { font-size:1.12rem; color:var(--ink-500); margin-top:22px; max-width:46ch; }

.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero-note {
    margin-top:26px; font-size:var(--fs-meta); color:var(--ink-500);
    display:flex; align-items:center; gap:9px;
}
.hero-note svg { width:16px; height:16px; flex:none; color:var(--gold-deep); }

/* where the product actually comes from — the same sentence the footer
   carries, said once where it does the most good */
.hero-trust {
    margin-top:10px; padding-left:25px; font-size:13px; color:var(--ink-500);
    max-width:44ch;
}

/* the hero's device stack */
.hero-media { position:relative; }
/* The stack used to float on the ivory with nothing under it. A single
   warm wash behind it — no new shape, no blob — gives it a ground. */
.hero-media::before {
    content:''; position:absolute; z-index:-1;
    inset:-14% -10% -20% -8%; pointer-events:none;
    background:radial-gradient(58% 58% at 52% 46%, rgba(237,228,211,.85), rgba(237,228,211,0) 70%);
}
.hero-shot {
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-shot); border:1px solid var(--line);
    background:var(--paper);
}
.hero-shot img { width:100%; height:auto; }
.hero-phone {
    position:absolute; right:-14px; bottom:-34px; width:29%;
    border-radius:22px; overflow:hidden; border:5px solid var(--paper);
    box-shadow:var(--shadow-shot); background:var(--paper);
}
.hero-phone img { width:100%; height:auto; }

/* ═══ FOOTER ═══════════════════════════════════════════════════ */

.foot {
    background:var(--sea-deep); color:var(--cream-dim);
    padding:clamp(52px,6vw,74px) 0 34px;
    font-size:var(--fs-meta);
}
.foot-grid {
    display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:38px;
    padding-bottom:34px; border-bottom:1px solid var(--line-dark);
}
.foot .brand-logo { height:44px; }
.foot .brand-sub { color:var(--cream-faint); border-left-color:var(--line-dark); }
.foot .brand { margin-bottom:4px; }
.foot h3 {
    font-family:'Hanken Grotesk',sans-serif; font-size:var(--fs-label);
    letter-spacing:.15em; text-transform:uppercase; color:var(--gold);
    font-weight:600; margin-bottom:14px;
}
.foot ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.foot a { text-decoration:none; color:var(--cream-dim); transition:color .2s; }
.foot a:hover { color:var(--cream); }
.foot-blurb { margin-top:16px; max-width:34ch; color:var(--cream-faint); }
.foot-base {
    padding-top:24px; display:flex; flex-wrap:wrap; gap:14px;
    justify-content:space-between; color:var(--cream-faint); font-size:13px;
}


/* ═══ BUTTONS ══════════════════════════════════════════════════
   Moved here from components.css so the knowledge-base pages can
   stop loading that file: of its 231 rule-selectors they used
   nine, and all nine were these. main.css still sits before
   article.css in every <head>, so the cascade position of every
   rule below is exactly what it was in components.css.
═══════════════════════════════════════════════════════════════ */
.btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 26px; border-radius:999px; border:1px solid transparent;
    font-size:var(--fs-sub); font-weight:500; letter-spacing:.01em;
    text-decoration:none; cursor:pointer;
    transition:transform .28s var(--ease), box-shadow .28s var(--ease),
               background .22s, color .22s, border-color .22s;
}
.btn svg { width:17px; height:17px; flex:none; }
.btn:hover { transform:translateY(-2px); }

.btn--primary {
    background:var(--accent); color:var(--cream);
    box-shadow:0 14px 30px -18px rgba(14,79,71,.85);
}
.btn--primary:hover { background:var(--accent-deep); box-shadow:0 20px 40px -20px rgba(14,79,71,.9); }

.btn--ghost { border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.5); }
.btn--ghost:hover { border-color:var(--gold); background:var(--paper); }

.btn--light { background:var(--cream); color:var(--sea-deep); }
.btn--light:hover { background:#fff; }

.btn--outline-light { border-color:var(--line-dark); color:var(--cream); }
.btn--outline-light:hover { border-color:var(--gold); background:rgba(255,255,255,.06); }

/* ═══ SCROLL REVEAL ════════════════════════════════════════════
   Only ever hides content when JavaScript is actually running:
   the guard is `.js` on <html>, set by the one inline script in
   <head>. Without JS nothing is hidden and the page renders whole.
═══════════════════════════════════════════════════════════════ */
.js .reveal { opacity:0; transform:translateY(20px); }
.js .reveal.in {
    opacity:1; transform:none;
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal--delay-1.in { transition-delay:.09s; }
.js .reveal--delay-2.in { transition-delay:.18s; }
.js .reveal--delay-3.in { transition-delay:.27s; }
.js .reveal--delay-4.in { transition-delay:.36s; }

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .js .reveal, .js .reveal.in { opacity:1; transform:none; transition:none; }
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}