/* ==================================================================
   MIDAS MINT — shared design system
   Luxury / Editorial: alabaster paper, charcoal ink, antique gold
   spent only as an accent. Playfair for voice, Inter for UI, Plex Mono
   for anything that prices, weighs, or assays.
   ================================================================== */

/* ------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------ */
:root{
  /* Palette */
  --bg:#F9F8F6;              /* warm alabaster — paper, never #FFF */
  --fg:#1A1A1A;              /* rich charcoal — ink, never #000 */
  --muted:#EBE5DE;           /* pale taupe — raised surfaces */
  --muted-fg:#6C6863;        /* warm grey — captions, metadata (5.2:1) */
  --gold:#AD8A44;            /* antique gold — lines, fills, large type */
  --gold-ink:#7A5F2C;        /* gold for SMALL text on light (5.6:1) */
  --gold-on-dark:#C9A659;    /* gold for any text on charcoal (7.5:1) */
  --gold-deep:#5B4222;

  --line:rgba(26,26,26,.14);
  --line-strong:var(--fg);
  --grid-line:rgba(26,26,26,.2);

  /* Inverted (dark sections) */
  --dark-bg:var(--fg);
  --dark-fg:var(--bg);
  --dark-muted:rgba(235,229,222,.72);
  --dark-line:rgba(249,248,246,.16);

  --up:#9DB89F;
  --down:#D99A8A;

  /* Type */
  --serif:"Playfair Display","Didot","Bodoni 72",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Layout */
  --maxw:1600px;
  --gutter:2rem;             /* px-8 */
  --col-gap:1.5rem;
  --section-y:5rem;          /* py-20 */
  --nav-h:4.5rem;

  /* Motion — slow and deliberate */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --t-ui:500ms;
  --t-color:700ms;
  --t-image:1800ms;

  /* Depth — soft, never harsh */
  --shadow-card:0 2px 8px rgba(0,0,0,.02);
  --shadow-card-hover:0 8px 24px rgba(0,0,0,.06);
  --shadow-frame:0 4px 24px rgba(0,0,0,.08);
  --shadow-frame-hover:0 8px 32px rgba(0,0,0,.12);
  --shadow-hero:0 8px 32px rgba(0,0,0,.12);
  --shadow-btn:0 4px 16px rgba(0,0,0,.15);
  --shadow-btn-hover:0 8px 24px rgba(0,0,0,.25);
}
@media (min-width:768px){
  :root{ --gutter:4rem; --col-gap:2rem; --section-y:8rem; }
}

/* ------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; border-radius:0; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1rem; line-height:1.625;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
::selection{ background:rgba(173,138,68,.22); }

/* Italic emphasis inside headlines = spoken cadence, in gold */
h1 em, h2 em, h3 em{ font-style:italic; color:var(--gold); }
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em{ color:var(--gold-on-dark); }

:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.on-dark :focus-visible{ outline-color:var(--gold-on-dark); }

.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--fg); color:var(--bg); padding:.75rem 1.25rem;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
}
.skip-link:focus{ top:1rem; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ------------------------------------------------------------------
   3. ATMOSPHERE — paper grain + visible editorial grid
   ------------------------------------------------------------------ */
.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gridlines{ display:none; }
@media (min-width:1024px){
  /* z-index:-1 → painted above the page canvas but beneath content,
     so lines run behind type on light grounds and vanish under dark sections */
  .gridlines{ display:block; position:fixed; inset:0; z-index:-1; pointer-events:none; }
  .gridlines__inner{ position:relative; height:100%; max-width:var(--maxw); margin:0 auto; }
  .gridlines__inner::before{ content:""; position:absolute; inset:0 var(--gutter);
    background:
      linear-gradient(var(--grid-line),var(--grid-line)) left / 1px 100% no-repeat,
      linear-gradient(var(--grid-line),var(--grid-line)) 33.333% 0 / 1px 100% no-repeat,
      linear-gradient(var(--grid-line),var(--grid-line)) 66.666% 0 / 1px 100% no-repeat,
      linear-gradient(var(--grid-line),var(--grid-line)) right / 1px 100% no-repeat;
    opacity:.55;
  }
}
main, .site-footer{ position:relative; }

/* ------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ------------------------------------------------------------------ */
.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.grid-12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); }
.grid-12 > *{ grid-column:1 / -1; }

.section{ padding-block:var(--section-y); position:relative; }
.section--rule{ border-top:1px solid var(--line-strong); }
.section--dark, .on-dark{ background:var(--dark-bg); color:var(--dark-fg); }
.section--muted{ background:var(--muted); }

/* ------------------------------------------------------------------
   5. TYPOGRAPHY
   ------------------------------------------------------------------ */
.display{ font-size:clamp(3.25rem,10.4vw,9.5rem); line-height:.9; letter-spacing:-.025em; }
.headline{ font-size:clamp(2.5rem,6.4vw,5.75rem); line-height:.95; letter-spacing:-.02em; }
.title{ font-size:clamp(1.625rem,2.3vw,2.125rem); line-height:1.15; letter-spacing:-.01em; }
.lede{ font-size:clamp(1rem,1.25vw,1.125rem); line-height:1.625; color:var(--muted-fg); max-width:34rem; }
.on-dark .lede{ color:var(--dark-muted); }
.body-muted{ color:var(--muted-fg); }
.on-dark .body-muted{ color:var(--dark-muted); }

/* Overline: decorative rule + wide-tracked label */
.overline{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--muted-fg);
}
.overline::before{ content:""; flex:none; width:2rem; height:1px; background:currentColor; }
@media (min-width:768px){ .overline::before{ width:3rem; } }
.overline--plain::before{ display:none; }
.overline .num{ color:var(--gold-ink); font-family:var(--mono); letter-spacing:.1em; }
.on-dark .overline{ color:var(--dark-muted); }
.on-dark .overline .num{ color:var(--gold-on-dark); }

.micro{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-fg); }
.on-dark .micro{ color:var(--dark-muted); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* Drop cap for introductory paragraphs */
.dropcap::first-letter{
  float:left; font-family:var(--serif); font-size:4.5rem; line-height:.8;
  margin:.35rem .75rem 0 0; color:var(--fg);
}
.on-dark .dropcap::first-letter{ color:var(--dark-fg); }

/* Vertical side labels (desktop only) */
.vlabel{
  display:none; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:10px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-fg);
  white-space:nowrap;
}
@media (min-width:1024px){ .vlabel{ display:block; } }

/* ------------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------------ */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  height:3rem; padding:0 2.25rem;
  font-family:var(--sans); font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1px solid transparent; background:transparent; color:inherit;
  transition:color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.btn--lg{ height:3.5rem; padding:0 2.5rem; }
.btn--sm{ height:2.5rem; padding:0 1.5rem; font-size:.6875rem; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* Primary: charcoal, gold slides in from the left */
.btn--primary{ background:var(--fg); color:var(--bg); border-color:var(--fg); box-shadow:var(--shadow-btn); }
.btn--primary::before{
  content:""; position:absolute; inset:-1px; z-index:-1; background:var(--gold);
  transform:translateX(-101%); transition:transform var(--t-ui) var(--ease);
}
.btn--primary:hover, .btn--primary:focus-visible{ color:var(--fg); border-color:var(--gold); box-shadow:var(--shadow-btn-hover); }
.btn--primary:hover::before, .btn--primary:focus-visible::before{ transform:translateX(0); }
/* Primary on dark grounds: alabaster face */
.on-dark .btn--primary{ background:var(--bg); color:var(--fg); border-color:var(--bg); }
.on-dark .btn--primary::before{ background:var(--gold-on-dark); }
.on-dark .btn--primary:hover{ border-color:var(--gold-on-dark); }

/* Secondary: hairline, fills to charcoal */
.btn--secondary{ border-color:var(--fg); color:var(--fg); }
.btn--secondary:hover{ background:var(--fg); color:var(--bg); }
.on-dark .btn--secondary{ border-color:var(--dark-line); color:var(--dark-fg); }
.on-dark .btn--secondary:hover{ background:var(--bg); color:var(--fg); border-color:var(--bg); }

/* Link: gold underline draws in */
.link{
  display:inline-flex; align-items:center; gap:.75rem; padding-bottom:.35rem;
  font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  background:linear-gradient(currentColor,currentColor) left bottom / 100% 1px no-repeat,
             linear-gradient(var(--gold),var(--gold)) left bottom / 0 1px no-repeat;
  transition:color var(--t-ui) var(--ease), background-size var(--t-color) var(--ease);
}
.link:hover{ color:var(--gold-ink); background-size:100% 1px, 100% 1px; }
.on-dark .link:hover{ color:var(--gold-on-dark); }
.link .arrow{ transition:transform var(--t-ui) var(--ease); }
.link:hover .arrow{ transform:translateX(.35rem); }

/* ------------------------------------------------------------------
   7. NAVIGATION
   ------------------------------------------------------------------ */
.nav{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h);
  background:rgba(249,248,246,0); border-bottom:1px solid transparent;
  transition:background-color var(--t-color) var(--ease), border-color var(--t-color) var(--ease);
}
.nav.is-scrolled{
  background:rgba(249,248,246,.9);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand{ display:inline-flex; align-items:center; gap:.875rem; text-decoration:none; }
.brand img{ width:2rem; height:2rem; }
.brand__word{ font-family:var(--serif); font-size:1.25rem; letter-spacing:.01em; }
.brand__word em{ font-style:italic; color:var(--gold); }
.nav__links{ display:none; list-style:none; margin:0; padding:0; gap:2.75rem; }
.nav__links a{
  font-size:.6875rem; font-weight:500; letter-spacing:.25em; text-transform:uppercase;
  text-decoration:none; color:var(--muted-fg); transition:color var(--t-ui) var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--gold-ink); }
.nav__right{ display:flex; align-items:center; gap:1.25rem; }
.nav__cta{ display:none; }
.nav__menu{
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:3rem; height:3rem; padding:0 .75rem; background:none; border:0; cursor:pointer; color:var(--fg);
}
.nav__menu span{ display:block; height:1px; background:currentColor; }
.nav__menu span:last-child{ width:60%; margin-left:auto; }
@media (min-width:960px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .nav__menu{ display:none; }
}

.sheet{
  position:fixed; inset:0; z-index:150; background:var(--bg);
  display:flex; flex-direction:column; padding:calc(var(--nav-h) + 2rem) var(--gutter) 2.5rem;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-color) var(--ease), visibility 0s linear var(--t-color);
}
.sheet.is-open{ opacity:1; visibility:visible; transition:opacity var(--t-color) var(--ease); }
.sheet__close{
  position:absolute; top:.75rem; right:calc(var(--gutter) - .75rem);
  width:3rem; height:3rem; background:none; border:0; cursor:pointer; color:var(--fg);
}
.sheet__close::before, .sheet__close::after{ content:""; position:absolute; left:25%; right:25%; top:50%; height:1px; background:currentColor; }
.sheet__close::before{ transform:rotate(45deg); } .sheet__close::after{ transform:rotate(-45deg); }
.sheet__links{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.sheet__links li{ border-bottom:1px solid var(--line); }
.sheet__links a{
  display:flex; align-items:baseline; gap:1rem; padding:1.25rem 0; text-decoration:none;
  font-family:var(--serif); font-size:2.25rem; line-height:1.1;
  transition:color var(--t-ui) var(--ease);
}
.sheet__links a .micro{ min-width:1.5rem; }
.sheet__links a:hover{ color:var(--gold-ink); font-style:italic; }
.sheet__foot{ margin-top:auto; display:flex; flex-direction:column; gap:1.5rem; }

/* ------------------------------------------------------------------
   8. FRAMES — portrait image containers with grayscale reveal
   ------------------------------------------------------------------ */
.frame{
  position:relative; margin:0; overflow:hidden; aspect-ratio:3/4;
  background:var(--muted); box-shadow:var(--shadow-frame);
  transition:box-shadow var(--t-image) var(--ease);
}
.frame::after{ /* inner border */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.frame--dark{ background:#141414; }
.frame--dark::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.frame--4x5{ aspect-ratio:4/5; }
.frame__art{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  filter:grayscale(1); transform:scale(1);
  transition:filter var(--t-image) var(--ease), transform var(--t-image) var(--ease);
}
.frame__vlabel{ position:absolute; left:1.25rem; bottom:1.5rem; z-index:2; }
.frame--dark .frame__vlabel{ color:var(--dark-muted); }
.frame__tag{ position:absolute; top:1.25rem; right:1.25rem; z-index:2; }

/* Colour is the reward: hover on pointer devices… */
@media (hover:hover){
  .group:hover .frame, .group:focus-within .frame{ box-shadow:var(--shadow-frame-hover); }
  .group:hover .frame__art, .group:focus-within .frame__art{ filter:grayscale(0); transform:scale(1.05); }
}
/* …and arrival in view on touch screens, where hover doesn't exist */
@media (hover:none){
  .group.in-view .frame__art{ filter:grayscale(0); transition-delay:400ms; }
}

/* ------------------------------------------------------------------
   9. PRODUCT RENDERS (CSS/SVG stand-ins until photography lands)
   ------------------------------------------------------------------ */
.render{ position:relative; container-type:inline-size; }
.render--card, .render--jet{
  width:min(74%,22rem); aspect-ratio:1.586; overflow:hidden;
  border:1px solid rgba(0,0,0,.22);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.render--gold{ background:linear-gradient(150deg,#f0dfab 0%,#c9a659 34%,#5b4222 62%,#cba75e 100%); color:#3a2c0c; }
.render--silver{ background:linear-gradient(150deg,#fbfbfb 0%,#cfd2d4 34%,#8f9497 62%,#e6e8e9 100%); color:#2c2f31; }
.render--card::after, .render--jet::after{ /* foil sheen sweeps slowly on hover */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.3) 45%,transparent 56%);
  transform:translateX(-60%); transition:transform var(--t-image) var(--ease);
}
@media (hover:hover){ .group:hover .render::after{ transform:translateX(60%); } }
.render__top{ font-family:var(--mono); font-size:4.2cqi; letter-spacing:.14em; font-weight:500; opacity:.85; }
.render__weight{ font-family:var(--serif); font-style:italic; font-size:12cqi; margin:2cqi 0; line-height:1.1; }
.render__bottom{ font-family:var(--mono); font-size:3.6cqi; letter-spacing:.1em; opacity:.75; }
.render--jet svg{ width:38%; }
.render--jet span{ font-family:var(--mono); font-size:4.2cqi; font-weight:500; letter-spacing:.1em; opacity:.8; margin-top:2cqi; }
.render--bag{ width:min(50%,15rem); filter:drop-shadow(0 12px 24px rgba(0,0,0,.18)); }

/* ------------------------------------------------------------------
   10. CARDS — defined by a top rule, not a box
   ------------------------------------------------------------------ */
.card{
  border-top:1px solid var(--line-strong); padding:2rem 0 0;
  transition:background-color var(--t-color) var(--ease), box-shadow var(--t-color) var(--ease);
}
.card--featured{ border-top:4px solid var(--gold); }
.on-dark .card{ border-top-color:var(--dark-line); }

/* ------------------------------------------------------------------
   11. FORMS — underline only, italic serif placeholders
   ------------------------------------------------------------------ */
.field{ display:flex; flex-direction:column; gap:.25rem; }
.field label{ font-size:.6875rem; font-weight:500; letter-spacing:.25em; text-transform:uppercase; color:var(--muted-fg); }
.field label .opt{ letter-spacing:.1em; text-transform:none; font-weight:400; font-style:italic; font-family:var(--serif); }
.input{
  width:100%; height:3rem; padding:.5rem 0; appearance:none; -webkit-appearance:none;
  font-family:var(--sans); font-size:.9375rem; color:var(--fg);
  background:transparent; border:0; border-bottom:1px solid var(--fg); border-radius:0;
  transition:border-color var(--t-ui) var(--ease);
}
.input::placeholder{ font-family:var(--serif); font-style:italic; color:var(--muted-fg); opacity:1; }
.input:focus{ outline:none; }
.input:focus-visible{ outline:none; border-bottom-color:var(--gold); }
textarea.input{ height:auto; min-height:6rem; resize:vertical; line-height:1.6; padding-top:.75rem; }
select.input{
  cursor:pointer; padding-right:2rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231A1A1A' stroke-width='1'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right .25rem center no-repeat;
}

/* ------------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------------ */
.site-footer{ background:var(--dark-bg); color:var(--dark-fg); padding-top:var(--section-y); overflow:hidden; z-index:2; }
.footer__grid{ row-gap:3rem; padding-bottom:4rem; }
.footer__brand p{ margin-top:1.25rem; max-width:24rem; color:var(--dark-muted); font-size:.9375rem; }
.footer__col h2{ font-family:var(--sans); font-size:.6875rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--dark-muted); margin-bottom:1.5rem; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.875rem; }
.footer__col a{ text-decoration:none; font-size:.9375rem; transition:color var(--t-ui) var(--ease); }
.footer__col a:hover{ color:var(--gold-on-dark); }
.footer__word{
  font-family:var(--serif); font-size:clamp(4.5rem,17vw,17rem); line-height:.8; letter-spacing:-.04em;
  color:rgba(249,248,246,.06); white-space:nowrap; user-select:none; margin-bottom:-.12em;
}
.footer__word em{ font-style:italic; color:rgba(201,166,89,.14); }
.footer__bottom{
  border-top:1px solid var(--dark-line); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem;
}
@media (min-width:768px){
  .footer__brand{ grid-column:1 / span 5; }
  .footer__col--a{ grid-column:7 / span 3; }
  .footer__col--b{ grid-column:10 / span 3; }
}

/* ------------------------------------------------------------------
   13. MOTION — slow reveal, and a full stop for reduced motion
   ------------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 1200ms var(--ease), transform 1200ms var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:150ms; }
.reveal[data-delay="2"]{ transition-delay:300ms; }
.reveal[data-delay="3"]{ transition-delay:450ms; }
.no-js .reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:0ms !important; transition-delay:0ms !important; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
  .frame__art, .group:hover .frame__art{ transform:none !important; }
  .render::after{ display:none; }
}