/* Shared styles for text pages (Introduction, Projects) — matches index.html tokens */
:root{
  --paper:#E7E6E1; --ink:#17181B; --graphite:#55575C;
  --hair:#C4C2BB; --steel:#37536B; --maxw:1360px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Newsreader",Georgia,serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* nav */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,5vw,64px);background:rgba(231,230,225,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.brand{font-family:"Archivo";font-weight:800;font-size:15px;letter-spacing:.42em;text-transform:uppercase}
nav{display:flex;gap:clamp(14px,3vw,34px)}
nav a{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);padding:4px 0;position:relative}
nav a.active{color:var(--ink)}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--steel);transition:right .3s}
nav a:hover::after,nav a:focus-visible::after,nav a.active::after{right:0}
nav a:hover,nav a:focus-visible{color:var(--ink)}
.menu-btn{display:none;background:none;border:0;cursor:pointer;font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* page body */
main{padding-top:clamp(90px,12vh,140px);padding-bottom:clamp(60px,10vh,120px);min-height:70vh}
.eyebrow{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);margin-bottom:22px}
h1.page{font-family:"Archivo";font-weight:800;line-height:1;letter-spacing:-.02em;margin:0 0 8px;font-size:clamp(34px,7vw,76px);max-width:16ch}
.thesis{font-family:"Newsreader";font-style:italic;font-size:clamp(19px,2.3vw,26px);line-height:1.45;color:#2a2c30;max-width:46ch;margin:26px 0 0}
.prose{max-width:58ch;margin-top:clamp(30px,5vw,54px)}
.prose p{font-size:18px;line-height:1.62;color:#26282c;margin:0 0 20px}
.pull{font-family:"Archivo";font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:8px 0 26px}
.rule{border:0;border-top:1px solid var(--hair);margin:clamp(34px,5vw,54px) 0}
.leadimg{margin:clamp(34px,5vw,54px) 0 0;aspect-ratio:16/9;overflow:hidden;background:#0c0d0f}
.leadimg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1)}
.cta{display:inline-block;margin-top:10px;font-family:"IBM Plex Mono";font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--steel);padding-bottom:3px}
.cta:hover{color:var(--steel)}

/* footer */
footer{background:var(--ink);color:#B9B8B2}
.foot{padding:clamp(40px,6vw,72px) 0;display:flex;flex-wrap:wrap;gap:8px 40px;align-items:baseline}
.foot .lbl{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7f8b96;margin-right:10px}
.foot a{font-family:"IBM Plex Mono";font-size:14px;color:#fff;border-bottom:1px solid #3a4a58;padding-bottom:2px}
.foot span{font-family:"IBM Plex Mono";font-size:14px}

@media (max-width:640px){
  nav{display:none}
  nav.open{display:flex;position:fixed;inset:56px 0 auto 0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--hair);padding:8px 0}
  nav.open a{padding:14px clamp(20px,5vw,64px)}
  .menu-btn{display:block}
}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px}

/* projects list */
.projects{margin-top:clamp(34px,5vw,60px);display:grid;gap:clamp(30px,4vw,52px)}
.project{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,42px);align-items:center;border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,34px)}
.project .ph{aspect-ratio:4/3;overflow:hidden;background:#0c0d0f;display:flex;align-items:center;justify-content:center;border:1px solid #23262b}
.project .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1)}
.project .ph span{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#5c6b78}
.project .num{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.2em;color:var(--steel)}
.project h2{font-family:"Archivo";font-weight:700;font-size:clamp(22px,3vw,34px);letter-spacing:-.015em;margin:8px 0 10px}
.project .todo{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--steel)}
@media (max-width:760px){.project{grid-template-columns:1fr}.project .ph{order:-1;aspect-ratio:16/9}}

/* individual project page gallery */
.back{display:inline-block;margin-bottom:22px;font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.back:hover{color:var(--ink)}
.gallery{margin-top:clamp(30px,5vw,54px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,26px)}
.gallery .cell{aspect-ratio:1/1;overflow:hidden;background:#0c0d0f;display:flex;align-items:center;justify-content:center;border:1px solid #23262b}
.gallery .cell img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1)}
.gallery .cell span{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5c6b78;text-align:center;padding:0 8px}
.project .ph{cursor:pointer}
.project .view{display:inline-block;margin-top:4px;font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--steel);padding-bottom:3px}
.project .view:hover{color:var(--steel)}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* Shipyards project: full frames, uncropped, with plate captions */
.gallery.plates{grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
.gallery.plates figure{margin:0}
.gallery.plates .cell{aspect-ratio:4/5}
.gallery.plates .cell img{object-fit:contain}
.gallery.plates figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite,#5c6b78)}
.gallery.plates figcaption .title{color:var(--ink,#0c0d0f)}
@media (max-width:640px){.gallery.plates{grid-template-columns:1fr}}

/* Commissions section on Projects page */
.commissions{max-width:none;border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,34px);margin-top:clamp(40px,6vw,72px);scroll-margin-top:100px}
.commissions p{max-width:58ch}
.commissions .cta{text-transform:none;letter-spacing:.02em}