@charset "utf-8";

/* ===========================================================================
   Agnista — home, v08 (from scratch)

   Paper, not green. Every earlier version put the brand green on the ground;
   this one uses it as ink and lets the page breathe. Three registers of type
   carry the hierarchy: a serif for the lines that matter, Montserrat for the
   bold second line and navigation, and a monospace for labels, numbers and
   buttons. Hairline grids, square corners. The one rounded object on the
   page is the dark stage that holds the dishes.

   The other four pages still run styles.css; this file is the home page only.
   =========================================================================== */

:root{
  color-scheme:light;

  --paper:#FBF8F0;
  --paper-2:#F4EFDF;
  --ink:#01302A;
  --ink-2:#40564F;
  --line:#DED6C2;
  --green:#01302A;
  --green-2:#0A3E36;
  --oxblood:#960900;
  --sand:#D9B46A;
  --cream:#F4EFDF;
  --cream-soft:#D8D2C0;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Montserrat","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --gutter:clamp(1.25rem,3vw,2.5rem);
  --max:1400px;
  --header-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,dl,dd,figure{margin:0}
a{color:inherit}

@font-face{
  font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;
  src:url("assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;padding:.75rem 1rem;background:var(--ink);color:var(--paper)}
.skip:focus{left:var(--gutter);z-index:100}
.accent{color:var(--oxblood)}

/* ---- living layer -------------------------------------------------------- */

/* ambient.js draws here. Fixed behind everything, multiplied into the paper
   so the orbs read as light through the page rather than paint on top. */
.ambient{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  mix-blend-mode:multiply;filter:blur(40px);
}
/* flora.js draws here: a 2.5D ink illustration (lotus, lily pads, stems,
   reeds) in three depth layers, fixed behind the content, right-hand side
   on desktop, faded and centred on phones. */
.flora{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
/* The light must read brighter than the paper, so it is painted normally
   (not multiplied) and the room around it is dimmed by .win__vig instead. */
.flora .win__vig{mix-blend-mode:multiply}
.flora .bot__leaf{mix-blend-mode:multiply}
@media (max-width:63.99em){.flora{opacity:.9}}
/* Grain: a small SVG noise tile as a CSS background, rasterised once and
   repeated, instead of a live feTurbulence inside the scene SVG that had
   to be recomputed on every parallax frame. Same look, a fraction of the
   cost; lighter still on phones. */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 .5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;background-size:260px 260px}
@media (max-width:63.99em){.grain{opacity:.45}}

/* Reading scrim: as the reader scrolls down, a soft paper gradient rises
   from the bottom edge across the lower half of the viewport, so copy that
   sits over the scene stays legible. Opacity is driven by flora.js. */
.scrim{
  position:fixed;left:0;right:0;bottom:0;height:65vh;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(to top,rgba(242,201,202,.85) 0%,rgba(246,220,203,.5) 45%,rgba(248,220,203,0) 100%);
}
.ticker,.header-shell,main,.site-footer{position:relative;z-index:1}

/* Loading intro (added by home.js): dark ground, a closed bud that unravels
   as assets load, then lifts to reveal the sky. */
.intro{
  position:fixed;inset:0;z-index:60;background:rgb(3,18,15);
  display:grid;place-items:center;cursor:pointer;
}
.intro__svg{width:min(22.5vmin,176px);height:min(22.5vmin,176px);overflow:visible}
.intro__grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}

/* Kinetic hero: home.js splits the title into characters. Each one is an
   inline-block so it can be pushed and skewed independently. */
.hero__title .wd{white-space:nowrap;display:inline-block}
.hero__title .ch{display:inline-block;will-change:transform}
.hero__title .ch--space{width:.28em}

/* Grid cells carry a cursor spotlight: a soft highlight that follows the
   pointer across the cell (coordinates written by home.js). */
.cell{position:relative;overflow:hidden}
.cell::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(217,180,106,.28),transparent 70%);
  transition:opacity .35s var(--ease);
}
.cell:hover::after{opacity:1}
.cell .num,.cell h3,.cell p,.cell img{position:relative;z-index:1}

/* Stage cards tilt toward the pointer in 3D; the stage provides perspective. */
.card{transform-style:preserve-3d;transition:box-shadow .3s var(--ease)}
.card:hover{box-shadow:0 40px 80px -20px rgba(0,0,0,.7)}

/* Magnetic buttons: --magx/--magy written by home.js while the pointer is
   near; cleared on leave so keyboard users never inherit an offset. */
.btn.js-magnet{transform:translate3d(var(--magx,0),var(--magy,0),0)}

/* ---- type registers ------------------------------------------------------ */

.label{
  font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);display:inline-flex;align-items:center;gap:.6rem;
}
.label b{font-weight:400;color:var(--oxblood)}
.label--dark{color:var(--cream-soft)}
.num{font:400 .8rem/1 var(--mono);color:var(--oxblood);letter-spacing:.06em}

h2{
  font:400 clamp(1.9rem,1.2rem + 2.6vw,3.4rem)/1.08 var(--serif);
  letter-spacing:-.015em;max-width:18ch;
}
h3{font:600 1.05rem/1.3 var(--sans);letter-spacing:-.01em}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:.9rem 1.15rem;border:1px solid var(--ink);color:var(--ink);
  background:transparent;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--green-2)}
.btn--light{border-color:var(--cream);color:var(--cream)}
.btn--light:hover{background:var(--cream);color:var(--ink)}
.link{
  font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:.35rem;
}
.link:hover{color:var(--oxblood);border-color:var(--oxblood)}

/* ---- ticker -------------------------------------------------------------- */

.ticker{
  overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper);
  font:600 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);padding-block:.55rem;
}
.ticker__track{display:flex;gap:2.5rem;white-space:nowrap;width:max-content}
.ticker__track span{color:var(--oxblood)}

/* ---- header -------------------------------------------------------------- */

.header-shell{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* min-height reads --header-min, never --header-h: home.js writes the
   measured shell height into --header-h, and measuring the shell (header +
   1px border) back into the header's own min-height grows it a pixel per
   ResizeObserver cycle, forever. */
.header{display:flex;align-items:center;gap:1rem;min-height:var(--header-min,64px)}
.brand{display:block;line-height:0;flex:none}
.brand img{width:92px;height:auto}
.desktop-nav{display:none}
.header .header-cta{display:none}
.language-switch{
  display:flex;margin-left:auto;border:1px solid var(--line);
  font:600 .68rem/1 var(--mono);letter-spacing:.12em;
}
.language-switch a{
  display:grid;place-items:center;min-width:44px;min-height:36px;
  text-decoration:none;color:var(--ink-2);padding-inline:.5rem;
}
.language-switch a[aria-current="page"]{background:var(--ink);color:var(--paper)}

.mobile-menu{position:relative;flex:none}
.mobile-menu summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  min-height:36px;padding-inline:.8rem;border:1px solid var(--ink);
  font:600 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu[open] summary{background:var(--ink);color:var(--paper)}
.mobile-menu nav{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:240px;
  background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;
}
.mobile-menu nav a{
  padding:.9rem 1rem;text-decoration:none;font:600 .8rem/1 var(--sans);
  border-bottom:1px solid var(--line);
}
.mobile-menu nav a:last-child{border-bottom:0}
.mobile-menu nav a[aria-current="page"]{color:var(--oxblood)}

/* ---- hero ---------------------------------------------------------------- */

.hero{
  min-height:calc(88dvh - var(--header-h));display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1.4rem;
  padding:clamp(3rem,8vw,6rem) var(--gutter);
}
.hero__title{
  font:400 clamp(2.5rem,1.4rem + 5.6vw,5.6rem)/1.02 var(--serif);
  letter-spacing:-.02em;max-width:16ch;
}
.hero__intro{
  font:600 clamp(1.1rem,.85rem + 1.3vw,1.7rem)/1.3 var(--sans);
  letter-spacing:-.01em;max-width:30ch;
}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.6rem}

/* ---- stage --------------------------------------------------------------- */

.stage-wrap{padding:0 var(--gutter) clamp(4rem,8vw,8rem)}
.stage{
  position:relative;overflow:hidden;border-radius:28px;
  background:linear-gradient(180deg,var(--green) 0%,var(--green) 45%,#164B41 100%);
  color:var(--cream);padding:clamp(2rem,4vw,3.5rem);
  min-height:min(82dvh,880px);display:flex;flex-direction:column;gap:2.5rem;
  max-width:var(--max);margin-inline:auto;
}
.stage__head{display:grid;gap:.9rem;max-width:34rem}
.stage__title{color:var(--cream)}
.stage__intro{color:var(--cream-soft);max-width:44ch}
.stage__cards{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  perspective:1200px;flex:1;align-content:center;
}
.card{
  background:var(--paper);color:var(--ink);padding:.9rem;
  display:grid;gap:.5rem;
  rotate:var(--tilt,0deg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.card img{aspect-ratio:1;object-fit:cover;width:100%}
.card h3{font-size:.95rem}
.card p{font-size:.8rem;color:var(--ink-2);line-height:1.45}
.card__price{font:400 .8rem/1 var(--mono);color:var(--ink);letter-spacing:.04em;margin-top:.2rem}
.stage__cta{margin-top:auto}

/* ---- story --------------------------------------------------------------- */

.story{
  display:grid;gap:2rem;padding-block:clamp(3rem,8vw,7rem);
  border-top:1px solid var(--line);
}
.story__body{display:grid;gap:1.6rem}
.story__title{max-width:14ch}
.story__text{display:grid;gap:1.1rem;max-width:44ch}
.story__text p{font:400 clamp(1.15rem,1rem + .9vw,1.6rem)/1.35 var(--sans);letter-spacing:-.01em}
.story__lead{font-weight:600}
/* Words are wrapped by home.js; before the reveal scrubs them in they sit
   as ink at low opacity, exactly as Maria's About block does. Without JS the
   class is never added and the text is plain. */
.js-words .w{opacity:.18;transition:none}
.story__figure{border:1px solid var(--line);padding:.5rem;background:var(--paper-2)}
.story__figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story__figure figcaption{font:400 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:.9rem .3rem .3rem}

/* ---- hairline grid sections --------------------------------------------- */

.section{padding-block:clamp(3rem,7vw,6rem);border-top:1px solid var(--line)}
.section__head{display:grid;gap:.9rem;margin-bottom:2rem}
.section__intro{color:var(--ink-2);max-width:52ch}
.section__foot{margin-top:1.6rem}

.grid{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
}
.cell{background:var(--paper);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:.9rem;align-content:start}
.cell p{color:var(--ink-2);font-size:.95rem}
.grid--media .cell{padding:0}
.grid--media .cell img{width:100%;aspect-ratio:4/3;object-fit:cover}
.grid--media .cell h3{padding:1.25rem 1.25rem 0}
.grid--media .cell p{padding:0 1.25rem 1.25rem}

.facts{display:grid;border-top:1px solid var(--line)}
.facts__row{
  display:grid;grid-template-columns:1fr;gap:.35rem;padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.facts__row dt{font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.facts__row dd{font:600 1.05rem/1.3 var(--sans)}
.facts__row dd a{text-decoration:none;border-bottom:1px solid var(--ink)}

/* ---- footer -------------------------------------------------------------- */

.site-footer{border-top:1px solid var(--line);padding-block:3rem 1.5rem;background:var(--paper-2)}
.footer-grid{display:grid;gap:2rem}
.footer-brand{display:block;line-height:0;margin-bottom:1rem}
.footer-brand img{width:120px}
.footer-line{font:400 1.2rem/1.3 var(--serif)}
.site-footer nav{display:flex;flex-direction:column;gap:.5rem}
.site-footer nav a{text-decoration:none;font:600 .8rem/1 var(--sans)}
.site-footer nav a:hover{color:var(--oxblood)}
.footer-note{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.footer-note p{font:400 .68rem/1.5 var(--mono);color:var(--ink-2)}

/* ---- breakpoints --------------------------------------------------------- */

/* Phones: calmer card tilt, no depth offset, tighter type so titles hold one
   line; two cards per row with room to breathe. */
@media (max-width:47.99em){
  .stage__cards{gap:.9rem}
  .card{rotate:calc(var(--tilt,0deg) * .45);padding:.75rem;gap:.4rem}
  .card h3{font-size:.9rem}
  .card p{font-size:.76rem}
  .stage{padding:1.4rem 1.1rem;border-radius:22px;min-height:0}
  .hero__intro{font-size:clamp(1rem,.9rem + .8vw,1.15rem)}
}
/* Short landscape screens (phones on their side): let the hero size to its
   content so the CTAs stay above the fold. */
@media (max-height:520px){
  .hero{min-height:0;padding-block:2rem 2.5rem;gap:.9rem}
  .hero__title{font-size:clamp(1.9rem,1rem + 3.6vw,3rem)}
}

@media (min-width:48em){
  .stage__cards{grid-template-columns:repeat(4,1fr);gap:1.4rem}
  .card{translate:0 calc((1 - var(--depth,1)) * 60px)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .facts__row{grid-template-columns:14rem 1fr;align-items:baseline}
  .footer-grid{grid-template-columns:1.5fr .5fr .5fr}
}

@media (min-width:64em){
  :root{--header-h:72px}
  .brand img{width:110px}
  .desktop-nav{display:flex;gap:1.8rem;margin-inline:auto;font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
  .desktop-nav a{text-decoration:none;color:var(--ink-2);padding-block:.4rem;border-bottom:1px solid transparent}
  .desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
  .header .header-cta{display:inline-flex}
  .language-switch{margin-left:0}
  .mobile-menu{display:none}

  .story{grid-template-columns:10rem 1fr 1fr;gap:3rem;align-items:start}
  .story__figure{position:sticky;top:calc(var(--header-h) + 2rem)}
  .section__head{grid-template-columns:10rem 1fr;grid-template-rows:auto auto;column-gap:3rem}
  .section__head .label{grid-row:1 / span 2}
  .section__head h2{grid-column:2}
  .section__head .section__intro{grid-column:2}
}

/* ---- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference){
  .js-motion .ticker__track{animation:ticker 30s linear infinite}
  .js-motion .ticker:hover .ticker__track{animation-play-state:paused}
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}

/* ---- Mongolian ----------------------------------------------------------- */

html[lang="mn"] .hero__title{font-size:clamp(2.1rem,1.2rem + 4.6vw,4.6rem);letter-spacing:0}
html[lang="mn"] h2{letter-spacing:0;max-width:22ch}
html[lang="mn"] .label,html[lang="mn"] .btn,html[lang="mn"] .ticker{letter-spacing:.06em}