/* ============================================================
   gynny — corporate site
   Direction: "editorial monument". Large serif display, generous negative
   space, few elements per screen. Near-monochrome; the brand green appears
   only as the rounded-square motif borrowed from the mark itself.

   Token architecture follows nawa-website so the two sites stay maintainable
   by the same hands — but every value here is new.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* type families */
  --disp:'Instrument Serif',Georgia,serif;
  --body-f:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* the product name "nawa" — same face nawa-website sets its own brand in, so
     the product looks the same on the parent site as on its own */
  --pixel:'Pixelify Sans',var(--disp);
  /* Wordmark only — the "gynny" lockup, never body text.
     Yellowtail: a 1950s sign-painter brush, the nearest licence-clean match to
     Brush Script MT. Both Brush Script MT and Forte are Monotype with all
     rights reserved, so neither can be self-hosted; Yellowtail is Apache 2.0
     and ships with the site, so every visitor sees the same wordmark. */
  --wordmark:'Yellowtail','Brush Script MT','Segoe Script',cursive;

  /* the one brand colour — sampled from the square in "Gynny Logo 2" */
  --green:#1d772a;
  --green-lift:#249139;

  /* ---- type scale: monument proportions ----------------------------------
     Display sizes are deliberately far apart from body sizes. The jump IS the
     design — a 96px headline over 17px body is the whole voice. */
  --t-hero:clamp(46px,8.4vw,116px);
  --t-h2:clamp(34px,5vw,68px);
  --t-h3:clamp(23px,2.3vw,31px);
  --t-lede:clamp(18px,1.5vw,23px);
  --t-body:17px;
  --t-meta:12px;

  /* ---- rhythm ---- */
  --gut:clamp(20px,5vw,64px);      /* page side padding */
  --measure:1240px;                /* content max width */
  --sec-y:clamp(88px,13vh,190px);  /* vertical section breathing */
  --rule:1px;
}

/* ===================== LIGHT (default: paper) ===================== */
:root,:root[data-theme="light"]{
  --paper:#faf9f7;                 /* warm paper, not clinical white */
  --raise:#ffffff;
  --ink:#12140f;                   /* near-black with a green cast */
  --ink2:#2c2f28;
  --body:#4a4e46;
  --muted:#6a6e66;                 /* 4.9:1 on paper — meta labels stay legible */
  --faint:#8e928a;                 /* decorative only (section numbers) */
  --line:#e3e1db;
  --line2:#cfcdc5;
  --accent:var(--green);
  --on-accent:#ffffff;
  --btn-bg:var(--ink);
  --btn-fg:#faf9f7;
  --header-bg:rgba(250,249,247,.86);
  --shadow:0 1px 2px rgba(18,20,15,.04),0 10px 30px rgba(18,20,15,.06);
  --shadow-lg:0 2px 6px rgba(18,20,15,.05),0 26px 70px rgba(18,20,15,.11);
  --mark-ring:var(--ink);
}
/* ===================== DARK ===================== */
:root[data-theme="dark"]{
  --paper:#0c0e0b;                 /* ink with the same green cast */
  --raise:#14170f;
  --ink:#f2f3ee;
  --ink2:#dcded6;
  --body:#b3b8ac;
  --muted:#868b7f;
  --faint:#5c6157;
  --line:rgba(242,243,238,.12);
  --line2:rgba(242,243,238,.2);
  --accent:#34a94b;                /* lifted so it holds on dark */
  --on-accent:#08120a;
  --btn-bg:#f2f3ee;
  --btn-fg:#0c0e0b;
  --header-bg:rgba(12,14,11,.82);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45),0 26px 70px rgba(0,0,0,.6);
  --mark-ring:var(--ink);
}
/* system preference when the visitor has made no explicit choice */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0c0e0b; --raise:#14170f;
    --ink:#f2f3ee; --ink2:#dcded6; --body:#b3b8ac; --muted:#868b7f; --faint:#5c6157;
    --line:rgba(242,243,238,.12); --line2:rgba(242,243,238,.2);
    --accent:#34a94b; --on-accent:#08120a;
    --btn-bg:#f2f3ee; --btn-fg:#0c0e0b;
    --header-bg:rgba(12,14,11,.82);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45),0 26px 70px rgba(0,0,0,.6);
    --mark-ring:var(--ink);
  }
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--body-f);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gut)}

/* ---------------------------- type ---------------------------- */
h1,h2,h3,h4{
  font-family:var(--disp);
  font-weight:400;               /* Instrument Serif has one weight — by design */
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.02;
}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--ink)}
p{max-width:64ch}
a{color:inherit}

/* the mono meta label — section numbers, eyebrows, figures */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
/* the square motif, reused as a marker */
.sq{
  width:9px;height:9px;border-radius:2.5px;
  background:var(--accent);flex:none;display:inline-block;
}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--body)}

/* ---- the product name: nawa ----
   Matches nawa-website's own `.nw` convention so the product is set in the same
   pixel face on the parent site as on its own. Always lowercase.

   Pixelify Sans is a pixel face on a coarse grid: its glyphs are noticeably
   smaller and lighter than a serif at the same font-size, so inside display
   type it needs a size bump and a little tracking to hold its weight against
   Instrument Serif. `em` units keep that relationship at every clamp() step. */
.nw{
  font-family:var(--pixel);
  text-transform:lowercase;
  font-size:0.92em;          /* pixel caps run tall; 0.92 optically matches */
  letter-spacing:.012em;
  color:inherit;
  /* Let the browser antialias normally. Pixelify's blocky look comes from its
     GLYPH SHAPES, not from unsmoothed rendering — disabling antialiasing (an
     earlier attempt here) just produces hard jaggies on the diagonal joins and
     reads as a low-resolution image next to the vector mark and the serif. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
}
/* In a serif headline the pixel face sits high; nudge it onto the baseline. */
h1 .nw,h2 .nw,h3 .nw{font-size:0.86em;display:inline-block;transform:translateY(0.02em)}

/* ---- the nawa product mark, set inline before the name ----
   Sized in `em` so it tracks the heading through every clamp() step, and
   aligned optically rather than on the baseline: the mark is a solid disc, so
   matching its centre to the lowercase x-height reads level, while true
   baseline alignment would leave it floating high. */
.nmark{
  display:inline-block;
  width:0.82em;height:0.82em;
  margin-inline-end:0.30em;
  vertical-align:-0.10em;
  color:var(--ink);
  flex:none;
}
.nmark svg{display:block;width:100%;height:100%;shape-rendering:geometricPrecision}
/* Keep the mark and the name from ever splitting across a line break. */
.nlock{white-space:nowrap}

/* The silver (metallic) variant carries its own gradient, so `color` does not
   drive it. On the dark theme a light-grey ramp on near-black is very high
   contrast — soften it slightly so it sits in the page rather than glaring. */
:root[data-theme="dark"] .nmark-silver{opacity:.92}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nmark-silver{opacity:.92}
}
/* Inside an eyebrow the parent is a flex row, so `vertical-align` does nothing
   and the row's own `gap` would double-space the mark. Make the lock its own
   inline flex line, and let the mark ride the mono cap-height instead. */
.eyebrow .nlock{display:inline-flex;align-items:center}
.eyebrow .nmark{
  width:1.35em;height:1.35em;        /* mono is small; the mark needs to grow */
  margin-inline-end:0.42em;
  vertical-align:baseline;
  color:var(--ink);
}
/* In mono eyebrows both faces are already blocky — no size correction needed,
   just kill the uppercase the eyebrow applies. */
.eyebrow .nw{font-size:1em;letter-spacing:.04em;transform:none}

/* ---------------------------- header ---------------------------- */
header{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:var(--rule) solid var(--line);
}
.bar{display:flex;align-items:center;gap:18px;height:74px}
.brand{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--ink);
  /* A brush script has a small x-height relative to its em box, so it needs a
     larger font-size than a serif to read at the same optical weight — 34px
     here against the serif's 29px. The descender on the two 'y's also sits
     deep, so line-height stays at 1 and the flex row centres on the glyph box
     rather than the baseline. */
  font-family:var(--wordmark);font-size:34px;letter-spacing:.01em;
  line-height:1;
  /* `antialiased` (set on body) thins strokes; a script wordmark wants its full
     brush weight, so opt this one element back into platform rendering. */
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  text-rendering:optimizeLegibility;
}
/* Yellowtail's glyphs sit low in the em box and its descenders run deep, so
   centring on the box leaves the word looking dropped next to the square.
   `.wm` wraps the word so it can be nudged optically without moving the mark. */
.brand .wm{display:inline-block;transform:translateY(-0.09em)}
/* The header/footer lockup uses the SQUARE symbol, not the full ring mark:
   the ring's tapered terminal and thin counter collapse below ~32px.
   A solid square carries far more visual weight than an open ring at the same
   box size, so it is set smaller (22px) to match the wordmark optically. */
.brand .mark{width:22px;height:22px;color:var(--mark-ring);flex:none}
.brand .mark svg{
  display:block;width:100%;height:100%;
  /* the traced outline carries fine curvature; let the rasteriser prioritise
     smooth edges over speed at this size */
  shape-rendering:geometricPrecision;
}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav-link{
  position:relative;
  text-decoration:none;color:var(--body);
  font-size:14.5px;padding:9px 14px;border-radius:7px;
  transition:color .18s ease,background .18s ease;
}
.nav-link:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.nav-link.is-active{color:var(--ink)}
/* active state uses the square, not an underline */
.nav-link.is-active::after{
  content:"";position:absolute;left:50%;bottom:1px;translate:-50% 0;
  width:7px;height:7px;border-radius:2px;background:var(--accent);
}
.cta-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--btn-bg);color:var(--btn-fg);
  text-decoration:none;font-size:14.5px;font-weight:500;
  padding:11px 19px;border-radius:9px;border:0;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  white-space:nowrap;
}
.cta-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);filter:brightness(1.08)}
.cta-btn.ghost{
  background:transparent;color:var(--ink);
  border:1.5px solid var(--line2);
}
.cta-btn.ghost:hover{border-color:var(--ink);box-shadow:none;filter:none}

/* Buttons that leave the site carry the outward arrow, so a visitor knows
   before clicking. The icon nudges on hover rather than the whole button. */
.cta-btn .ext{width:14px;height:14px;flex:none;transition:transform .2s ease}
.cta-btn:hover .ext{transform:translate(2px,-2px)}

/* ---- an outbound link set INSIDE a paragraph ----
   Reads as emphasised text rather than a button, so it does not compete with
   the section's own heading. The underline is drawn with a background gradient
   instead of text-decoration so it can sit clear of the descenders and thicken
   on hover without shifting the line. `white-space:nowrap` keeps the label and
   its arrow together at the end of the sentence. */
.inline-ext{
  color:var(--ink);
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  padding-bottom:2px;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  transition:background-size .2s ease,color .2s ease;
}
.inline-ext:hover{color:var(--accent);background-size:100% 2px}
.inline-ext .ext{
  width:0.78em;height:0.78em;
  margin-inline-start:0.28em;
  vertical-align:-0.06em;
  transition:transform .2s ease;
}
.inline-ext:hover .ext{transform:translate(2px,-2px)}
/* The product sections sit on the page's own ground, so a visit-site button
   should read as secondary to the page's primary action. */
.sec-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vh,38px)}

/* icon button (theme + lang), quiet by default */
.ibtn{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  background:transparent;border:1.5px solid var(--line);border-radius:9px;
  color:var(--body);cursor:pointer;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  transition:border-color .18s ease,color .18s ease;
  text-decoration:none;
}
.ibtn:hover{border-color:var(--line2);color:var(--ink)}
.ibtn svg{width:17px;height:17px}
:root[data-theme="dark"] .ic-moon,
:root[data-theme="light"] .ic-sun{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .ic-moon{display:none}
  :root:not([data-theme]) .ic-sun{display:block}
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .ic-sun{display:none}
  :root:not([data-theme]) .ic-moon{display:block}
}

.nav-toggle{display:none}

/* ---------------------------- hero ---------------------------- */
.hero{padding-block:clamp(72px,15vh,168px) clamp(64px,10vh,120px)}
.hero h1{margin-block:26px 0;max-width:19ch}
.hero .lede{margin-top:34px;max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:42px}

/* the mark, set large and quiet behind/beside the headline */
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:var(--gut);align-items:start}
.hero-mark{
  width:clamp(120px,17vw,232px);height:auto;aspect-ratio:1;
  color:var(--ink);opacity:.1;
}
.hero-mark svg{display:block;width:100%;height:100%}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-mark{display:none}
}

/* ---------------------------- sections ---------------------------- */
section{position:relative}
.sec{padding-block:var(--sec-y)}
.sec + .sec{border-top:var(--rule) solid var(--line)}
.sec-head{max-width:60ch}
.sec-head h2{margin-top:22px}
.sec-head p:not(.eyebrow){margin-top:26px;font-size:var(--t-lede);line-height:1.5}

/* ---- pillars: four claims, rules between them, no boxes ---- */
.pillars{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(48px,7vh,88px);
  border-top:var(--rule) solid var(--line);
}
.pillar{
  padding:32px 26px 8px 0;
  border-inline-end:var(--rule) solid var(--line);
}
.pillar:last-child{border-inline-end:0}
.pillar .n{
  font-family:var(--mono);font-size:var(--t-meta);color:var(--faint);
  letter-spacing:.14em;
}
.pillar h3{margin-block:14px 12px;font-size:var(--t-h3)}
.pillar p{font-size:15.5px;color:var(--body);max-width:34ch}
@media (max-width:1000px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(2n){border-inline-end:0}
  .pillar:nth-child(n+3){border-top:var(--rule) solid var(--line)}
}
@media (max-width:600px){
  .pillars{grid-template-columns:1fr}
  .pillar{border-inline-end:0;padding-inline-end:0}
  .pillar + .pillar{border-top:var(--rule) solid var(--line)}
}

/* ---- products: two large editorial rows ---- */
.prods{margin-top:clamp(44px,6vh,76px);border-top:var(--rule) solid var(--line)}
.prod{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(20px,4vw,58px);align-items:baseline;
  padding-block:clamp(34px,5vh,56px);
  border-bottom:var(--rule) solid var(--line);
  text-decoration:none;
  transition:padding-inline .3s cubic-bezier(.2,.7,.3,1);
}
.prod .pn{font-family:var(--mono);font-size:var(--t-meta);color:var(--faint);letter-spacing:.14em;padding-top:12px}
.prod h3{font-size:clamp(28px,3.6vw,46px);line-height:1.05;color:var(--ink);transition:color .2s ease}
.prod .pdesc{margin-top:14px;font-size:16px;max-width:52ch}
.prod .parr{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--line2);
  display:grid;place-items:center;color:var(--ink);flex:none;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;
}
.prod .parr svg{width:17px;height:17px}
.prod:hover{padding-inline-start:14px}
.prod:hover .parr{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:translateX(3px)}
.prod:hover h3{color:var(--accent)}
.prod .ptags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--muted);border:1px solid var(--line);
  padding:4px 9px;border-radius:5px;
}
@media (max-width:760px){
  .prod{grid-template-columns:1fr;gap:0}
  .prod .pn{padding-top:0}
  .prod h3{margin-top:10px}
  .prod .parr{margin-top:20px}
}

/* ---- origin: the 2017 story, set as a pull quote ---- */
.origin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.origin-q{
  font-family:var(--disp);font-size:clamp(27px,3.4vw,44px);
  line-height:1.16;color:var(--ink);letter-spacing:-.012em;
}
.origin-q .hl{color:var(--accent)}
.origin-body p + p{margin-top:19px}
.origin-meta{
  display:flex;gap:34px;margin-top:34px;padding-top:24px;
  border-top:var(--rule) solid var(--line);flex-wrap:wrap;
}
.omi .k{font-family:var(--mono);font-size:var(--t-meta);color:var(--faint);letter-spacing:.13em;text-transform:uppercase}
.omi .v{font-family:var(--disp);font-size:26px;color:var(--ink);margin-top:6px;line-height:1}
@media (max-width:860px){.origin{grid-template-columns:1fr}}

/* ---- closing band ---- */
.closer{padding-block:clamp(96px,15vh,180px);text-align:center}
.closer h2{max-width:22ch;margin:22px auto 0}
.closer .lede{margin:28px auto 0;max-width:52ch}
.closer .hero-actions{justify-content:center}
.closer .eyebrow{justify-content:center}

/* ---------------------------- footer ---------------------------- */
footer{border-top:var(--rule) solid var(--line);padding-block:56px 34px}
.foot-cols{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(26px,4vw,56px);
}
.foot-brand .brand{margin-bottom:15px}
.foot-brand p{font-size:14.5px;max-width:34ch;color:var(--muted)}
.fcol h4{
  font-family:var(--mono);font-size:var(--t-meta);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  margin-bottom:15px;
}
.fcol a{
  display:block;text-decoration:none;color:var(--body);
  font-size:14.5px;padding-block:5px;transition:color .16s ease;
}
.fcol a:hover{color:var(--accent)}
.foot-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:48px;padding-top:24px;
  border-top:var(--rule) solid var(--line);
  font-size:13.5px;color:var(--muted);
}
.foot-bar .spacer{margin-inline-start:auto}
.foot-bar a{text-decoration:none;color:var(--muted)}
.foot-bar a:hover{color:var(--ink)}
@media (max-width:820px){
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr}}

/* ---------------------------- mobile nav ---------------------------- */
@media (max-width:820px){
  .bar{gap:10px}
  .nav-toggle{
    display:grid;place-items:center;order:9;
    width:38px;height:38px;background:transparent;
    border:1.5px solid var(--line);border-radius:9px;cursor:pointer;
    margin-inline-start:auto;
  }
  .nav-toggle span{display:block;width:15px;height:1.5px;background:var(--ink);border-radius:2px}
  .nav-toggle span + span{margin-top:4px}
  .nav{
    position:absolute;top:calc(100% + 1px);inset-inline:0;
    flex-direction:column;gap:0;margin:0;
    background:var(--paper);border-bottom:var(--rule) solid var(--line);
    padding:8px var(--gut) 16px;
    display:none;
  }
  .nav.open{display:flex}
  .nav-link{padding:13px 0;border-radius:0;font-size:16px}
  .nav-link:hover{background:transparent}
  .nav-link.is-active::after{left:auto;inset-inline-start:0;bottom:auto;top:50%;translate:0 -50%}
  .nav-link.is-active{padding-inline-start:16px}
  .bar > .cta-btn{display:none}
}

/* ---------------------------- motion ---------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}