/* ============================================================================
   Flickin Grids — grids.flickinlabs.com

   Colours measured off the live Instagram grid, not picked: the feed sits at
   hue ~26deg and ~8% saturation across all 17 tiles, lightest dominant tone
   #CFC8C1, darkest #151310. Warm near-monochrome, brass the only saturated
   thing on the page.

   REVISION — the first cut was cluttered: a WebGL glass scene over a moving
   reel under a screen-filling headline, three focal points fighting. Fixed by:
     * one calm graded video, type with real space around it
     * headline down from 116px to 72px max; premium reads as restraint
     * the glass moved OUT of the 3D and into the UI as a warm BROWN glass —
       which is where glassmorphism actually belongs
     * plain low-contrast grounds behind the work so the tiles carry the page
   ========================================================================= */

:root{
  --ink:      #1C1B19;
  --ink-deep: #151310;
  --ink-2:    #201D1A;
  --taupe:    #7B716B;
  --stone:    #AA9F95;
  --bone:     #CFC8C1;
  --brass:    #A8875C;
  --brass-hi: #C0A277;

  --t-1: rgba(207,200,193,.93);
  --t-2: rgba(207,200,193,.58);
  --t-3: rgba(207,200,193,.34);

  /* warm brown glass — the site's one material.
     Sharp, not frosted: the blur is moderate, the EDGE is a hairline, the
     corners are 2px, and a tight sheen runs along the top so it catches light
     like a real pane instead of looking like a translucent rectangle. */
  --glass:      linear-gradient(158deg, rgba(99,84,74,.34) 0%,
                                        rgba(52,44,38,.22) 48%,
                                        rgba(32,29,26,.16) 100%);
  --glass-edge: inset 0 0 0 1px rgba(168,135,92,.26);
  --glass-lift: inset 0 1px 0 rgba(207,200,193,.15);
  --glass-blur: blur(18px) saturate(1.3);

  --strong: 'Archivo', system-ui, sans-serif;
  --deco:   'Cormorant Garamond', Georgia, serif;

  --gut:  clamp(22px, 5vw, 92px);
  --navh: 74px;
  --maxw: 1280px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background: var(--ink);
  color: var(--t-1);
  font-family: var(--strong);
  font-size:16px;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background: rgba(168,135,92,.3); }
:focus-visible{ outline:2px solid var(--brass-hi); outline-offset:3px; border-radius:2px; }

.grain{
  position:fixed; inset:-50%; z-index:80; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── mark ─────────────────────────────────────────────────────────────── */
.m-cell{ fill: var(--bone); }
.m-head{ fill: var(--brass); }

.brand{ display:inline-flex; align-items:center; gap:13px; }
.brand-mark{ width:auto; height:26px; flex:0 0 auto; }
.brand-type{ display:inline-flex; align-items:baseline; gap:8px; line-height:1; }
.brand-type b{
  font-family:var(--strong); font-weight:600; font-size:14px;
  letter-spacing:.2em; text-indent:.2em; color:var(--bone);
}
.brand-type i{
  font-family:var(--deco); font-style:italic; font-weight:500; font-size:19px;
  color:var(--brass-hi);
}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:70;
  height:var(--navh);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 var(--gut);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.stuck{
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift), 0 1px 0 rgba(168,135,92,.22);
}
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); }
/* brass rule wipes in under the link — one hover language shared with .feat-link */
.nav-links a:not(.nav-cta){
  position:relative; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--t-2); padding-block:6px; transition:color .3s var(--ease);
}
.nav-links a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--ease);
}
.nav-links a:not(.nav-cta):hover{ color:var(--bone); }
.nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-cta{
  color:var(--ink) !important; background:var(--bone);
  padding:10px 18px; border-radius:2px; font-weight:600; letter-spacing:.14em !important;
  transition:background .3s var(--ease);
}
.nav-cta:hover{ background:var(--brass-hi); }

/* ── hero ─────────────────────────────────────────────────────────────── */
/* Copy sits at ~62% down rather than pinned to the floor — bottom-pinned type
   reads as a caption on someone else's photograph; lifted, it reads as a title. */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:flex-end;
  padding: calc(var(--navh) + 32px) var(--gut) clamp(96px,19vh,190px);
}
.hero-stage{ position:absolute; inset:0; z-index:0; background:var(--ink-deep); }
.hero-stage video{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.3s var(--ease);
}
.hero-stage video.ready{ opacity:1; }
body[data-hero="poster"] .hero-stage video{ opacity:1; }
/* Scrim weighted LEFT, because the plate is naturally dark on its left
   (the marble wall in shadow) — so the type lands on a bed that already
   exists rather than being punched out of a bright frame.
   LIGHTENED in r2: the first pass ran .95/.46 and buried the room. The whole
   argument of this page is "look at the quality", so hiding the plate behind a
   heavy scrim was arguing against itself. Type legibility now comes from the
   left ramp being short and steep, not from flooding the whole frame. */
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(21,19,16,.93) 0%, rgba(21,19,16,.72) 20%,
                           rgba(21,19,16,.20) 48%, rgba(21,19,16,.06) 100%),
    linear-gradient(0deg,  rgba(21,19,16,.62) 0%, rgba(21,19,16,.05) 34%, transparent 55%);
}
.hero-copy{ position:relative; z-index:1; max-width:min(560px, 100%); }

.eyebrow{
  font-size:10px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--brass-hi); margin-bottom:26px;
}
.hero h1{
  font-family:var(--strong); font-weight:600;
  font-size:clamp(34px, 5vw, 72px);
  line-height:1.04; letter-spacing:-.02em; color:var(--bone); text-wrap:balance;
}
.lede{
  margin-top:20px; max-width:30ch;
  font-family:var(--deco); font-style:italic; font-weight:500;
  font-size:clamp(21px,2.2vw,29px); line-height:1.42; color:var(--bone);
}
/* was a bare underlined link and read as an afterthought; a hairline brass
   frame gives it the weight of a decision without shouting like a button */
.scroll-cue{
  display:inline-flex; align-items:center; gap:16px;
  margin-top:clamp(32px,5vh,54px); padding:13px 22px; border-radius:2px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--t-1);
  box-shadow: inset 0 0 0 1px rgba(168,135,92,.42);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.scroll-cue:hover{
  background: rgba(168,135,92,.12);
  box-shadow: inset 0 0 0 1px rgba(168,135,92,.8);
}
.scroll-cue i{
  width:40px; height:1px; background:var(--brass); display:block;
  transform-origin:0 50%; animation: cue 2.8s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{transform:scaleX(.35)} 50%{transform:scaleX(1)} }

/* ── featured ─────────────────────────────────────────────────────────── */
/* The grid below is deliberately uniform — it is a profile replica, that is the
   whole idea. Uniformity only reads as INTENT if something around it has
   rhythm, so one piece gets shown at scale first. Without this band the grid
   reads as a template; with it, it reads as a decision. */
.feat{
  max-width:var(--maxw); margin:0 auto;
  padding: clamp(96px,13vh,168px) var(--gut) clamp(40px,6vh,72px);
  display:grid; grid-template-columns: 1fr minmax(280px, 396px);
  gap: clamp(32px,5vw,86px); align-items:center;
}
.feat-copy h2{
  font-family:var(--strong); font-weight:600;
  font-size:clamp(30px,4.2vw,58px); line-height:1.04; letter-spacing:-.02em;
  color:var(--bone);
}
.feat-copy h2 em{
  font-family:var(--deco); font-style:italic; font-weight:400;
  color:var(--brass-hi); letter-spacing:0;
}
.feat-copy > p{ margin-top:22px; max-width:46ch; color:var(--t-2); font-size:15px; }
.feat-link{
  display:inline-flex; align-items:center; gap:14px; margin-top:30px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-hi);
}
.feat-link i{ width:44px; height:1px; background:var(--brass); display:block;
  transition:width .4s var(--ease); }
.feat-link:hover i{ width:66px; }
/* Capped: an uncapped 9:16 column ran ~700px tall beside a ~320px text block and
   stretched the whole band. Height-first sizing keeps the two columns in balance
   and lets the reel stay its true portrait ratio. */
.feat-media{
  position:relative; aspect-ratio:9/16; height:clamp(360px,48vh,520px);
  width:auto; margin-inline:auto; overflow:hidden; border-radius:2px;
  background:var(--ink-2);
  box-shadow: var(--glass-edge), 0 34px 70px rgba(0,0,0,.5);
}
.feat-media video{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){
  .feat{ grid-template-columns:1fr; gap:34px; }
  .feat-media{ max-width:340px; }
}

/* ── sections ─────────────────────────────────────────────────────────── */
/* Plain, low-contrast grounds. The work has to be the brightest thing here;
   any gradient behind a grid of interiors just competes with them. */
.work,.month,.talk{ padding: clamp(96px,13vh,168px) var(--gut); }
.month{ background: var(--ink-2); }

.sec-head{ max-width:var(--maxw); margin:0 auto clamp(48px,7vh,84px); }
.sec-head h2,.talk h2{
  font-family:var(--strong); font-weight:600;
  font-size:clamp(28px,4vw,52px); line-height:1.08; letter-spacing:-.018em;
  color:var(--bone); text-wrap:balance;
}
.sec-head h2 em,.talk h2 em{
  font-family:var(--deco); font-style:italic; font-weight:400;
  color:var(--brass-hi); letter-spacing:0;
}
.sec-note{ margin-top:20px; max-width:54ch; color:var(--t-2); font-size:15px; }

/* ── work grid ────────────────────────────────────────────────────────── */
.grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.2vw,20px);
}
@media (max-width:860px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid{ grid-template-columns:1fr; } }

.tile{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  background:var(--ink-2); cursor:pointer;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: inset 0 0 0 1px rgba(168,135,92,.10);
}
.tile:hover,.tile:focus-visible{
  transform:translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(168,135,92,.34), 0 22px 44px rgba(0,0,0,.42);
}
.tile img,.tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile video{ opacity:0; transition:opacity .5s var(--ease); }
.tile.playing video{ opacity:1; }
.tile.playing img{ opacity:0; transition:opacity .5s var(--ease); }

/* warm brown glass plate over the tile on hover */
.tile-veil{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease);
  background:
    var(--glass),
    linear-gradient(0deg, rgba(21,19,16,.88) 0%, rgba(21,19,16,.26) 46%, transparent 74%);
  backdrop-filter: blur(2px) saturate(1.15);
  -webkit-backdrop-filter: blur(2px) saturate(1.15);
  box-shadow: var(--glass-lift), var(--glass-edge);
}
.tile:hover .tile-veil,.tile:focus-visible .tile-veil{ opacity:1; }
.tile-meta{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  transform:translateY(8px); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.tile:hover .tile-meta,.tile:focus-visible .tile-meta{ transform:none; opacity:1; }
.tile-kind{ font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-hi); }
.tile-line{
  margin-top:6px; font-family:var(--deco); font-style:italic; font-size:18px;
  line-height:1.32; color:var(--bone);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tile-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  width:24px; height:24px; display:grid; place-items:center;
  color:var(--bone); filter: drop-shadow(0 1px 3px rgba(0,0,0,.65));
}
.tile-badge svg{ width:14px; height:14px; fill:currentColor; }

/* ── the month ────────────────────────────────────────────────────────── */
.month-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:clamp(12px,1.4vw,20px);
}
.card{
  position:relative; padding:30px 26px 34px; border-radius:2px; overflow:hidden;
  background: var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift), var(--glass-edge);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow: var(--glass-lift), inset 0 0 0 1px rgba(168,135,92,.46), 0 24px 50px rgba(0,0,0,.34);
}
.card-n{ font-size:10px; letter-spacing:.26em; color:var(--brass); font-variant-numeric:tabular-nums; }
.card h3{
  margin:14px 0 10px; font-family:var(--strong); font-weight:600; font-size:18px;
  line-height:1.28; color:var(--bone); letter-spacing:-.004em;
}
.card p{ color:var(--t-2); font-size:14px; line-height:1.64; }

/* ── talk ─────────────────────────────────────────────────────────────── */
.talk{ text-align:center; }
.talk-mark{ height:40px; width:auto; margin:0 auto 30px; }
.talk h2{ max-width:19ch; margin-inline:auto; }
.talk p{ max-width:50ch; margin:22px auto 0; color:var(--t-2); font-size:15px; }
.wa{
  display:inline-flex; align-items:center; gap:11px; margin-top:38px;
  padding:16px 28px; border-radius:2px; background:var(--bone); color:var(--ink);
  font-weight:600; font-size:14px; letter-spacing:.02em;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.wa svg{ width:20px; height:20px; fill:currentColor; }
.wa:hover{ background:var(--brass-hi); transform:translateY(-2px); }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:32px var(--gut) 44px; border-top:1px solid rgba(168,135,92,.18);
  max-width:var(--maxw); margin:0 auto;
}
.foot p{ font-size:12px; color:var(--t-3); letter-spacing:.05em; }
.foot a:hover{ color:var(--brass-hi); }

/* ── lightbox ─────────────────────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:clamp(16px,4vw,54px); background:rgba(12,11,10,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lb[hidden]{ display:none; }
.lb-stage{
  max-width:min(940px,100%); max-height:78svh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-radius:2px; box-shadow: var(--glass-edge), 0 40px 90px rgba(0,0,0,.6);
}
.lb-stage img,.lb-stage video{ max-height:78svh; width:auto; object-fit:contain; }
.lb-cap{
  margin-top:20px; max-width:60ch; text-align:center; color:var(--t-2);
  font-size:14px; line-height:1.62; white-space:pre-line;
}
.lb-x,.lb-prev,.lb-next{
  position:absolute; z-index:2; background:none; border:0; cursor:pointer;
  color:var(--t-2); line-height:1; padding:14px; min-width:44px; min-height:44px;
  transition:color .3s var(--ease);
}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{ color:var(--bone); }
.lb-x{ top:10px; right:14px; font-size:38px; }
.lb-prev{ left:6px; top:50%; transform:translateY(-50%); font-size:46px; }
.lb-next{ right:6px; top:50%; transform:translateY(-50%); font-size:46px; }
.lb-prev[hidden],.lb-next[hidden]{ display:none; }

/* ── reveal ───────────────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(18px); }
.rv.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }

@media (max-width:640px){
  :root{ --navh:64px; }
  .nav-links a:not(.nav-cta){ display:none; }
  .hero{ min-height:92svh; }
}

/* ── capture mode ──────────────────────────────────────────────────────
   ?shot=1 caps the hero so a tall headless window can photograph the whole
   page in one frame for design review. Never active for a real visitor. */
body.shot .hero{ min-height:640px; }
body.shot .grain{ display:none; }