/* ---------- Fonts (self-hosted) ---------- */
@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;
}
@font-face{
  font-family:"Montserrat";
  src:url("fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --paper:#f4f1eb;
  --ink:#1b1a18;
  --muted:#5f5b56;
  --rule:#cfc8bb;
  --tile:#e9e4da;
  --accent:#b8022b;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --gutter:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- Header ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:22px 20px;
}
.brand{display:block;flex:none}
.brand img{width:150px;height:auto}
.nav{display:flex;gap:clamp(18px,3vw,42px)}
.nav a{
  font:500 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:9px 0;
  border-bottom:1.5px solid transparent;
}
.nav a:hover{border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent)}

/* ---------- Shared bits ---------- */
.kicker{
  margin:0 0 10px;
  font:500 12px/1.3 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.page-title{
  margin:0;
  font-size:clamp(2.4rem,4.4vw,3.7rem);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.005em;
}
.rule{display:block;width:34px;height:1px;background:var(--ink);margin:22px 0}
.text-link{
  display:inline-block;
  font:500 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:0 0 8px;
  border-bottom:1px solid var(--ink);
}
.text-link:hover{opacity:.65}
.btn{
  display:inline-block;
  font:500 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:16px 28px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
.btn:hover{background:var(--ink);color:var(--paper)}

/* ---------- Home ---------- */
.hero{padding:6px 0 0}
.hero-media{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:76vh;
  overflow:hidden;
  background:var(--tile);
}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-caption{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:26px 0 0;
}
.hero-title{
  margin:0;
  font-size:clamp(2.4rem,6.2vw,5rem);
  font-weight:300;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* Home variant: text column beside the hero (index-text-left.html) */
.hero-split{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:40px;
  align-items:stretch;
}
.hero-text{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:32px;
  padding-bottom:4px;
}
.hero-text .page-title{font-size:clamp(2.2rem,3.2vw,3rem)}
.hero-text .text-link{align-self:flex-start}
.hero-blurb{margin:0;max-width:20em}

/* Home variant, wide screens: text column about a quarter of the width, hero about three quarters.
   The hero height follows the window height, so the collection names and the tops of their
   images always peek above the fold. On a short window the hero photo or video is cropped a
   little top and bottom rather than made smaller. The text column is the same height as the
   hero: if the text is longer than the space, its last line fades out above the Read more link. */
@media (min-width:861px){
  .hero-split{--hero-h:max(300px,min(76vh,calc(100vh - 251px)))}
  .hero-split .hero-media{max-height:var(--hero-h)}
  .hero-split .hero-media video,.hero-split .hero-media img{object-position:50% 65%}
  .hero-split + .collections{padding-top:28px}
  .hero-text{contain:size;min-height:0}
  .hero-text > div{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  .hero-text .hero-blurb{
    flex:1 1 0;
    min-height:0;
    overflow:hidden;
    max-width:30em;
    font-size:clamp(16.5px,calc(1.2vh + 10px),19px);
    line-height:1.5;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.6em),transparent);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 1.6em),transparent);
  }
}
@media (min-width:861px) and (max-height:720px){
  .hero-text{gap:16px}
  .hero-text .rule{margin:14px 0}
}

.collections{padding:64px 0 24px}
.collection-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px 18px;
}
.collection-card{display:block}
.collection-card .frame{aspect-ratio:4/3;background:var(--tile);overflow:hidden}
.collection-card img{width:100%;height:100%;object-fit:cover}
.collection-card:hover img{opacity:.92}
.collection-name{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  font-size:1.5rem;
  font-weight:400;
  line-height:1.15;
}
.collection-name .count{font:500 12px/1 var(--sans);letter-spacing:.14em;color:var(--muted)}

/* ---------- All Works ---------- */
.works-head{padding:18px 0 4px}
.jump{display:flex;flex-wrap:wrap;gap:10px 30px;margin:26px 0 0}
.jump a{
  font:500 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding-bottom:7px;
  border-bottom:1px solid transparent;
}
.jump a:hover{border-bottom-color:var(--ink)}
.jump .n{color:var(--muted);margin-left:6px}

.collection{padding:56px 0 8px;scroll-margin-top:12px}
.collection + .collection{border-top:1px solid var(--rule);margin-top:48px}
.collection-title{
  margin:0 0 28px;
  font-size:clamp(1.7rem,2.6vw,2.2rem);
  font-weight:400;
  line-height:1.1;
}
.collection-title .count{font:500 13px/1 var(--sans);letter-spacing:.14em;color:var(--muted);margin-left:10px}

.works-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px 18px;
}
.card{display:block;min-width:0}
.card .frame{aspect-ratio:var(--ar,4/5);background:var(--tile);overflow:hidden}
.card .frame img{width:100%;height:100%;object-fit:cover}
.card:hover .frame img{opacity:.92}
.card-cap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:0 18px;
  padding-top:12px;
}
.card .num{font:500 11px/1 var(--sans);letter-spacing:.14em;padding-top:6px}
.card .num::after{content:"";display:block;width:22px;height:1px;background:var(--ink);margin-top:7px}
.card .name{font-size:1.2rem;line-height:1.25}
.card .arrow{font:400 20px/1 var(--sans);padding-top:2px}

.layout-feature-first .card:first-child{grid-column:1/-1;--ar:16/9}
.layout-feature-first .card{--ar:3/2}
.layout-feature .card{grid-column:1/-1;justify-self:center;width:min(100%,600px);--ar:4/5}
.layout-grid .card{--ar:4/5}

/* Rows: every tile takes its own photo's shape (site.js measures each photo and
   sets --ar to its width divided by its height). Tiles in a row share one
   height, rows fill the full width, and the last row is left-aligned.
   --row-h is the target height of a row: bigger number = fewer, larger tiles. */
.layout-rows{display:flex;flex-wrap:wrap;gap:36px 18px;--row-h:300px;transition:opacity .25s ease}
.layout-rows::after{content:"";flex:1000000 1 0}
.layout-rows .card{--ar:.8;flex:calc(var(--ar) * 1000) 1 calc(var(--ar) * var(--row-h))}
.layout-rows.is-pending{opacity:0}

/* ---------- Detail ---------- */
.detail{padding-block:18px 0}
.detail-top{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:48px;
  align-items:start;
}
.detail-text .page-title{font-size:clamp(2.2rem,3.6vw,3.2rem)}
.meta{margin:0}
.meta div{padding:0 0 14px}
.meta dt{font:500 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.meta dd{margin:0}
.detail-text .blurb{margin:0 0 22px;max-width:34em}
.detail-text .blurb a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.detail-text .blurb a:hover{opacity:.65}
.detail-col{min-width:0}

/* Photos on a detail page show in their own shape: no tinted tile, no bars.
   --ar is the photo's width / height (set by site.js once it has loaded). A photo
   fills its column, but never grows taller than 80% of the window. */
.detail-hero-row{display:flex;gap:18px;align-items:flex-start}
.detail-media{--ar:1.5;flex:none;width:min(100%,calc(80vh * var(--ar)))}
.detail-media img,.detail-media video{display:block;width:100%;height:auto}
.dframe img{display:block;width:min(100%,calc(80vh * var(--ar,1.5)));height:auto}

/* Where the detail photos go (site.js decides, by measuring the page):
   beside the main photo when it is narrow, otherwise under the text or under the
   main photo, with the next ones filling the gap, and the rest in rows below. */
.detail-side{display:flex;flex-direction:column;gap:18px;flex:none}
.detail-side:empty{display:none}
.detail-side .dframe img,.detail-fill .dframe img{width:100%}
.detail-fill{display:flex;gap:18px;margin-top:18px;align-items:flex-start}
.detail-fill:empty{display:none}
.detail-fill .dframe{flex:none}
.detail-slot{margin-top:18px}
.detail-slot.slot-text{margin-top:36px}
.detail-slot:empty{display:none}
.detail-rows{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  --row-h:400px;
  padding-top:48px;
}
.detail-rows::after{content:"";flex:1000000 1 0}
.detail-rows:empty{display:none}
.detail-rows .dframe{flex:calc(var(--ar,1) * 1000) 1 calc(var(--ar,1) * var(--row-h));min-width:0}
.detail-rows .dframe img{width:100%}

.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:56px;
  padding:22px 0;
  border-top:1px solid var(--rule);
  font:500 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pager a:hover{opacity:.6}
.pager .where{color:var(--muted)}
.detail-actions{display:flex;flex-wrap:wrap;gap:14px;padding:8px 0 72px}

/* ---------- Studio and About ---------- */
.page{padding-block:18px 0}
.split{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:48px;
  align-items:start;
}
.split.about{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.prose p{margin:0 0 1.1em;max-width:34em}
.prose .after{margin-top:1.8em}
.plate{background:var(--tile);overflow:hidden}
.plate img{width:100%;height:auto}
.plate.band{margin-top:48px}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding-top:48px;
}
.photo-grid .plate{aspect-ratio:4/3}
.photo-grid .plate img{width:100%;height:100%;object-fit:contain}

/* ---------- Contact ---------- */
.contact-page{max-width:640px;margin:0 auto;padding:28px 0 80px}
.contact-page .page-title{margin-bottom:8px}
#contact-form{margin-top:32px}
#contact-form label{display:block;margin:0 0 4px;font:500 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#contact-form input[type=text],
#contact-form input[type=email],
#contact-form textarea{
  display:block;
  width:100%;
  margin:0 0 30px;
  padding:8px 0 10px;
  font:inherit;
  font-size:1.2rem;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ink);
  border-radius:0;
}
#contact-form textarea{resize:vertical;min-height:170px}
#contact-form .btn{background:var(--ink);color:var(--paper)}
#contact-form .btn:hover{opacity:.85}
#contact-form .btn:disabled{opacity:.5;cursor:default}
#form-status{min-height:1.6em;margin:18px 0 0;font-size:1rem}
.botcheck{display:none}

/* ---------- Footer ---------- */
.site-footer{margin-top:40px;border-top:1px solid var(--rule)}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
  padding-block:42px 38px;
}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.footer-logo{display:block;width:200px}
.footer-logo img{width:100%;height:auto;display:block}
.footer-tagline{margin:0;max-width:40em;text-wrap:balance;font-style:italic;font-weight:400;font-size:19px;line-height:1.4;color:var(--ink)}
.footer-row{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.copyright{margin:0;max-width:68ch}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 26px;font:500 11px/1.55 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.footer-links a{white-space:nowrap}
.footer-links a:hover{opacity:.6}

/* ---------- Phones and narrow windows ---------- */
@media (max-width:860px){
  :root{--gutter:16px}
  body{font-size:18px}
  .site-header{padding-block:16px 14px;gap:12px}
  .brand img{width:104px}
  .nav{gap:16px}
  .nav a{font-size:10.5px;letter-spacing:.1em}
  .hero-media{aspect-ratio:4/3;max-height:none}
  .hero-caption{flex-direction:column;align-items:flex-start;gap:18px;padding-top:20px}
  .hero-split{grid-template-columns:1fr;gap:20px}
  .hero-split .hero-media{order:-1}
  .hero-text{gap:20px}
  .collections{padding-top:44px}
  .collection-grid{grid-template-columns:1fr;gap:26px}
  .collection{padding-top:40px}
  .collection + .collection{margin-top:32px}
  .works-grid{grid-template-columns:1fr 1fr;gap:28px 12px}
  .layout-rows{gap:28px 12px;--row-h:190px}
  .layout-feature-first{grid-template-columns:1fr}
  .layout-feature-first .card:first-child{grid-column:auto}
  .card-cap{gap:0 12px}
  .card .name{font-size:1.05rem}
  .detail-top{grid-template-columns:1fr;gap:28px}
  .detail-rows{gap:12px;--row-h:240px;padding-top:32px}
  .pager{margin-top:40px}
  .split,.split.about{grid-template-columns:1fr;gap:28px}
  .photo-grid{grid-template-columns:1fr 1fr;gap:12px;padding-top:32px}
  .plate.band{margin-top:32px}
  .footer-row{flex-direction:column;gap:16px}
}

@media (max-width:640px){
  .site-header{flex-direction:column;align-items:flex-start;gap:10px}
  .nav{width:100%;flex-wrap:wrap;gap:4px 16px}
  .layout-rows{--row-h:150px}
  /* small tiles on a phone: just the title and the arrow, so three across still fit */
  .layout-rows .card-cap{grid-template-columns:minmax(0,1fr) auto;gap:0 8px}
  .layout-rows .num{display:none}
  .layout-rows .name{font-size:.95rem;overflow-wrap:anywhere}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}