/* TAMAT — website styles, following Brand Guidelines v1.9.
   Fonts: Instrument Sans (headlines) + IBM Plex Mono (text, data), Regular and Bold only.
   Colour: Paper ground. Moss is the identity, Orange is the single accent per view.
   Two colourways (switched on the landing page): Moss + orange highlight, Orange + sage highlight.
   Motion: one moment per navigation — the page crossfades, the logo or the project photo
   travels between pages (View Transitions); grid photos open once as they scroll in. */

@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#FBFAF5; --ink:#24231A; --graphite:#5F5D56; --rule:#dcd9c9;
  --moss:#68724D; --sage:#B1B6A1; --orange:#C47A4A; --sand:#DFBA9F;
  --orange-text:#9A5A30; /* functional: small text on Paper */
  --well:#efeee6;        /* image placeholder while loading */
  --id:var(--moss); --id-shadow:var(--sage); --hl:var(--orange); --next:var(--orange);
  --sans:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px);
  --head:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
:root[data-way="orange"]{--id:var(--orange); --id-shadow:var(--sand); --hl:var(--sage); --next:var(--moss)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{padding-inline:max(var(--gutter),env(safe-area-inset-left,0px));max-width:1440px;margin-inline:auto}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:var(--paper);padding:8px 12px;text-decoration:none}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── page transitions ───────────────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .38s var(--ease) both}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:var(--ease)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
.top{view-transition-name:top}
.top .mark img,.logo-stage svg{view-transition-name:logo}

/* ── header ─────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:clamp(12px,3vw,28px);min-height:var(--head);padding-top:env(safe-area-inset-top,0px)}
.top .mark{width:88px;flex:none;display:block} /* logo minimum: 80 px */
.top nav{display:flex;gap:clamp(14px,2.4vw,28px);margin-left:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.top nav a{text-decoration:none;color:var(--graphite);padding-block:6px;border-bottom:1px solid transparent}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.lang-one{font-size:11px;letter-spacing:.08em;text-decoration:none;color:var(--graphite);border:1px solid var(--rule);padding:4px 8px}
.lang-one:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:420px){
  .top .mark{width:80px}
  .top nav{font-size:10.5px;letter-spacing:.08em;gap:12px}
}

/* ── landing: logo only, one screen, no scroll ──────── */
body.landing{height:100svh;overflow:hidden}
.splash{position:relative;height:100svh;display:grid;grid-template-rows:auto 1fr auto auto;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 22px)}
.splash .corner{display:flex;justify-content:flex-end}
.splash .center{display:flex;align-items:center;justify-content:center}
.lang{display:flex;border:1px solid var(--rule);font-size:11px;letter-spacing:.08em}
.lang a,.lang span{padding:4px 9px;text-decoration:none;color:var(--graphite)}
.lang a:hover{color:var(--ink)}
.lang [aria-current]{background:var(--ink);color:var(--paper)}
.logo-stage{all:unset;display:block;position:relative;width:min(620px,70vw);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.logo-stage svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 80%}
.logo-stage .sh{fill:var(--id-shadow);transform:translate(var(--sx,0px),calc(88px + var(--sy,0px)))}
.logo-stage .lt{fill:var(--id)}
.logo-stage .sh,.logo-stage .lt{transition:fill .45s ease}
.logo-stage.pop svg{animation:pop .55s cubic-bezier(.3,1.5,.5,1)}
.logo-stage:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
@keyframes pop{0%{transform:scale(1,1)}25%{transform:scale(1.04,.9)}55%{transform:scale(.98,1.05)}100%{transform:scale(1,1)}}
/* the shadow only exists from 400 px wide; smaller, the logo goes flat */
@media (max-width:571px){.logo-stage .sh{display:none}}
.doors{display:flex;justify-content:center;gap:clamp(20px,5vw,56px);flex-wrap:wrap;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.doors a{text-decoration:none;color:var(--ink);padding:10px 2px;border-bottom:1px solid transparent;transition:border-color .2s}
.doors a:hover,.doors a:focus-visible{border-bottom-color:var(--id)}
.splash .foot{margin:0;text-align:center;font-size:11px;color:var(--graphite)}
.way{all:unset;cursor:pointer;position:absolute;right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 26px);width:14px;height:14px;border-radius:50%;background:var(--next);transition:transform .45s cubic-bezier(.3,1.6,.5,1),background-color .45s ease}
.way:hover{transform:scale(1.35)}
.way.spin{animation:wpop .45s cubic-bezier(.3,1.6,.5,1)}
.way:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@keyframes wpop{0%{transform:scale(1)}40%{transform:scale(.6)}100%{transform:scale(1)}}
@media (max-width:560px){.way{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 24px);left:var(--gutter);right:auto}}
@media (max-height:460px){.splash{gap:8px}.logo-stage{width:min(460px,52vw)}}

/* ── page heads ─────────────────────────────────────── */
.page{padding-bottom:clamp(56px,8vw,104px)}
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-block:clamp(36px,6vw,80px) 14px;border-bottom:1px solid var(--ink)}
.pg-head h1{font-family:var(--sans);font-weight:700;font-size:clamp(44px,8.5vw,128px);line-height:.86;letter-spacing:-.03em;margin:0}
.pg-head p{margin:0;font-size:12px;color:var(--graphite);font-variant-numeric:tabular-nums;white-space:nowrap}

/* section label · Mono 700 caps, Ink rule */
.label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding-block:clamp(56px,8vw,112px) 12px;border-bottom:1px solid var(--ink);margin:0}

/* ── project grid: every project the same size ──────── */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(14px,1.6vw,22px);padding-top:clamp(20px,3vw,32px)}
@media (max-width:1000px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.projects{grid-template-columns:1fr}}
.proj{display:flex;flex-direction:column;gap:12px;min-width:0;text-decoration:none}
.ph{aspect-ratio:4/3;overflow:hidden;background:var(--well)}
.ph img{width:100%;height:100%;object-fit:cover}
.proj .ph img{transition:transform .8s var(--ease)}
.proj:hover .ph img{transform:scale(1.025)}
/* first appearance: the photo opens from the top edge, like a crate lid */
.js .rv .ph img{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease),transform .8s var(--ease)}
.js .rv.in .ph img{clip-path:inset(0 0 0 0)}

/* project sheet: Artist — Work · Year · Institution · City, Ink rule,
   scope in Graphite, collaborations in Orange text */
.sheet{display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.sheet .line{margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.sheet .line b{display:block;font-family:var(--sans);font-size:clamp(16px,1.4vw,18px);font-weight:700;line-height:1.2;margin-bottom:3px}
.sheet .line span{display:block;font-variant-numeric:tabular-nums}
.sheet .scope{color:var(--graphite)}
.collab{color:var(--orange-text)}
.proj:hover .sheet .line b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ── studio ─────────────────────────────────────────── */
.intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;padding-top:clamp(40px,7vw,104px)}
.claim{font-family:var(--sans);font-weight:700;font-size:clamp(34px,5.6vw,84px);line-height:1;letter-spacing:-.025em;margin:0;text-wrap:balance}
.hl{position:relative;z-index:0}
.hl::before{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.3em;background:var(--hl);z-index:-1}
.lede{margin:0;max-width:44ch;font-size:15px}
@media (max-width:820px){.intro{grid-template-columns:1fr}}

/* services: a formal spec sheet — one row per service, title left, description right, Ink rules */
.svc{list-style:none;margin:0;padding:0}
.svc li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px clamp(24px,5vw,72px);align-items:baseline;padding-block:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--rule)}
.svc li:last-child{border-bottom-color:var(--ink)}
.svc h3{font-family:var(--sans);font-weight:400;font-size:clamp(24px,2.8vw,40px);line-height:1.05;letter-spacing:-.015em;margin:0;transition:color .25s}
.svc p{margin:0;font-size:13px;color:var(--graphite);max-width:46ch}
.svc li:hover h3{color:var(--moss)}
@media (max-width:640px){.svc li{grid-template-columns:1fr}}

.clients{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding-block:clamp(40px,6vw,80px) 0}
.clients .lead{font-size:12px;color:var(--graphite);margin:0}
.who{margin:0;font-family:var(--sans);font-size:clamp(21px,2.6vw,36px);font-weight:400;line-height:1.7;max-width:36ch;text-wrap:balance}
.who .n{white-space:nowrap}
.who .w{display:inline-block;padding:0 .08em;background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 86%/0% .34em;transition:background-size .35s ease,transform .35s cubic-bezier(.3,1.6,.5,1)}
.who .n:nth-child(odd) .w:hover,.who .n:nth-child(odd) .w.on{transform:translateY(-4px) rotate(-1.5deg)}
.who .n:nth-child(even) .w:hover,.who .n:nth-child(even) .w.on{transform:translateY(-4px) rotate(1.5deg)}
.who .w:hover,.who .w.on{background-size:100% .34em}

/* ── project page ───────────────────────────────────── */
.back{display:inline-block;margin-top:clamp(24px,4vw,44px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--graphite)}
.back:hover{color:var(--ink)}
.p-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px clamp(24px,5vw,72px);align-items:end;padding-block:clamp(18px,3vw,32px) clamp(20px,3vw,32px)}
.p-head h1{font-family:var(--sans);font-weight:700;font-size:clamp(38px,6vw,88px);line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance}
.p-head h1 .artist{display:block;font-weight:400;font-size:max(17px,.3em);letter-spacing:0;margin-bottom:.35em}
.p-meta{display:grid;gap:4px}
.p-meta p{margin:0}
.p-meta .line{padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--ink)}
.p-meta .scope{color:var(--graphite)}
@media (max-width:760px){.p-head{grid-template-columns:1fr}}
.p-lead{margin:0}
.p-lead .ph{aspect-ratio:3/2}
.p-cap{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--graphite);padding-top:8px}
.p-cap b{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.p-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);padding-top:clamp(32px,5vw,64px)}
.p-text{grid-column:2;max-width:62ch;font-size:15px}
.p-text p{margin:0 0 1em}
@media (max-width:760px){.p-body{grid-template-columns:1fr}.p-text{grid-column:1}}
.p-src{margin:20px 0 0;padding-top:10px;border-top:1px solid var(--rule);font-size:12px;color:var(--graphite)}
.p-src b{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px;margin-right:8px;color:var(--ink)}
.p-src a{color:var(--orange-text);text-underline-offset:3px}
.p-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(32px,5vw,64px)}
.p-more figure{margin:0}
@media (max-width:560px){.p-more{grid-template-columns:1fr}}
.p-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid var(--ink);margin-top:clamp(56px,8vw,104px);padding-top:14px}
.p-nav a{text-decoration:none;display:flex;flex-direction:column;gap:4px;min-width:0}
.p-nav a span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.p-nav a b{font-family:var(--sans);font-size:clamp(16px,2vw,24px);font-weight:400;line-height:1.2}
.p-nav a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.p-nav .nx{text-align:right;align-items:flex-end}

/* ── 404 ────────────────────────────────────────────── */
.nf{min-height:50svh;display:flex;flex-direction:column;justify-content:center;gap:16px}
.nf h1{font-family:var(--sans);font-size:clamp(34px,5vw,64px);margin:0}
.nf p{margin:0;color:var(--graphite)}

/* ── contact band: Moss with Paper (Moss pairs with white) ── */
.contact{background:var(--moss);color:var(--paper);padding-bottom:env(safe-area-inset-bottom,0px)}
.contact .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 48px;padding-block:clamp(64px,9vw,128px)}
.contact h2{font-family:var(--sans);font-weight:700;font-size:clamp(22px,2.4vw,34px);line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance}
.mail{display:inline-flex;align-items:center;background:var(--paper);color:var(--moss);text-decoration:none;font-family:var(--sans);font-weight:700;font-size:15px;padding:12px 22px;transition:background-color .2s,color .2s}
.mail:hover{background:var(--ink);color:var(--paper)}
.contact :focus-visible{outline-color:var(--paper)}
.contact footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding-block:16px 20px;font-size:11px;letter-spacing:.06em;border-top:1px solid color-mix(in srgb,var(--paper) 35%,transparent)}
.contact footer img{width:88px}
.contact footer .fr{display:flex;align-items:center;gap:16px}
.contact footer .ig{display:flex;color:var(--paper);padding:4px}
.contact footer .ig svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .logo-stage.pop svg,.way.spin{animation:none}
  .js .rv .ph img{clip-path:none;transition:none}
  .proj .ph img,.way{transition:none}
  .proj:hover .ph img{transform:none}
  .who .w{transition:background-size .35s ease}
  .who .w:hover,.who .w.on{transform:none!important}
}