/* Shared by the inner pages (/kairos/, /obcrew/, /press/, 404). The home page keeps its own styles. */
:root{
  --paper:#FEFDF8; --light:#FFFFFF; --well:#FBFAF5; --ink:#141414;
  --text:#3A3936; --muted:#6B6A66; --faint:#8A8883; --rule:#E8E6DF; --press:#F6F5F0;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
body{margin:0;background:var(--paper);color:var(--text);font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;font-weight:300}
html{scroll-behavior:smooth}
.page{max-width:1200px;margin:0 auto;padding:0 clamp(20px,6vw,96px)}
a{color:var(--text)}
a:focus-visible,button:focus-visible{outline:1px solid var(--faint);outline-offset:4px}
/* links press into the paper on hover, as on the home page */
a.press{display:inline-block;text-decoration:none;transition:color .6s var(--ease),text-shadow .6s var(--ease),transform .6s var(--ease)}
a.press:hover,a.press:focus-visible{transform:translateY(1px);color:#7A7873;text-shadow:1px 1px 0 var(--light),-0.5px -0.5px 0 rgba(20,18,12,0.45)}
a.deb:hover,a.deb:focus-visible{color:var(--press);text-shadow:2px 2px 0 var(--light),-1.5px -1.5px 0 rgba(20,18,12,0.42)}

.wm{font-family:'IBM Plex Mono',monospace;font-weight:100;letter-spacing:-0.02em;line-height:1;white-space:nowrap}
.wm-r{font-family:'Raleway',sans-serif;letter-spacing:0}
.wm-j{font-family:'Josefin Sans',sans-serif;font-size:1.36em;letter-spacing:0;line-height:0}
.deb{color:var(--press);text-shadow:1px 1px 0 var(--light),-1px -1px 0 rgba(20,18,12,0.30)}
.deb-xl{color:var(--press);text-shadow:1.5px 1.5px 0 var(--light),-1px -1px 0 rgba(20,18,12,0.28)}
.label{font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);font-weight:300}
.small{font-size:12px;letter-spacing:0.08em;line-height:1.7;color:var(--faint)}

.object{background:var(--paper);transform:rotate(-9deg);box-shadow:-14px -14px 34px var(--light),24px 32px 60px rgba(20,18,12,0.10),6px 8px 16px rgba(20,18,12,0.06)}
.plate{background:var(--paper);box-shadow:-10px -10px 26px var(--light),16px 22px 46px rgba(20,18,12,0.08),3px 4px 8px rgba(20,18,12,0.04)}
.well{background:var(--well);transform:rotate(-9deg);box-shadow:inset 8px 10px 20px rgba(20,18,12,0.09),inset -8px -8px 20px var(--light)}

/* header and footer, as on the home page */
.head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:36px 0}
.head .wm{font-size:24px;text-decoration:none}
.head nav{display:flex;gap:clamp(8px,2vw,28px);font-size:13px;letter-spacing:0.06em}
.head nav a{padding:12px 4px}
.head nav a[aria-current]{color:var(--faint)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:32px 0 40px;border-top:1px solid #EEECE6;font-size:12px;letter-spacing:0.08em;color:var(--faint)}
.foot a{color:var(--faint)}

/* a label row with a hairline, as above the work on the home page */
.rowlabel{display:flex;align-items:baseline;gap:24px}
.rowlabel .line{flex:1 1 auto;height:1px;background:var(--rule)}

/* catalogue sections: label left, content right */
.sec{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px 48px;padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--rule)}
.sec>.label{padding-top:4px}
.body{min-width:0;display:flex;flex-direction:column;gap:28px}
.body p{margin:0;max-width:64ch;font-size:16px;line-height:1.85}

dl.facts{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);margin:0;font-size:15px;line-height:1.7}
dl.facts dt,dl.facts dd{margin:0;padding:14px 0;border-bottom:1px solid var(--rule)}
dl.facts dt{color:var(--faint);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;padding-top:17px}
dl.facts dd{min-width:0;overflow-wrap:anywhere}

ol.points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-width:72ch}
ol.points li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
ol.points li:first-child{padding-top:4px}
ol.points .no{font-size:12px;letter-spacing:0.16em;color:var(--faint);padding-top:3px}
ol.points h3{margin:0 0 6px;font-size:15px;font-weight:400;letter-spacing:0.02em}
ol.points p{margin:0;font-size:15px;line-height:1.8}

/* project page opening: the plate beside its description */
.proj{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,112px);align-items:center;padding:clamp(48px,9vw,120px) 0 clamp(72px,11vw,150px)}
.proj .plate{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.proj h1{margin:0;font-size:clamp(34px,4.6vw,60px);font-weight:200;letter-spacing:-0.02em;line-height:1}
.proj .intro{display:flex;flex-direction:column;gap:24px}
.proj .intro .lede{max-width:none;margin:0;font-size:clamp(18px,1.9vw,22px);font-weight:200;line-height:1.6;color:var(--text);text-wrap:balance}
.proj .intro p{margin:0;max-width:56ch;font-size:16px;line-height:1.85}

.pager{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--rule);font-size:13px;letter-spacing:0.06em}
.pager a{padding:12px 0}

@media (prefers-reduced-motion: no-preference){
  .object{animation:push 2.4s cubic-bezier(.22,.61,.12,1) .2s both}
  .proj .plate{animation:lift 2.2s cubic-bezier(.22,.61,.12,1) .2s both}
}
@keyframes push{from{transform:rotate(-9deg) scale(.9);box-shadow:0 0 0 var(--light),0 0 0 rgba(20,18,12,0),0 0 0 rgba(20,18,12,0)}to{transform:rotate(-9deg) scale(1)}}
@keyframes lift{from{box-shadow:0 0 0 var(--light),0 0 0 rgba(20,18,12,0),0 0 0 rgba(20,18,12,0)}}

@media (max-width:720px){
  .sec{grid-template-columns:minmax(0,1fr)}
  .proj{grid-template-columns:minmax(0,1fr);gap:48px;padding-top:32px}
  .proj .plate{aspect-ratio:3/2}
}
@media (max-width:600px){
  .head{gap:12px;padding:28px 0}
  .head .wm{font-size:18px}
  .head nav{gap:12px;font-size:12px;letter-spacing:0.02em}
  .head nav a{padding:12px 2px}
}
@media (max-width:480px){
  dl.facts{grid-template-columns:minmax(0,1fr)}
  dl.facts dt{border:0;padding-bottom:0}
  ol.points li{grid-template-columns:40px minmax(0,1fr);gap:8px}
}
@media (max-width:340px){.head{flex-direction:column;gap:4px}}