/* ============================================================
   STUDIO L1 — MAIN SITE SYSTEM
   Register: quiet luxury. Restraint, space, hairlines, tracking.
   Anchored by graphite. Lit by rare glass moments.

   THE GOVERNING RULE
   The smaller the mark, the more space it needs around it.
   Cheap design fills the field. Considered design leaves it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..500;1,8..60,300..400&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  /* grounds */
  --paper:#FCFCFB;
  --pearl:#F7F4EF;
  --stock:#262422;   /* the ONE dark ground, used everywhere */

  /* gold — classical at rest, lifts to champagne */
  --gold:#B99B54;        --gold-lo:#A98B47;   --gold-hi:#C9AC68;
  --gold-lift:#EFE2C2;   --gold-lift-hi:#F5EDD8;
  /* ---- LOCKED: solid gold fills on LIGHT grounds (approved 15 Aug 2026) ----
     Base #C8B999 · hover #D6CBB0. Do not substitute the classical gold here —
     #B99B54 is weighted for the matte dark stock and reads as heavy mustard
     on paper. Two golds, each correct for its ground. */
  --gold-blog:#C8B999;   --gold-blog-hi:#D6CBB0;
  --gold-ink:#B99B54;    /* MAIN gold — classical, both grounds */
  --gold-ink-deep:#8E7A45; /* only where small text needs contrast on light */

  /* ink */
  --ink:#262423;
  --read:#4C4C53;
  --faint:#8B8579;
  --ink-on-dark:#FBF7F2;
  --read-on-dark:#B5AFA5;
  --faint-on-dark:#7E786E;

  --hair:rgba(185,155,84,.34);
  --hair-light:rgba(185,155,84,.42);

  --lime:#C8F590;  /* reserved: one primary action per page, nothing else */

  --sans:'Inter',system-ui,sans-serif;
  --disp:'Playfair Display',Georgia,serif;
  --body:'Source Serif 4',Georgia,serif;
  --mark:'Fraunces',Georgia,serif;

  /* space scale — generous by default */
  --s-section:8rem;
  --s-sectionTight:5.5rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:1180px;margin:0 auto;padding:0 2.6rem}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 2.6rem}
@media(max-width:720px){.wrap,.wrap-narrow{padding:0 1.4rem}}

section{padding:var(--s-section) 0}
section.tight{padding:var(--s-sectionTight) 0}
.ground-pearl{background:var(--pearl)}


/* ============================================================
   TYPE
   ============================================================ */

/* the small mark — needs air around it, always */
.kicker{
  font-size:10px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:2.6rem;      /* the space IS the design */
  display:block;
}
.kicker.center{text-align:center}

h1,h2,h3{
  font-family:var(--disp); font-weight:500;
  color:var(--ink); line-height:1.16; letter-spacing:-.012em;
}
/* display caps — the structural heading */
.caps{
  font-family:var(--disp); font-weight:500;
  text-transform:uppercase; letter-spacing:.11em; line-height:1.24;
}
h1{font-size:clamp(2rem,4.2vw,3rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.22rem}

.lede{
  font-family:var(--body); font-size:1.08rem; line-height:1.8;
  color:var(--read); max-width:56ch;
}
.copy{
  font-family:var(--body); font-size:1rem; line-height:1.78;
  color:var(--read); max-width:48ch;
}
.copy + .copy{margin-top:1.1rem}

/* tiny specification label — engraved, not shouted */
.spec{
  font-size:10px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--faint); line-height:2.2;
}
.spec b{color:var(--ink);font-weight:600}


/* ============================================================
   HAIRLINES — the only decoration this system allows
   ============================================================ */
.hair{height:1px;width:100%;border:0;background:var(--hair-light)}
.hair-fade{height:1px;border:0;
  background:linear-gradient(90deg,var(--gold-ink),rgba(142,122,69,0))}

/* caps heading followed by a rule running to the margin */
.rulehead{display:flex;align-items:center;gap:1.6rem;margin-bottom:1.6rem}
.rulehead h2{white-space:nowrap}
.rulehead .rule{flex:1;height:1px;
  background:linear-gradient(90deg,var(--gold-ink),rgba(142,122,69,.08))}


/* ============================================================
   BUTTONS — sharp corners. Never rounded.
   ============================================================ */
.btn{
  display:inline-block; border-radius:0;
  font-size:10px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase;
  padding:16px 30px;
  background:var(--ink); color:var(--paper);
  transition:background .3s ease;
}
.btn:hover{background:#3A3734}

.btn-gold{background:var(--gold-blog);color:#221F19}
.btn-gold:hover{background:var(--gold-blog-hi)}

/* text link with a rule beneath — retracts on hover */
.link{
  position:relative; display:inline-block;
  font-size:10px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink); padding-bottom:6px;
}
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-ink);
  transform:scaleX(1); transform-origin:left;
  transition:transform .3s ease;
}
.link:hover::after{transform:scaleX(0)}


/* ============================================================
   DARK — matte paper stock, not a lit screen
   ============================================================ */
.stock{
  position:relative; isolation:isolate;
  background:var(--stock);
  color:var(--ink-on-dark);
}
.stock::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px 190px;
}
.stock > *{position:relative;z-index:1}

.stock h1,.stock h2,.stock h3{color:var(--ink-on-dark)}
.stock .lede,.stock .copy{color:var(--read-on-dark)}
.stock .spec{color:var(--faint-on-dark)}
.stock .spec b{color:var(--gold);transition:color .35s ease}
.stock .kicker{color:var(--gold);transition:color .35s ease}
.stock em{font-style:italic;color:var(--gold);transition:color .35s ease}

/* gold lifts as light passes across the section */
.stock:hover .kicker,
.stock:hover .spec b,
.stock:hover em{color:var(--gold-hi)}

.stock .hair{background:var(--gold);transition:background .35s ease}
.stock:hover .hair{background:var(--gold-hi)}

.stock .btn{background:var(--gold);color:#221F19}
.stock .btn:hover{background:#C3A55E}


/* ============================================================
   STRUCTURE — ruled grids rather than boxes
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2.8rem}}

.cols-3{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hair-light)}
@media(max-width:800px){.cols-3{grid-template-columns:1fr}}
.cols-3 .cell{padding:2.2rem 2rem 2rem 0}
.cols-3 .cell + .cell{border-left:1px solid var(--hair-light);padding-left:2rem}
@media(max-width:800px){
  .cols-3 .cell + .cell{border-left:0;border-top:1px solid var(--hair-light);padding-left:0}
}
.stock .cols-3,
.stock .cols-3 .cell + .cell{border-color:var(--hair)}

/* stacked index — numbered rows divided by hairlines */
.index-list{border-top:1px solid var(--hair-light)}
.index-list .row{
  display:grid;grid-template-columns:auto 1fr auto;gap:2.4rem;align-items:baseline;
  padding:1.9rem 0; border-bottom:1px solid var(--hair-light);
  transition:padding-left .35s ease;
}
.index-list .row:hover{padding-left:.7rem}
.index-list .n{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold-ink)}
.index-list .t{font-family:var(--disp);font-size:1.24rem;font-weight:500}
.index-list .d{font-family:var(--body);font-size:.96rem;color:var(--read);text-align:right;max-width:34ch;justify-self:end}
@media(max-width:700px){
  .index-list .row{grid-template-columns:auto 1fr;gap:1.2rem}
  .index-list .d{grid-column:1/-1;text-align:left;justify-self:start;margin-top:.5rem}
}

/* centred moment — maximum clearance */
.centre{text-align:center}
.centre .lede,.centre .copy{margin-left:auto;margin-right:auto}
.centre .hair{max-width:220px;margin:3rem auto 0}
.centre .btn{margin-top:3rem}


/* ============================================================
   THE STUDIO L1 METHOD — ring schema
   ============================================================ */
.glass{position:relative;overflow:hidden;
  background:linear-gradient(152deg,rgba(255,255,255,.58),rgba(255,255,255,.34) 46%,rgba(255,255,255,.48));
  backdrop-filter:blur(32px) saturate(185%) brightness(1.08);
  -webkit-backdrop-filter:blur(32px) saturate(185%) brightness(1.08);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1.5px 0 rgba(255,255,255,.98) inset,0 26px 56px -30px rgba(60,58,54,.32)}
.glass::before{content:'';position:absolute;left:-30%;top:-70%;width:74%;height:190%;pointer-events:none;
  transform:rotate(19deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0))}
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.3px;
  background:linear-gradient(135deg,rgba(245,237,216,1),rgba(255,255,255,.14) 34%,rgba(255,255,255,.14) 62%,rgba(247,220,204,.92));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.glass>*{position:relative;z-index:1}

.loop{position:relative;width:min(100%,700px);aspect-ratio:1;margin:0 auto}
@media(max-width:820px){.loop{display:none}}
.loop svg.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow{stroke-dasharray:7 287;animation:trav 15s linear infinite}
@keyframes trav{to{stroke-dashoffset:-1176}}
@media(prefers-reduced-motion:reduce){.flow{animation:none;opacity:0}}

.node{position:absolute;translate:-50% -50%;width:150px;border-radius:16px;
  padding:1rem .8rem .85rem;text-align:center;transition:.26s cubic-bezier(.2,.7,.3,1)}
.node:hover{translate:-50% -55%}
.node .sym{width:32px;height:32px;margin:0 auto .4rem}
.node .sym svg{width:32px;height:32px;display:block}
.node .n{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold-ink);margin-bottom:.25rem}
.node .t{font-family:var(--disp);font-size:1.12rem;font-weight:500;line-height:1.1;color:var(--ink)}
.node .s{font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:.35rem}
.node.dark{background:linear-gradient(152deg,rgba(35,33,32,.94),rgba(35,33,32,.86));border-color:rgba(185,155,84,.55)}
.node.dark::before{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1),rgba(255,255,255,0))}
.node.dark::after{background:linear-gradient(135deg,rgba(239,226,194,1),rgba(255,255,255,.08) 34%,rgba(255,255,255,.08) 64%,rgba(185,155,84,.85))}
.node.dark .t{color:#FBF7F2}.node.dark .n{color:var(--gold-lift)}.node.dark .s{color:#B9B9C0}

.core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:206px;height:206px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.core svg.h{width:50px;height:50px;margin-bottom:.4rem}
.core .w{font-family:var(--mark);font-weight:600;font-size:16px;color:var(--ink)}
.core .k{font-size:8px;font-weight:600;letter-spacing:.22em;color:var(--gold-ink);margin-top:.35rem;text-transform:uppercase}

.mlist{display:none}
@media(max-width:820px){.mlist{display:grid;gap:11px}}
.mlist .m{border-radius:12px;padding:1rem 1.1rem;display:flex;gap:.95rem;align-items:center;
  background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.92)}
.mlist .m svg{width:28px;height:28px;flex:none}
.mlist .m .t{font-family:var(--disp);font-size:1.12rem;font-weight:500}
.mlist .m .n{font-size:10px;font-weight:600;color:var(--gold-ink);letter-spacing:.2em}


  /* page-specific only — everything else comes from the system */
  .masthead{padding:2rem 0;border-bottom:1px solid var(--hair-light)}
  .masthead .in{display:flex;align-items:center;justify-content:space-between;gap:2.2rem}
  .wm{font-family:var(--mark);font-weight:600;font-size:17px;letter-spacing:.01em;color:var(--ink);flex:none}
  .nav{display:flex;gap:1.9rem;margin:0 auto;flex-wrap:nowrap}
  .nav a{position:relative;font-size:10px;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;color:var(--read);white-space:nowrap;padding-bottom:5px;
    transition:color .25s ease}
  .nav a:hover{color:var(--ink)}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--gold-ink);transform:scaleX(0);transform-origin:left;
    transition:transform .28s ease}
  .nav a:hover::after,.nav a.on::after{transform:scaleX(1)}

  /* PORTAL — the app entrance, held apart from the nav */
  .portal{flex:none;display:inline-block;border-radius:0;
    font-size:10px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;
    color:var(--ink);padding:11px 20px;
    border:1px solid var(--gold-ink);
    transition:background .3s ease,color .3s ease}
  .portal:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

  @media(max-width:1080px){.nav{gap:1.4rem}.nav a{letter-spacing:.14em}}
  @media(max-width:900px){.nav{display:none}}

  .hero{padding:11rem 0 9rem}
  .hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);letter-spacing:-.026em;line-height:1.06}
  .hero h1 em{font-style:italic;color:var(--gold-ink)}
  .hero .lede{margin-top:2.4rem}
  .hero .btns{display:flex;gap:2.6rem;align-items:center;flex-wrap:wrap;margin-top:3.4rem}

  .statement{padding:7rem 0}
  .statement p{font-family:var(--disp);font-size:clamp(1.4rem,2.6vw,2rem);
    line-height:1.42;letter-spacing:-.01em;color:var(--ink);max-width:28ch}
  .statement .hair-fade{width:120px;margin-bottom:2.4rem}

  /* ---- WHAT YOU GET ---- */
  .gets{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    border-top:1px solid var(--hair-light)}
  @media(max-width:900px){.gets{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.gets{grid-template-columns:1fr}}
  .get{padding:2.4rem 2.2rem 2.4rem 0;border-bottom:1px solid var(--hair-light)}
  .get:not(:nth-child(3n+1)){border-left:1px solid var(--hair-light);padding-left:2.2rem}
  @media(max-width:900px){
    .get{padding-right:1.8rem}
    .get:not(:nth-child(3n+1)){border-left:0;padding-left:0}
    .get:nth-child(even){border-left:1px solid var(--hair-light);padding-left:1.8rem}
  }
  @media(max-width:620px){
    .get:nth-child(even){border-left:0;padding-left:0}
  }
  .gn{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--gold-ink);
    display:block;margin-bottom:1rem}
  .get h3{font-size:1.14rem;margin-bottom:.7rem}
  .get .copy{font-size:.96rem;max-width:none}

  /* ---- CREDO ---- */
  .credo{padding:7rem 0;text-align:center}
  .credo-rule{width:90px;margin:0 auto 2.6rem}
  .credo p{font-family:var(--disp);font-weight:400;
    font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.5;
    letter-spacing:-.006em;color:var(--ink);max-width:26ch;margin:0 auto}
  .credo em{font-style:italic;color:var(--gold-ink)}

  /* ---- LIGHT CLOSE ---- */
  .close-light{padding:9rem 0}
  .close-light .caps{color:var(--ink)}
  .close-light .gold{font-style:italic;color:var(--gold-ink)}
  .close-light .hair{background:var(--gold-ink);max-width:220px;margin:3rem auto 0}

  /* ---- FOOTER ---- */
  footer{padding:5.4rem 0 2.6rem}
  .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:4rem;padding-bottom:3.4rem}
  @media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:2.6rem}}
  .fwm{font-family:var(--mark);font-weight:600;font-size:22px;color:var(--ink-on-dark);
    display:block;margin-bottom:1.1rem}
  .fbrand p{font-family:var(--body);font-size:.95rem;line-height:1.75;
    color:var(--read-on-dark);max-width:38ch}
  .fhead{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold);display:block;margin-bottom:1.5rem;transition:color .35s ease}
  footer:hover .fhead{color:var(--gold-hi)}
  .fcol a{display:block;font-size:.95rem;color:var(--read-on-dark);
    padding:.42rem 0;transition:color .25s ease}
  .fcol a:hover{color:var(--ink-on-dark)}
  .fbase{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
    padding-top:1.9rem;border-top:1px solid rgba(185,155,84,.30);
    font-size:.86rem;color:var(--faint-on-dark)}
  .flegal a{margin-left:1.8rem;color:var(--faint-on-dark);transition:color .25s ease}
  .flegal a:hover{color:var(--read-on-dark)}
  @media(max-width:600px){.flegal a{margin:0 1.6rem 0 0}}