/* Raes Studio — one stylesheet for all pages.
   Concept: the sheet. A hairline grid, numbered sections, and every image
   captioned like a frame on a contact sheet — the device that lets photography
   and web work sit in the same system. */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --paper:#F5F4F1;
  --paper-2:#ECEAE4;
  --ink:#17181A;
  --ink-2:#4C4E52;
  --ink-3:#6B6D71;
  --rule:#D9D6CF;
  --rule-2:#C5C1B8;
  --sel:#2F4858;           /* selenium — the one accent */
  --sel-lift:#3E5C70;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(20px,5vw,64px);
  --max:1280px;
  --band:clamp(64px,9vw,132px);   /* vertical section rhythm */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(16px,1.02vw,18px);font-weight:350;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--sel);color:var(--paper)}
:focus-visible{outline:2px solid var(--sel);outline-offset:3px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ───────────────────────────────────────────────────────────────── */
.mono,.eyebrow,.sec-n,.cap,.chip,.nav a,.tag,.btn{
  font-family:var(--mono);font-weight:400;
  font-size:.685rem;letter-spacing:.14em;text-transform:uppercase;
}
.eyebrow{color:var(--ink-3);display:block}
.d1{font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:.98;font-weight:250;letter-spacing:-.022em}
.d2{font-size:clamp(2rem,4vw,3.3rem);line-height:1.05;font-weight:280;letter-spacing:-.018em}
.d3{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.2;font-weight:320;letter-spacing:-.012em}
.lede{font-size:clamp(1.12rem,1.55vw,1.42rem);line-height:1.5;font-weight:300;color:var(--ink-2);max-width:34ch}
.it{font-style:italic}
.nb{display:none}
@media (min-width:760px){.nb{display:inline}}
.measure{max-width:60ch}
.dim{color:var(--ink-2)}

/* section head: 01 — LABEL, hairline, then the display line */
.sec{padding-block:var(--band)}
.sec + .sec{padding-top:0}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-bottom:clamp(28px,4vw,52px)}
.sec-n{color:var(--ink-3);white-space:nowrap}
.sec-head::after{content:"";display:none}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ── header ─────────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.hd.stuck{border-bottom-color:var(--rule)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
       padding-block:14px;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.lockup{display:flex;align-items:center;gap:11px;text-decoration:none;line-height:1}
.lockup .mk{width:22px;height:22px;flex:none;color:var(--ink)}
.lockup .wm{display:block}
.lockup .wm b{display:block;font-family:var(--serif);font-weight:350;font-size:1.06rem;letter-spacing:-.01em}
.lockup .wm i{display:block;font-family:var(--mono);font-style:normal;font-size:.56rem;
               letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);margin-top:1px}
.nav ul{display:flex;gap:clamp(16px,2.2vw,30px);align-items:center}
.nav a{text-decoration:none;color:var(--ink-2);position:relative;padding-block:4px;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .3s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--ink)}
.burger{display:none;width:34px;height:34px;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:1px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1px;background:var(--ink);transition:transform .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .burger{display:flex}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule)}
  .nav ul{flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gut) 22px}
  .nav a{display:block;padding-block:11px;font-size:.78rem}
  html.js .nav[hidden]{display:none}
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(46px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,48px)}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(40px,5vw,80px)}
}
.hero h1{margin-block:18px 0}
.hero-h{max-width:20ch}
.hero-side{display:flex;flex-direction:column;gap:22px;padding-bottom:6px}
.hero-grid.top{align-items:start}
.hero-grid.top .hero-side{padding-bottom:0}
.hero-fig{margin-top:clamp(36px,5vw,64px)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
           gap:22px clamp(30px,5vw,70px);margin-top:clamp(26px,3.4vw,40px)}
.hero-foot .lede{max-width:38ch;flex:1 1 24rem}

/* ── figures + captions (the contact-sheet device) ──────────────────────── */
figure{position:relative}
.ph{background:var(--paper-2);overflow:hidden;position:relative;display:block}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
a.ph:hover img,.card:hover .ph img{transform:scale(1.028)}
.cap{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;color:var(--ink-3);font-size:.62rem}
.cap b{font-weight:500;color:var(--ink-2)}
.cap span{position:relative;padding-left:14px}
.cap span::before{content:"";position:absolute;left:4px;top:.52em;width:4px;height:1px;background:var(--rule-2)}
.cap b + span::before{background:var(--rule-2)}

/* crop marks on the big frames */
.crop{position:relative}
.crop::before,.crop::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;z-index:2}
.crop::before{top:-1px;left:-1px;border-top:1px solid var(--paper);border-left:1px solid var(--paper);opacity:.7}
.crop::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--paper);border-right:1px solid var(--paper);opacity:.7}

/* ── facts strip ────────────────────────────────────────────────────────── */
.facts{border-block:1px solid var(--rule);margin-top:clamp(40px,6vw,80px)}
.facts ul{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.facts ul{grid-template-columns:repeat(4,1fr)}}
.facts li{padding:22px 0 24px;border-right:1px solid var(--rule)}
.facts li:nth-child(2n){padding-left:18px}
@media (min-width:760px){
  .facts li{padding-left:22px}
  .facts li:first-child{padding-left:0}
  .facts li:last-child{border-right:0}
}
@media (max-width:759px){
  .facts li:nth-child(2n){border-right:0}
  .facts li:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
.facts .k{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.facts .v{display:block;font-size:clamp(1.1rem,1.7vw,1.45rem);font-weight:300;margin-top:7px;letter-spacing:-.01em}

/* ── two-discipline cards ───────────────────────────────────────────────── */
.duo{display:grid;gap:clamp(30px,4vw,54px)}
@media (min-width:840px){.duo{grid-template-columns:1fr 1fr}}
.card{display:flex;flex-direction:column;text-decoration:none}
.card .ph{aspect-ratio:4/5}
.card h3{margin-top:20px}
.card .card-l{margin-top:10px;color:var(--ink-2);max-width:38ch}
.card ul{margin-top:18px;border-top:1px solid var(--rule)}
.card li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:.92rem;color:var(--ink-2);
         display:flex;justify-content:space-between;gap:16px}
.card li em{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
            text-transform:uppercase;color:var(--ink-3);white-space:nowrap;padding-top:.3em}
.more{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
      font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.more::after{content:"";width:22px;height:1px;background:var(--ink);transition:width .3s var(--ease)}
.card:hover .more::after,a:hover > .more::after,.more:hover::after{width:36px}

/* ── numbered lists: kinds / steps ──────────────────────────────────────── */
.kinds{display:grid;gap:0;border-top:1px solid var(--rule)}
.kind{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--rule)}
@media (min-width:820px){
  .kind{grid-template-columns:56px minmax(0,15rem) minmax(0,1fr) auto;align-items:baseline;gap:24px}
}
.kind-i{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--ink-3)}
.kind h3{font-size:clamp(1.08rem,1.5vw,1.3rem);font-weight:340;letter-spacing:-.01em}
.kind p{color:var(--ink-2);font-size:.95rem;max-width:52ch}
.kind .tag{color:var(--ink-3);font-size:.6rem;white-space:nowrap}
@media (max-width:819px){
  .kind{grid-template-columns:auto 1fr}
  .kind h3{grid-column:2}
  .kind p,.kind .tag{grid-column:2;margin-top:-4px}
  .kind .tag{margin-top:6px;display:block}
}

.steps{display:grid;gap:clamp(24px,3vw,34px);counter-reset:s}
@media (min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.steps.four{grid-template-columns:repeat(4,1fr)}.steps.five{grid-template-columns:repeat(5,1fr)}}
.step{border-top:1px solid var(--ink);padding-top:14px}
.step .n{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;color:var(--ink-3)}
.step h3{margin-top:10px;font-size:1.06rem;font-weight:360;letter-spacing:-.005em}
.step p{margin-top:7px;font-size:.92rem;color:var(--ink-2)}

/* ── frame grid (photography) ───────────────────────────────────────────── */
/* contact-sheet masonry: columns never leave holes, whatever the ratios */
.frames{columns:2;column-gap:clamp(14px,2.2vw,30px)}
@media (min-width:900px){.frames{columns:3}}
.frames figure{break-inside:avoid;-webkit-column-break-inside:avoid;
               margin-bottom:clamp(14px,2.2vw,30px);display:inline-block;width:100%}
.frames figure .ph{aspect-ratio:4/5}
.frames figure.sq .ph{aspect-ratio:1/1}
.frames figure.wide .ph{aspect-ratio:4/3}

/* ── work grid + filters ────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:58px;z-index:40;
       background:var(--paper);padding-block:14px;margin-bottom:8px}
.chip{border:1px solid var(--rule-2);border-radius:999px;padding:7px 15px;color:var(--ink-2);
      transition:all .2s;font-size:.62rem}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.grid-w{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,34px) clamp(14px,2.2vw,30px)}
@media (min-width:920px){.grid-w{grid-template-columns:repeat(3,1fr)}}
.w-item .ph{aspect-ratio:4/5}
.w-item.tall .ph{aspect-ratio:3/4}
.w-item.wide .ph{aspect-ratio:4/3}
.w-item h3{margin-top:14px;font-size:1.04rem;font-weight:350;letter-spacing:-.005em}
.w-item .note{margin-top:5px;font-size:.9rem;color:var(--ink-2)}
.w-item[hidden]{display:none}

/* ── browser mockups (web work, drawn in CSS — no fake screenshots) ─────── */
.mocks{display:grid;gap:clamp(20px,3vw,38px)}
@media (min-width:860px){.mocks{grid-template-columns:repeat(3,1fr)}}
.mock{background:#fff;border:1px solid var(--rule);box-shadow:0 1px 0 var(--rule)}
.mock .bar{display:flex;align-items:center;gap:5px;padding:9px 11px;border-bottom:1px solid var(--rule)}
.mock .bar i{width:6px;height:6px;border-radius:50%;background:var(--rule-2);display:block}
.mock .bar u{flex:1;margin-left:8px;height:12px;background:var(--paper-2);border-radius:2px;
             text-decoration:none;font-family:var(--mono);font-size:.5rem;color:var(--ink-3);
             display:flex;align-items:center;padding-left:6px;letter-spacing:.06em}
.mock .body{padding:16px;display:grid;gap:8px}
.mock .l{height:7px;background:var(--paper-2)}
.mock .l.d{background:var(--ink);opacity:.82}
.mock .l.w60{width:60%}.mock .l.w40{width:40%}.mock .l.w80{width:80%}.mock .l.w30{width:30%}
.mock .blk{height:74px;background:var(--paper-2)}
.mock .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.mock .row .blk{height:38px}
.mock .tallblk{height:110px;background:var(--paper-2)}

/* ── pricing tiers ──────────────────────────────────────────────────────── */
.tiers{display:grid;gap:clamp(22px,3vw,36px)}
@media (min-width:800px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{border-top:1px solid var(--ink);padding-top:16px;display:flex;flex-direction:column}
.tier .t-n{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tier h3{margin-top:10px;font-size:1.22rem;font-weight:340}
.tier .price{margin-top:6px;font-size:1.5rem;font-weight:280;letter-spacing:-.02em}
.tier .price small{font-size:.62rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-left:7px}
.tier p{margin-top:10px;font-size:.92rem;color:var(--ink-2)}
.tier ul{margin-top:14px;border-top:1px solid var(--rule)}
.tier li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:.88rem;color:var(--ink-2)}

/* ── spec list ──────────────────────────────────────────────────────────── */
.spec{border-top:1px solid var(--rule)}
.spec > div{display:grid;grid-template-columns:1fr;gap:2px 24px;padding:13px 0;border-bottom:1px solid var(--rule)}
@media (min-width:640px){.spec > div{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:24px}}
.spec dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding-top:.3em}
.spec dd{font-size:.95rem;color:var(--ink-2)}

/* ── quote ──────────────────────────────────────────────────────────────── */
.quote{background:var(--paper-2);padding-block:clamp(46px,6vw,78px)}
.quote blockquote{font-size:clamp(1.3rem,2.4vw,1.95rem);font-weight:280;line-height:1.34;
                  letter-spacing:-.014em;max-width:26ch}
.quote .by{margin-top:20px;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
           text-transform:uppercase;color:var(--ink-3)}

/* ── dark CTA band ──────────────────────────────────────────────────────── */
.cta{background:var(--ink);color:var(--paper);padding-block:clamp(56px,7vw,104px)}
.cta .d2{font-weight:250}
.cta p{color:#A9ABAE;margin-top:16px;max-width:44ch}
.cta .btn{margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:11px;border:1px solid currentColor;
     padding:13px 22px;text-decoration:none;transition:background .25s,color .25s}
.btn::after{content:"→";font-family:var(--serif);letter-spacing:0}
.cta .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.dark:hover{background:var(--ink);color:var(--paper)}

/* ── form ───────────────────────────────────────────────────────────────── */
.form{display:grid;gap:20px}
@media (min-width:720px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.f label{display:block;font-family:var(--mono);font-size:.61rem;letter-spacing:.14em;
         text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.f input,.f select,.f textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-2);
  padding:9px 0;font-family:var(--serif);font-size:1rem;color:var(--ink);border-radius:0;
}
.f select{font-family:var(--serif);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px),calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:24px}
.f textarea{resize:vertical;min-height:118px}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--ink)}
.f-note{font-size:.82rem;color:var(--ink-3);margin-top:4px}
.f-ok{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sel)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--rule);padding-top:clamp(40px,5vw,64px);padding-bottom:34px;margin-top:var(--band)}
.ft-in{display:grid;gap:34px}
@media (min-width:820px){.ft-in{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.ft h3{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.ft li{padding:5px 0;font-size:.93rem}
.ft a{color:var(--ink-2);text-decoration:none;transition:color .2s}
.ft a:hover{color:var(--ink)}
.ft .blurb{font-size:.95rem;color:var(--ink-2);max-width:34ch;margin-top:16px}
.ft-btm{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
        border-top:1px solid var(--rule);margin-top:clamp(34px,4vw,54px);padding-top:18px;
        font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.ft-btm a{color:var(--ink-3)}

/* ── page heads (inner pages) ───────────────────────────────────────────── */
.phead{padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(28px,4vw,48px)}
.phead h1{margin-top:16px;max-width:18ch}
.phead .lede{margin-top:20px}
.phead-fig{margin-top:clamp(26px,4vw,46px)}
.phead-fig .ph{aspect-ratio:21/9}
@media (max-width:640px){.phead-fig .ph{aspect-ratio:4/3}}

/* ── link with underline sweep ──────────────────────────────────────────── */
.ul{color:var(--sel);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
    background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size .3s var(--ease)}
.ul:hover{background-size:0% 1px}

/* ── motion ─────────────────────────────────────────────────────────────── */
html.js .rv{opacity:0;transform:translateY(16px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.in.dl1{transition-delay:.07s}
html.js .rv.in.dl2{transition-delay:.14s}
html.js .rv.in.dl3{transition-delay:.21s}
html.js .hero .rv{transform:translateY(22px)}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1!important;transform:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ph img{transition:none}
}