/* Fourteen Months Hospitality — Graphite
   Layout: full-bleed bands, one measured column, hairline rules, the dial recurring small. */

:root{
  --ink:#1B1D20;
  --terra:#BE3F26;
  --terra-dim:#9A3420;
  --paper:#F1F0EC;
  --paper-2:#ECEBE7;
  --rule:#D6D4CE;
  --rule-dk:#36383B;
  --muted:#74726B;
  --dim:#9C9A93;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:max(20px,env(safe-area-inset-left,0px));
  --gut-r:max(20px,env(safe-area-inset-right,0px));
  --max:1220px;
  --head-h:76px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:clamp(16px,1.05vw,17.5px); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- bands & rhythm ---------- */
/* overflow:clip, not hidden — hidden would make this a scroll container and kill
   the sticky headings below. clip crops the watermark without that side effect. */
.band{width:100%;position:relative;overflow:hidden;overflow:clip}
.watermark{
  position:absolute;pointer-events:none;z-index:0;
  right:-16%;top:50%;transform:translateY(-50%);
  width:min(23vw,310px);height:auto;opacity:.05;color:var(--ink);
}
.band--dark .watermark{opacity:.09;color:var(--paper)}
.wrap{position:relative;z-index:1}
@media(max-width:820px){.watermark{right:-26%;width:52vw;opacity:.045}}
.band--dark{background:var(--ink);color:var(--paper)}
.band--alt{background:var(--paper-2)}
.wrap{
  max-width:var(--max); margin-inline:auto;
  padding-left:var(--gut); padding-right:var(--gut-r);
  padding-block:clamp(2.9rem,5.4vw,5rem);
}
.wrap--tight{padding-block:clamp(2rem,3.4vw,3rem)}
.stack{display:flex;flex-direction:column;gap:clamp(1.6rem,2.6vw,2.2rem)}
.head{display:flex;flex-direction:column;gap:1rem}
.head__dial{margin-top:clamp(1.4rem,2.8vw,2.2rem);display:flex;align-items:center;
  gap:clamp(1.1rem,2vw,1.8rem)}
.head__dial svg{flex:none;width:clamp(104px,11vw,142px);height:auto;margin-left:-.9rem}
.head__dial-cap{
  font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);max-width:21ch;line-height:2;margin:0;
  border-left:1px solid var(--rule);padding-left:1rem;
}
/* statement left, argument right — keeps long prose off a lonely single column */
.split{display:grid;gap:clamp(1.8rem,3vw,2.6rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(3rem,6vw,5rem)}
  /* the statement holds its position while the argument scrolls past it — the void
     under a short heading becomes the point rather than an accident */
  .split > .head{position:sticky;top:calc(var(--head-h) + 2.6rem)}
}
.split .prose{max-width:56ch}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.1;letter-spacing:-.005em}
h2{font-size:clamp(1.8rem,3.7vw,2.8rem);line-height:1.14}
h3{font-size:clamp(1.28rem,2.1vw,1.68rem);line-height:1.2}
h4{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.25}
p{margin:0}
.eyebrow{
  font-family:var(--mono);font-size:.70rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--terra);margin:0;
}
.lede{font-size:clamp(1.05rem,1.45vw,1.22rem);line-height:1.55;max-width:38ch}
.prose{display:flex;flex-direction:column;gap:1.1rem;max-width:62ch}
.prose p{color:var(--muted)}
.band--dark .prose p,.band--dark .body{color:var(--dim)}
.body{color:var(--muted);max-width:46ch}
.note{font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--muted);margin:0}
.band--dark .note{color:var(--dim)}
.credit{
  font-family:var(--mono);font-size:.70rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin:.75rem 0 0;
}

/* hairline that draws in from the left */
.rule{height:1px;background:var(--rule);border:0;margin:0;transform-origin:left center}
.band--dark .rule{background:var(--rule-dk)}
.js .rule[data-anim]{transform:scaleX(0)}
.js .rule[data-anim].in{transform:scaleX(1);transition:transform .85s cubic-bezier(.22,.61,.36,1)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:var(--ink);color:var(--paper);
  border-bottom:1px solid var(--rule-dk);
}
body::before{
  content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
  z-index:41;background:var(--ink);
}
.head-in{
  max-width:var(--max);margin-inline:auto;
  padding-left:var(--gut);padding-right:var(--gut-r);
  height:var(--head-h);display:flex;align-items:center;gap:1.25rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;min-width:0}
.brand svg{width:44px;height:44px;flex:0 0 auto}
.gauge-track{opacity:.55}
.gauge-fill{stroke-dasharray:var(--gauge-len,210);stroke-dashoffset:var(--gauge-len,210)}
.gauge-cap{opacity:0;transition:opacity .3s ease}
.gauge-cap.on{opacity:1}
.brand b{
  font-family:var(--mono);font-weight:400;font-size:.86rem;letter-spacing:.17em;
  color:var(--paper);white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding-block:.35rem;
  border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:var(--paper)}
.nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--terra)}
@media(max-width:720px){.nav{gap:1rem}.nav a{font-size:.67rem;letter-spacing:.1em}.brand b{display:none}}
@media(max-width:420px){.nav .nav-hide{display:none}}

.btn{
  display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  padding:.72rem 1.15rem;background:var(--terra);color:#fff;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--terra-dim)}
.btn--ghost{background:transparent;color:var(--paper);border:1px solid var(--rule-dk)}
.btn--ghost:hover{background:transparent;border-color:var(--terra);color:var(--terra)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--terra)}
@media(max-width:560px){.site-head .btn{padding:.6rem .8rem;font-size:.66rem}}

/* ---------- page hero ---------- */
.phero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.phero .wrap{padding-block:clamp(3rem,7vw,5.5rem)}
.phero h1{color:var(--paper);max-width:19ch}
.phero .lede{color:var(--dim);margin-top:1.5rem}

/* home hero: split */
.hero{display:grid;grid-template-columns:1fr;background:var(--ink);color:var(--paper)}
@media(min-width:900px){.hero{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}}
.hero__text{
  padding-left:var(--gut);padding-right:var(--gut-r);
  padding-block:clamp(2.75rem,5.5vw,5rem);
  display:flex;flex-direction:column;gap:clamp(1.9rem,3.6vw,3rem);justify-content:space-between;
}
@media(min-width:900px){
  .hero__text{padding-left:max(2.5rem,calc((100vw - var(--max))/2 + 20px))}
}
.lockup{display:flex;align-items:center;gap:1.1rem}
.lockup svg{flex:0 0 auto;width:clamp(50px,5.6vw,62px);height:auto}
.lockup__bar{width:2px;align-self:stretch;background:var(--terra);margin-block:.2rem}
.lockup__name{
  font-family:var(--mono);font-size:clamp(1rem,1.9vw,1.36rem);
  letter-spacing:.17em;line-height:1.25;color:var(--paper);display:block;
}
.lockup__sub{
  font-family:var(--mono);font-size:clamp(.55rem,.95vw,.70rem);
  letter-spacing:.6em;color:var(--dim);margin-top:.3rem;display:block;
}
.hero h1{color:var(--paper);max-width:19ch}
.hero__tag{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--terra);margin:0 0 1.3rem;
}
.hero__by{font-family:var(--mono);font-size:.78rem;color:var(--dim);letter-spacing:.04em}
.hero__img{position:relative;min-height:clamp(230px,40vw,100%)}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}

/* ---------- grids ---------- */
.cols{display:grid;gap:clamp(1.9rem,3.2vw,3rem);grid-template-columns:1fr}
@media(min-width:720px){.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:860px){.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:720px){.cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.col{min-width:0;display:flex;flex-direction:column;gap:.65rem}
.col__num{font-family:var(--mono);font-size:.84rem;letter-spacing:.14em;color:var(--terra)}
.col__top{height:2px;background:var(--terra);margin-bottom:.3rem;transform-origin:left center}
.js .col__top[data-anim]{transform:scaleX(0)}
.js .col__top[data-anim].in{transform:scaleX(1);transition:transform .8s cubic-bezier(.22,.61,.36,1)}

/* ---------- alternating service rows ---------- */
.row{display:grid;gap:clamp(1.75rem,3.5vw,3.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:880px){
  .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row--flip .row__media{order:2}
}
.row__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.row__body{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.row__num{font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;color:var(--terra)}
.row__name{font-family:var(--serif);font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.02;margin:-.15rem 0 .2rem}
.row__lede{
  font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.6rem);
  line-height:1.22;color:var(--ink);max-width:24ch;margin-bottom:.3rem;
}
.ticks{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.ticks li{position:relative;padding-left:1.35rem;color:var(--muted);font-size:.96rem;line-height:1.45}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:.6rem;height:1px;background:var(--terra);
}

/* ---------- deliverable lists ---------- */
.deliv{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.deliv li{font-size:.94rem;line-height:1.42}

/* a card marks a thing you receive; prose never gets one */
.card{
  background:var(--paper);border:1px solid var(--rule);
  padding:clamp(1.35rem,2.1vw,1.85rem);display:flex;flex-direction:column;gap:.6rem;
  min-width:0;transition:border-color .25s ease;
}
.band--alt .card{background:#F6F5F2}
.band--dark .card{background:#212329;border-color:var(--rule-dk)}
.card:hover{border-color:var(--terra)}

/* ---------- numbers ---------- */
.stat{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.stat__fig{
  font-family:var(--serif);font-size:clamp(3.4rem,7.6vw,6.2rem);line-height:.92;
  color:var(--terra);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat__lab{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:.9rem;
}
.band--dark .stat__lab{color:var(--dim)}
.stat__body{font-size:.94rem;line-height:1.5;margin-top:.65rem;max-width:30ch;color:var(--muted)}
.band--dark .stat__body{color:var(--paper)}

/* ---------- sequence ---------- */
.step{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.step__dot{display:flex;align-items:center;gap:.6rem}
.step__dot i{width:9px;height:9px;background:var(--terra);flex:0 0 auto}
.step__dot span{flex:1;height:1px;background:var(--rule);transform-origin:left center}
.js .step__dot span[data-anim]{transform:scaleX(0)}
.js .step__dot span[data-anim].in{transform:scaleX(1);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.step__when{font-family:var(--mono);font-size:.70rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- pairs & figures ---------- */
.pair{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:720px){.pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pair img{width:100%;aspect-ratio:3/1;object-fit:cover}
.figure img{width:100%;aspect-ratio:21/9;object-fit:cover}

/* ---------- projects (Work) ---------- */
.proj{display:grid;gap:.6rem 2.5rem;grid-template-columns:1fr;padding-block:clamp(1.5rem,2.6vw,2.1rem);border-top:1px solid var(--rule)}
/* two columns: the figures drop under the body rather than under the name */
@media(min-width:760px){
  .proj{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
  .proj__figs{grid-column:2}
}
/* the numbers move out to a rail of their own, which fills the column that was
   sitting empty on the right and lets the figures read as a scannable column */
@media(min-width:1040px){
  .proj{grid-template-columns:minmax(0,14rem) minmax(0,1fr) minmax(0,11rem)}
  .proj__figs{grid-column:3;flex-direction:column;gap:.45rem;margin-top:.15rem;
    border-left:1px solid var(--rule);padding-left:1.1rem}
}
.proj__name{font-family:var(--serif);font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.15}
.proj__meta{font-family:var(--mono);font-size:.70rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin-top:.45rem}
.proj__body{color:var(--muted);max-width:58ch}
.proj__figs{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;margin-top:.7rem}
.proj__fig{font-family:var(--mono);font-size:.76rem;color:var(--ink);letter-spacing:.02em}
.proj__fig b{color:var(--terra);font-weight:400}

/* ---------- bios ---------- */
.bio{display:grid;gap:1.6rem;grid-template-columns:1fr;min-width:0}
@media(min-width:620px){.bio{grid-template-columns:200px minmax(0,1fr);gap:2.4rem}}
.bio__photo{width:100%;max-width:220px;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1)}
.bio__role{font-family:var(--mono);font-size:.73rem;letter-spacing:.09em;color:var(--terra);margin:.45rem 0 1rem;line-height:1.55}
.bio__prose{display:flex;flex-direction:column;gap:.9rem;max-width:66ch}
.bio__prose p{color:var(--muted);font-size:.96rem;line-height:1.62}

.pullquote{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.26rem,2.4vw,1.85rem);
  line-height:1.34;color:var(--ink);max-width:48ch;text-wrap:balance;margin:0;
}
.band--dark .pullquote{color:var(--paper)}

/* ---------- contact ---------- */
.mail{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem}
.mail a{
  font-family:var(--mono);font-size:clamp(.9rem,1.5vw,1.04rem);
  color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule-dk);
  padding-bottom:.18rem;transition:border-color .18s ease,color .18s ease;
}
.mail a:hover{color:var(--terra);border-color:var(--terra)}

/* ---------- cta strip ---------- */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2.5rem;justify-content:space-between}
.cta h2{max-width:22ch}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--paper);border-top:1px solid var(--rule-dk)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}}
.foot-grid h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 .9rem;font-weight:400}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.foot-grid a{font-size:.9rem;color:var(--paper);text-decoration:none;transition:color .18s ease}
.foot-grid a:hover{color:var(--terra)}
.foot-base{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;justify-content:space-between;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule-dk)}
.foot-base span{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--dim)}
.foot-base .tag{color:var(--terra)}

/* ---------- motion ---------- */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--terra);outline-offset:4px}
.js [data-rise]{opacity:0;transform:translateY(14px)}
.js [data-rise].in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js [data-wipe]{clip-path:inset(0 100% 0 0)}
.js [data-wipe].in{clip-path:inset(0 0 0 0);transition:clip-path 1.15s cubic-bezier(.65,0,.35,1)}

/* the dial arc draws itself */
.dial-arc{stroke-dasharray:var(--arc-len,250);stroke-dashoffset:0}
.js .dial-arc[data-draw]{stroke-dashoffset:var(--arc-len,250)}
.js .dial-arc[data-draw].in{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.33,.9,.4,1)}
.js .dial-tick[data-draw]{opacity:0}
.js .dial-tick[data-draw].in{opacity:1;transition:opacity .4s ease .9s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rise],.js [data-wipe],.js .rule[data-anim],.js .col__top[data-anim],
  .js .step__dot span[data-anim],.js .dial-arc[data-draw],.js .dial-tick[data-draw]{
    opacity:1!important;transform:none!important;clip-path:none!important;
    stroke-dashoffset:0!important;transition:none!important
  }
  .gauge-fill{stroke-dashoffset:0!important}
  .gauge-cap{opacity:1!important}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}