/* 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}

/* seven-item menu: collapse to the Menu button below 1100px */
@media (max-width:1100px){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);color:var(--graphite);text-shadow:none}.menu-btn{display:block}}

/* buttons */
.btn{display:inline-block;font-family:"IBM Plex Mono";font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:14px 24px;transition:background .25s,color .25s}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}

/* Designed Objects plates */
.do-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(34px,5vw,60px);max-width:1120px}
.plate-card{margin:0}
.plate-card .frame{aspect-ratio:1/1;overflow:hidden;background:#0c0d0f}
.plate-card .frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.plate-card:hover .frame img{transform:scale(1.04)}
.plate-card .cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.05em;color:var(--graphite);text-transform:uppercase}
.plate-card .cap .title{color:var(--ink)}
.plate-card .avail{margin-top:4px;font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite)}
.plate-card .avail .n{color:var(--steel)}
.plate-card .avail.sold .n{color:#8a5240}
@media (max-width:640px){.do-plates{grid-template-columns:1fr}}

/* Prints */
.prints-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,72px);align-items:start;margin-top:clamp(34px,5vw,60px)}
.prints-grid .ph{aspect-ratio:1/1;overflow:hidden;background:#0c0d0f}
.prints-grid .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1)}
.prints-grid figcaption{margin-top:12px;font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite)}
.spec{margin:30px 0 0;border-top:1px solid var(--ink)}
.spec div{display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--hair)}
.spec dt{font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);padding-top:3px}
.spec dd{margin:0;font-size:17px;line-height:1.55;color:#26282c}
.spec .todo{color:#8b8d92;font-style:italic}
@media (max-width:820px){.prints-grid{grid-template-columns:1fr}}

/* Assignments */
.pair{display:flex;gap:clamp(16px,2.5vw,32px);margin-top:clamp(34px,5vw,60px)}
.pair figure{margin:0;min-width:0}
.pair .ph{overflow:hidden;background:#0c0d0f}
.pair img{width:100%;height:auto}
.pair figcaption{margin-top:12px;font-family:"IBM Plex Mono";font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite)}
.offer{max-width:60ch;margin-top:clamp(34px,5vw,56px)}
.offer p{font-size:clamp(19px,2.1vw,23px);line-height:1.5;color:#26282c;margin:0 0 28px}
@media (max-width:760px){.pair{flex-direction:column}.pair figure{flex:none!important}}

/* Contact */
.contact-hero{margin-top:clamp(34px,5vw,56px);overflow:hidden;background:#0c0d0f}
.contact-hero img{width:100%;height:auto;filter:grayscale(.1)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);margin-top:clamp(34px,5vw,56px);border-top:1px solid var(--ink);padding-top:clamp(24px,3vw,36px)}
.contact-grid p{font-size:18px;line-height:1.6;color:#26282c;margin:0;max-width:40ch}
.contact-lines{display:flex;flex-direction:column;gap:14px}
.contact-lines .lbl{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.contact-lines a.big{font-family:"Archivo";font-weight:700;font-size:clamp(22px,2.8vw,32px);letter-spacing:-.01em;border-bottom:1px solid var(--steel);align-self:flex-start;padding-bottom:2px}
.contact-lines .line{font-family:"IBM Plex Mono";font-size:15px;color:#26282c}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* Introduction (home) prose */
.intro-prose{max-width:58ch}

/* footer strip: keep side padding (the .foot rule was overriding it) */
.wrap.foot{padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px)}

/* Assignments: lead sentence larger, supporting lines at reading size */
.offer p+p{font-size:18px;line-height:1.6;margin:0 0 16px}
.offer .btn{margin-top:14px}