/* =========================================================
   F.Lab — shared styles
   Idea: the site is a silver gelatin print. Paper-white pages,
   black "darkroom" panels, one accent: red grease-pencil marks.
   ========================================================= */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin-wght-italic.woff2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap;
}

:root{
  --paper:#f5f5f2;      /* fibre paper white */
  --ink:#1a1a1a;        /* text on paper */
  --dmax:#000000;       /* deepest black: darkroom panels, rules */
  --grey:#5c5c59;       /* secondary text on paper */
  --dim:#c9c9c5;        /* secondary text on black */
  --rule:#b9b9b4;       /* light rules, dotted leaders */
  --red:#d8322a;        /* grease pencil */

  --display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --text:"Newsreader",Georgia,"Times New Roman",serif;

  --wrap:72rem;
  --pad:clamp(1.25rem,4vw,3rem);
  --noise-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--paper) var(--noise-paper); color:var(--ink);
  font:400 1.1875rem/1.62 var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}

h1,h2,h3{
  font-family:var(--display); font-stretch:125%; font-weight:850;
  letter-spacing:-.015em; line-height:1.04; margin:0; text-wrap:balance;
}
h3{font-stretch:115%; font-weight:780; letter-spacing:-.01em; line-height:1.15}

:focus-visible{outline:3px solid var(--red); outline-offset:3px}

.skip{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:#000; color:#fff; padding:.75rem 1.1rem; font:700 1rem var(--display);
}
.skip:focus{top:1rem}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font:700 1rem/1 var(--display); font-stretch:112%;
  padding:1.05rem 1.5rem; background:#000; color:#fff; border:2px solid #000;
  transition:background-color .15s, color .15s;
}
.btn:hover{background:transparent; color:#000}
.btn--ghost{background:transparent; color:#000}
.btn--ghost:hover{background:#000; color:#fff}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper) var(--noise-paper); border-bottom:2px solid #000;
}
.header-inner{display:flex; align-items:center; gap:1.25rem; min-height:5.25rem}
/* logo: Arial Bold, same sizes as the original site (56px mark, 32px F, 30px wordmark, 2px spacing, 16px gap) */
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; margin-right:auto}
.brand-mark{
  width:56px; height:56px; flex-shrink:0; background:#000; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:Arial,sans-serif; font-weight:900; font-size:32px; line-height:1;
}
.brand-name{font-family:Arial,sans-serif; font-weight:900; font-size:30px; line-height:1; letter-spacing:2px; text-transform:uppercase}
@media (max-width:37.5rem){
  .brand-mark{width:42px; height:42px; font-size:24px}
  .brand-name{font-size:20px}
}

.nav-toggle{position:absolute; opacity:0; pointer-events:none}
.burger{
  display:none; cursor:pointer; width:3rem; height:3rem; border:2px solid #000;
  align-items:center; justify-content:center; position:relative;
}
.burger span,.burger span::before,.burger span::after{
  display:block; width:1.4rem; height:2px; background:#000; position:relative; content:"";
}
.burger span::before{position:absolute; top:-.45rem; left:0}
.burger span::after{position:absolute; top:.45rem; left:0}
.nav-toggle:focus-visible + .burger{outline:3px solid var(--red); outline-offset:3px}

.site-nav ul{list-style:none; display:flex; align-items:center; gap:1.6rem}
.site-nav a{
  position:relative; text-decoration:none; padding:.4rem 0; white-space:nowrap;
  font:650 .98rem/1 var(--display); font-stretch:108%;
}
/* the grease-pencil underline: marks the page you are on, draws in on hover */
.site-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:-.15rem; right:-.15rem; bottom:-.3rem; height:.6rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7 C 18 2, 38 10, 60 5 S 90 7, 99 3' fill='none' stroke='%23d8322a' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .25s ease-out;
}
.site-nav a[aria-current="page"]::after,
.site-nav a:not(.nav-cta):hover::after{clip-path:inset(0 0 0 0)}
.nav-cta{
  background:#000; color:#fff; border:2px solid #000; padding:.85rem 1.2rem !important;
  transition:background-color .15s, color .15s;
}
.nav-cta:hover{background:transparent; color:#000}

@media (max-width:72rem){
  .burger{display:flex}
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:2px solid #000;
    padding:.5rem var(--pad) 1.5rem;
  }
  .nav-toggle:checked ~ .site-nav{display:block}
  .site-nav ul{flex-direction:column; align-items:stretch; gap:0}
  .site-nav li{border-bottom:1px solid var(--rule)}
  .site-nav li:last-child{border:0; padding-top:1.1rem}
  .site-nav a{display:block; padding:1rem 0; font-size:1.15rem}
  .site-nav a:not(.nav-cta)::after{bottom:.55rem; left:0; right:auto; width:5rem}
  .nav-cta{text-align:center}
}

/* ---------- dark (darkroom) panels ---------- */
.dark{background:#000; color:#fff; position:relative; isolation:isolate}
.dark::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--noise-light); opacity:.07;
}
.dark .btn{background:#fff; color:#000; border-color:#fff}
.dark .btn:hover{background:transparent; color:#fff}
.dark .btn--ghost{background:transparent; color:#fff}
.dark .btn--ghost:hover{background:#fff; color:#000}
.dark :focus-visible{outline-color:#fff}

.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section--tight{padding:clamp(2.5rem,5vw,4rem) 0}

/* ---------- home hero ---------- */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
  padding-block:clamp(3rem,7vw,6rem);
}
.hero h1{font-size:clamp(2.2rem,4.7vw,4rem); color:#fff}
.hero-lede{font-size:clamp(1.2rem,1.9vw,1.45rem); line-height:1.45; max-width:30ch; color:var(--dim); margin:1.6rem 0 2.2rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem}

/* contact sheet */
.sheet{width:100%; transform:rotate(-2.2deg); transform-origin:50% 60%}
.sheet-paper{
  background:var(--paper); padding:5% 5% 2%;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 28px 50px -12px rgba(0,0,0,.9);
}
.strip{
  position:relative; background:#000; padding:17px 7px 19px; margin-bottom:3.2%;
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
}
.strip::before,.strip::after{
  content:""; position:absolute; left:6px; right:6px; height:6px;
  background:repeating-linear-gradient(90deg, var(--paper) 0 6px, transparent 6px 15px);
  opacity:.85;
}
.strip::before{top:5px}
.strip::after{bottom:5px}
.fw{position:relative}
.frame{position:relative; aspect-ratio:3/2; overflow:hidden; background:#555}
.frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 16px rgba(0,0,0,.6);
  background-image:var(--noise-dark); background-blend-mode:multiply; opacity:.38;
}
.fw .n{
  position:absolute; left:2px; bottom:-14px;
  font:700 8px/1 var(--display); color:rgba(255,255,255,.75); letter-spacing:.04em;
}
/* abstract tonal frames (swap for real photographs any time) */
.s1{background:radial-gradient(circle at 72% 36%, #fff 0 5%, rgba(255,255,255,0) 6%), linear-gradient(#c9c9c9, #8a8a8a 54%, #1d1d1d 55%)}
.s2{background:repeating-linear-gradient(118deg, #ececec 0 9px, #1c1c1c 9px 21px)}
.s3{background:radial-gradient(circle at 50% 46%, #f3f3f3 0 13%, #bdbdbd 14% 16%, rgba(0,0,0,0) 17%), radial-gradient(circle at 50% 46%, #5a5a5a, #090909 72%)}
.s4{background:linear-gradient(90deg, #222 0 12%, #d6d6d6 12% 27%, #121212 27% 35%, #9b9b9b 35% 68%, #1d1d1d 68% 79%, #e9e9e9 79%)}
.s5{background:radial-gradient(ellipse 34% 52% at 50% 54%, #ddd 0 55%, #7c7c7c 100%), linear-gradient(#2c2c2c, #0c0c0c)}
.s6{background:linear-gradient(135deg, #f1f1f1 0 38%, #191919 38% 60%, #a7a7a7 60%)}
.s7{background:linear-gradient(#d4d4d4 0 44%, #9c9c9c 44% 46%, #5a5a5a 46% 70%, #2b2b2b 70%)}
.s8{background:radial-gradient(circle at 50% 62%, #efefef 0 21%, rgba(0,0,0,0) 22%), linear-gradient(#444, #0d0d0d)}
.s9{background:linear-gradient(#e3e3e3 0 38%, #8a8a8a 38% 52%, #444 52% 66%, #151515 66%)}

/* grease-pencil marks */
.mark{position:absolute; pointer-events:none; color:var(--red); overflow:visible}
.mark path{vector-effect:non-scaling-stroke}
.mark-circle{inset:-24% -14%; width:128%; height:148%}
.mark-x{inset:6% 12%; width:76%; height:88%}
.mark-strike{left:-2%; right:-2%; top:50%; width:104%; height:.7rem; transform:translateY(-35%)}

@media (max-width:56rem){
  .hero-grid{grid-template-columns:1fr}
  .sheet{max-width:30rem; margin:0 auto}
}

/* ---------- page heads ---------- */
.page-head{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.2rem,4vw,3.2rem); border-bottom:2px solid #000}
.page-head h1{font-size:clamp(2.1rem,5vw,3.9rem); max-width:19ch}
.lede,.cta p,.hero-lede,.price-note{text-wrap:pretty}
.lede{font-size:clamp(1.2rem,1.9vw,1.45rem); line-height:1.45; max-width:34ch; margin:1.4rem 0 0}

/* page head with a photo beside the title */
.head-grid h1{font-size:clamp(2.1rem,4.3vw,3.35rem)}
.head-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr); gap:clamp(2rem,6vw,5rem); align-items:center}
.head-photo{margin:0; max-width:27rem; justify-self:end; width:100%}
.head-photo img{display:block; width:100%; height:auto; border:2px solid #000}
@media (max-width:50rem){ .head-grid{grid-template-columns:1fr} .head-photo{justify-self:start} }

.head-photo--wide{max-width:34rem}
.nobr{white-space:nowrap}
/* about: portrait beside "Who I am" */
.who-grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(2rem,6vw,5rem); align-items:start}
.who-grid .portrait img{border-color:#000}
.who-grid h2{font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:1.4rem}
.who-grid .body p{max-width:46ch}
@media (max-width:50rem){ .who-grid{grid-template-columns:1fr} .who-grid .portrait{max-width:24rem} }

/* ---------- home: price board ---------- */
.glance{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(2rem,4vw,3.5rem)}
.glance-col{display:flex; flex-direction:column; border-top:2px solid #000; padding-top:1.5rem}
@supports (grid-template-rows:subgrid){
  .glance{grid-template-rows:auto auto auto}
  .glance-col{display:grid; grid-template-rows:subgrid; grid-row:span 3}
}
.glance-col h3{font-size:clamp(1.35rem,2.1vw,1.7rem); margin-bottom:.7rem}
.glance-col h3 a{text-decoration:none}
.glance-col h3 a:hover{text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:3px; text-underline-offset:.35rem}
.glance-col > p{color:var(--grey); margin-bottom:1.4rem; max-width:34ch}
.glance-col .link-arrowless{margin-top:auto; align-self:start}
@media (max-width:58rem){
  .glance{grid-template-columns:1fr; grid-template-rows:none; row-gap:2.8rem}
  .glance-col{display:flex; grid-row:auto}
}
.pull--wide{max-width:34ch}
.lab-grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(2rem,6vw,5rem); align-items:center}
.portrait{margin:0}
.portrait img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border:2px solid #000}
.lab-grid .pull{max-width:30ch; font-size:clamp(1.5rem,3vw,2.35rem)}
@media (max-width:50rem){ .lab-grid{grid-template-columns:1fr} .portrait{max-width:24rem} }
.pull-link{margin:1.8rem 0 0}

/* sections that sit on black */
.dark .glance-col{border-top-color:#fff}
.dark .glance-col > p{color:var(--dim)}
.dark .portrait img{border-color:#fff}
.dark + .dark{border-top:1px solid #2a2a2a}
.dark .link-arrowless:hover{text-decoration-color:var(--red)}

/* ---------- starter kit panel ---------- */
.kit-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,6vw,5rem); align-items:center}
.kit h2{font-size:clamp(1.8rem,3.6vw,2.8rem); margin-bottom:1.1rem}
.kit-lede{max-width:44ch; color:var(--dim)}
.kit-list{list-style:none; margin:1.6rem 0 0; max-width:30rem}
.kit-list li{padding:.7rem 0; border-top:1px solid #3a3a3a}
.kit-list li:last-child{border-bottom:1px solid #3a3a3a}
.kit-price{position:relative; justify-self:center; text-align:center; padding:1rem}
.kit-price .amount{display:inline-block; position:relative; padding:.55em 1em; font:900 clamp(2.4rem,4.6vw,4.5rem)/1 var(--display); font-stretch:125%; letter-spacing:-.03em}
.kit-price .amount-note{display:block; margin-top:.6rem; font:600 1.1rem var(--display); font-stretch:108%}
.kit-price .mark{inset:auto; left:0; top:0; width:100%; height:100%}
.kit-actions{margin-top:2rem}
.kit-side{display:flex; flex-direction:column; align-items:center; gap:clamp(1.8rem,4vw,3rem)}
.kit-photos{display:flex; gap:clamp(.9rem,2vw,1.4rem); width:100%; max-width:34rem}
.kit-photos figure{margin:0; flex:1 1 0; min-width:0}
.kit-photos img{display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border:2px solid #fff}
.kit-photos figcaption{text-wrap:balance; margin-top:.65rem; font-size:.98rem; line-height:1.35; color:var(--dim)}
@media (max-width:22rem){ .kit-photos{flex-direction:column} }
@media (max-width:56rem){ .kit-grid{grid-template-columns:1fr} .kit-price{justify-self:center} .kit-price .amount{font-size:clamp(2.4rem,9.5vw,6rem)} }

/* ---------- text blocks ---------- */
.split{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(1.5rem,6vw,5rem)}
.split h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.split .body p{max-width:46ch}
@media (max-width:50rem){ .split{grid-template-columns:1fr} }
.link-arrowless{font:700 1.05rem var(--display); font-stretch:110%; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.3rem}
.link-arrowless:hover{text-decoration-color:var(--red)}

.cta h2{font-size:clamp(1.8rem,3.8vw,3rem); max-width:18ch}
.cta p{color:var(--dim); max-width:38ch; margin:1.1rem 0 1.8rem; font-size:1.25rem}
.cta-actions{display:flex; flex-wrap:wrap; gap:.85rem}

/* ---------- price lists ---------- */
.price-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.5rem,6vw,5rem)}
@media (max-width:50rem){ .price-cols{grid-template-columns:1fr} }
.price-group h2{font-size:clamp(1.5rem,2.6vw,2.05rem); padding-bottom:.9rem; border-bottom:2px solid #000}
.price-group h3{font-size:1.15rem; margin:1.9rem 0 .15rem}
.price-list{list-style:none}
.price-list li{position:relative; display:flex; align-items:baseline; gap:.8rem; padding:.7rem 0}
.price-list .item{font-size:1.15rem}
.price-list .sub{display:block; font-size:.95rem; line-height:1.3; color:var(--grey)}
.price-list .dots{flex:1; min-width:1rem; border-bottom:2px dotted var(--rule); transform:translateY(-.35rem)}
.price-list .price{font:760 1.2rem/1 var(--display); font-stretch:112%; font-variant-numeric:tabular-nums; white-space:nowrap}
.price-list .oos{position:relative; z-index:1; font:700 .8rem/1 var(--display); font-stretch:108%; letter-spacing:.06em; text-transform:uppercase; color:var(--red); background:var(--paper); padding:.3rem .5rem; margin-left:.6rem; border:1.5px solid var(--red); white-space:nowrap}
@media (max-width:480px){.price-list .oos{display:block; width:max-content; font-size:.68rem; padding:.25rem .4rem; margin:.4rem 0 0; letter-spacing:.04em}}
.price-note{margin-top:2.2rem; max-width:44ch; color:var(--grey)}

/* ---------- workshops (listings) ---------- */
.listings{margin-top:0}
.listing{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:2rem clamp(2rem,6vw,5rem);
  padding:clamp(2rem,4vw,3rem) 0; border-top:2px solid #000;
}
.listing:first-child{border-top:0}
.listing h2{font-size:clamp(1.5rem,2.7vw,2.15rem); margin-bottom:1rem}
.listing .desc{max-width:50ch}
.ticks{list-style:none; margin:1.2rem 0 0}
.ticks li{position:relative; padding:.35rem 0 .35rem 1.5rem}
.ticks li::before{content:""; position:absolute; left:0; top:.95rem; width:.55rem; height:.55rem; background:#000}
.listing-side{align-self:start; border-left:2px solid #000; padding-left:clamp(1.25rem,3vw,2rem)}
.listing-price{font:900 clamp(2rem,3.6vw,2.8rem)/1 var(--display); font-stretch:125%; letter-spacing:-.02em; margin:0}
.listing-price small{display:block; font:400 1rem/1.3 var(--text); letter-spacing:0; color:var(--grey); margin-top:.45rem}
.facts{list-style:none; margin:1.2rem 0 1.5rem; font-size:1.05rem}
.facts li{padding:.2rem 0}
.listing--free .listing-price{font-size:clamp(1.8rem,3vw,2.3rem)}
@media (max-width:48rem){
  .listing{grid-template-columns:1fr}
  .listing-side{border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1.4rem}
}
.how-to{font-size:1.1rem; max-width:52ch; margin-top:1.4rem; padding:1.1rem 1.25rem; border:2px solid #000; background:#fff}
.how-to strong{font-family:var(--display); font-stretch:108%}

/* ---------- steps ---------- */
.steps{list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.25rem,3vw,2.2rem)}
.steps li{counter-increment:step; border-top:2px solid #000; padding-top:1.1rem}
.steps li::before{
  content:counter(step); display:block; margin-bottom:.8rem;
  font:900 2.6rem/1 var(--display); font-stretch:125%;
}
.steps h3{font-size:1.2rem; margin-bottom:.5rem}
.steps p{margin:0; color:var(--grey); font-size:1.05rem; line-height:1.5}
@media (max-width:62rem){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:36rem){ .steps{grid-template-columns:1fr} }
.section-title{font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:2rem}

/* ---------- prints: gallery and contact sheet ---------- */
.gallery{display:grid; gap:clamp(1rem,2.4vw,1.75rem)}
.gallery-row{display:flex; gap:clamp(1rem,2.4vw,1.75rem); align-items:flex-start}
.gallery-row figure{flex-basis:0; min-width:0; margin:0; background:var(--paper); padding:clamp(.45rem,1vw,.7rem)}
.gallery-row img{display:block; width:100%; height:auto}
@media (max-width:40rem){
  .gallery-row{flex-direction:column; align-items:stretch}
  .gallery-row figure{flex:none !important}
}
.sheet-split{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,6vw,5rem); align-items:center}
.sheet-split p{max-width:38ch}
.plate{margin:0}
.plate img{display:block; width:100%; height:auto; border:2px solid #000}
@media (max-width:50rem){ .sheet-split{grid-template-columns:1fr} }

/* ---------- about: principles ---------- */
.principles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3rem)}
.principles > div{border-top:1px solid #4a4a4a; padding-top:1.3rem}
.principles h3{font-size:1.4rem; margin-bottom:.7rem}
.principles p{color:var(--dim); margin:0}
@media (max-width:50rem){ .principles{grid-template-columns:1fr} }
.pull{font:850 clamp(1.7rem,3.6vw,2.9rem)/1.12 var(--display); font-stretch:120%; letter-spacing:-.015em; max-width:22ch; margin:0}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,5rem); align-items:start}
@media (max-width:52rem){ .contact-grid{grid-template-columns:1fr} }
.contact-aside p{max-width:34ch}
.email-link{font:750 clamp(1.15rem,2.2vw,1.45rem) var(--display); font-stretch:112%; word-break:break-word}
.form{display:grid; gap:1.35rem}
.field label{display:block; font:700 1rem var(--display); font-stretch:108%; margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%; font:400 1.15rem/1.4 var(--text); color:var(--ink);
  background:#fff; border:2px solid #000; border-radius:0; padding:.85rem .95rem;
}
.field select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position:calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%; background-size:.4rem .4rem; background-repeat:no-repeat; padding-right:2.4rem}
.field textarea{min-height:9rem; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--red); outline-offset:2px}
.hp{position:absolute; left:-9999px}
.mail-frame{width:100%; height:32rem; border:2px solid #000; background:#fff}

/* ---------- thank you ---------- */
.tick{width:5.5rem; height:5.5rem; color:var(--red); margin-bottom:1.5rem}
.tick path{vector-effect:non-scaling-stroke}

/* ---------- footer ---------- */
.site-footer{padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr)); gap:2.5rem}
.footer-grid h2{font:700 1.05rem var(--display); font-stretch:110%; letter-spacing:0; margin-bottom:1rem; color:#fff}
.footer-grid ul{list-style:none}
.footer-grid li{padding:.28rem 0}
.footer-grid a{text-decoration:none; color:var(--dim)}
.footer-grid a:hover{color:#fff; text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:2px; text-underline-offset:.3rem}
.site-footer .brand-mark{background:#f6f4ef; color:#0c0c0c}
.site-footer .brand-name{color:#fff}
.footer-about{color:var(--dim); max-width:28ch; margin-top:1.1rem; font-size:1.05rem}
.footer-base{margin-top:3rem; padding-top:1.2rem; border-top:1px solid #333; color:#8f8f8b; font-size:.95rem}
@media (max-width:50rem){ .footer-grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; scroll-behavior:auto !important}
}

/* ---------- home page, all black (switch: HOME_DARK in build.py) ---------- */
body.home{background:#000; color:#fff}
body.home .site-header{background:#000; border-bottom-color:#fff}
body.home .brand-mark{background:#f6f4ef; color:#0c0c0c}
body.home .brand-name,
body.home .site-nav a{color:#fff}
body.home .site-nav .nav-cta{background:#fff; color:#000; border-color:#fff}
body.home .site-nav .nav-cta:hover{background:transparent; color:#fff}
body.home .burger{border-color:#fff}
body.home .burger span,
body.home .burger span::before,
body.home .burger span::after{background:#fff}
body.home :focus-visible{outline-color:#fff}
@media (max-width:72rem){
  body.home .site-nav{background:#000; border-bottom-color:#fff}
  body.home .site-nav li{border-bottom-color:#333}
}
.sheet-paper--photo{padding:5%}
.sheet-paper--photo img{display:block;width:100%;height:auto}

.plate--chem{margin-top:1.8rem}

/* digital negative pairs */
.gallery-row.pair figcaption{margin-top:.6rem; font-size:.98rem; line-height:1.3; color:#000}
.gallery-row.pair{margin-bottom:clamp(1rem,2.4vw,1.75rem)}