/* ============================================================
   nolanbennett.net
   Three tonal planes, taken from a mounted print:
   the wall, the mat, the image.
   The photographs are the only chromatic objects in the brand.
   ============================================================ */

:root{
  --field:  #E4E4E0;
  --mount:  #F2F2EF;
  --ink:    #141414;
  --label:  #6E6E68;
  --rule:   #C9C9C4;

  /* Swap the serif here and the whole site follows.
     Candidates: Lyon, Tiempos, Freight Text, Source Serif 4. */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --margin: 12vw;
  --gap: clamp(88px, 13vh, 150px);
  --bar: 58px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--field);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  font-weight:300;
  line-height:1.62;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--field); padding:10px 16px; border:1px solid var(--ink);
}
.skip:focus{ left:8px; top:8px; }

.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── utility voice: mono. dates, dimensions, editions, navigation ── */
.m{
  font-family:var(--mono);
  font-size:10.5px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--label); line-height:1.9;
}

/* ─────────────── masthead ─────────────── */
header{
  position:sticky; top:0; z-index:50;
  background:var(--field);
  border-bottom:1px solid var(--rule);
}
.bar{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; padding:20px var(--margin) 15px;
}
.wordmark{
  font-family:var(--serif); font-size:14px; font-weight:400;
  letter-spacing:.30em; text-transform:uppercase; white-space:nowrap;
}
nav{ display:flex; gap:26px; }
nav a{ position:relative; padding-bottom:2px; }
nav a[aria-current]{ color:var(--ink); }
nav a[aria-current]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  border-bottom:1px solid var(--ink);
}
nav a:hover{ color:var(--ink); }

main{ padding-bottom:var(--gap); }

/* ─────────────── image plates ─────────────── */
.plate{ margin:0 var(--margin) var(--gap); }
.plate:last-child{ margin-bottom:0; }

.mount{
  background:var(--mount);
  border:1px solid var(--rule);
  position:relative; overflow:hidden;
}
.mount img{ width:100%; height:auto; display:block; }

/* Tonal fallback: shown until an image loads, and if one is missing.
   Keeps the layout intact and presentable before the work goes in. */
.mount[data-tone]{ background-color:var(--mount); }
.mount[data-tone="stone"]{ background-image:linear-gradient(158deg,#3f4340,#8d918a 52%,#3f4340); }
.mount[data-tone="spain"]{ background-image:linear-gradient(164deg,#4a453e,#9c948a 52%,#4a453e); }
.mount[data-tone="angkor"]{ background-image:linear-gradient(152deg,#33392f,#7d8677 52%,#33392f); }
.mount[data-tone="night"]{ background-image:linear-gradient(170deg,#14161c,#2c3340 52%,#14161c); }
.mount.loaded{ background-image:none; }

.wall-label{ margin-top:18px; max-width:34ch; }
.wall-label .t{
  font-size:16.5px; font-weight:400; font-style:italic;
  letter-spacing:.005em; line-height:1.35; margin:0 0 6px;
}
.wall-label .m{ margin:0; }

/* ─────────────── home ─────────────── */
.home-wrap{
  min-height:calc(100vh - var(--bar));
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,7vh,90px) var(--margin);
}
.home-mount{ animation:lift 1s cubic-bezier(.2,.6,.2,1) both; }
.home-mount img{ max-height:66vh; width:auto; margin-inline:auto; }
@keyframes lift{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.home-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; margin-top:20px;
  animation:settle 1s .4s ease both;
}
@keyframes settle{ from{opacity:0} to{opacity:1} }

.enter{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:3px; white-space:nowrap;
}
.enter:hover{ opacity:.55; }

/* ─────────────── page furniture ─────────────── */
.page{ padding:clamp(64px,11vh,128px) var(--margin) 0; }
.eyebrow{ margin:0 0 26px; }

h1.title{
  font-size:clamp(30px,4.6vw,46px);
  font-weight:300; line-height:1.12; letter-spacing:-.014em; margin:0 0 22px;
}
h1.title em{ font-style:italic; }

.lede{ font-size:clamp(17px,1.55vw,19.5px); line-height:1.62; max-width:46ch; margin:0 0 8px; }
.rule{ border:0; border-top:1px solid var(--rule); margin:52px 0; }

.prose{ max-width:54ch; }
.prose p{ margin:0 0 1.2em; }
.prose p:last-child{ margin-bottom:0; }

h2.sec{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--label); margin:0 0 20px;
}

/* ─────────────── work index ─────────────── */
.index{ display:grid; gap:var(--gap); margin-top:60px; padding:0 var(--margin); }
.entry{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:860px){
  .entry{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:44px; align-items:end; }
}
.entry .mount{ aspect-ratio:3/2; transition:opacity .3s ease; }
.entry:hover .mount{ opacity:.88; }
.entry h2{
  font-size:clamp(21px,2.5vw,27px); font-weight:300;
  letter-spacing:-.008em; margin:0 0 8px; line-height:1.2;
}
.entry h2 em{ font-style:italic; }
.entry p{ margin:12px 0 0; max-width:38ch; font-size:15.5px; color:#3a3a38; }
.count{ margin-top:16px; }

/* ─────────────── collection header + pagination ─────────────── */
.coll-head{ padding:clamp(56px,10vh,116px) var(--margin) clamp(52px,8vh,86px); }
.coll-meta{ display:flex; flex-wrap:wrap; gap:8px 30px; margin-top:26px; }

.pager{
  display:flex; justify-content:space-between; gap:24px;
  margin:var(--gap) var(--margin) 0;
  padding-top:26px; border-top:1px solid var(--rule);
}
.pager a{ max-width:20ch; }
.pager .dir{ display:block; margin-bottom:4px; }
.pager .nm{ font-size:17px; font-style:italic; }
.pager .next{ text-align:right; margin-left:auto; }

/* ─────────────── prints ─────────────── */
.tiers{ display:grid; gap:44px; margin-top:6px; }
@media(min-width:900px){ .tiers{ grid-template-columns:1fr 1fr; gap:64px; } }
.tier{ border-top:1px solid var(--ink); padding-top:22px; }
.tier h3{ font-size:23px; font-weight:300; font-style:italic; margin:0 0 14px; letter-spacing:-.006em; }
.tier > p{ margin:0 0 20px; max-width:38ch; }

.spec{ list-style:none; padding:0; margin:0; }
.spec li{
  display:flex; justify-content:space-between; gap:24px;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:14.5px;
}
.spec li span:last-child{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; text-align:right;
}

.ledger{
  background:var(--mount); border:1px solid var(--rule);
  padding:clamp(24px,3.4vw,38px); margin-top:8px;
}
.ledger-title{ font-size:19px; font-style:italic; font-weight:400; margin:0 0 4px; }
.nums{ display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 20px; padding:0; list-style:none; }
.nums li{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  width:34px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); color:var(--ink); background:var(--field);
}
.nums li.sold{
  color:var(--label); border-color:transparent; background:transparent;
  text-decoration:line-through; text-decoration-thickness:1px;
}
.nums li.ap{ border-style:dashed; color:var(--label); }

.tiers-line{ display:grid; margin-top:4px; }
.tiers-line div{
  display:flex; justify-content:space-between; gap:20px;
  padding:8px 0; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--label);
}
.tiers-line div.now{ color:var(--ink); }
.tiers-line div:last-child{ border-bottom:0; }

/* ─────────────── two-column ─────────────── */
.two{ display:grid; gap:56px; }
@media(min-width:880px){ .two{ grid-template-columns:1fr 1fr; gap:80px; } }

/* ─────────────── list signup ─────────────── */
.field-row{
  display:flex; border-bottom:1px solid var(--ink);
  margin-top:26px; max-width:44ch;
}
input[type=email]{
  flex:1; min-width:0; background:transparent; border:0; padding:10px 0;
  font-family:var(--serif); font-size:16px; font-weight:300; color:var(--ink);
}
input[type=email]::placeholder{ color:var(--label); }
input:focus{ outline:none; }
.field-row:focus-within{ border-bottom-width:1.5px; }
button{
  background:transparent; border:0; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); padding:10px 0 10px 20px;
}
button:hover{ opacity:.55; }
.note{ margin-top:12px; }

a.link{ border-bottom:1px solid var(--rule); }
a.link:hover{ border-bottom-color:var(--ink); }

/* ─────────────── footer ─────────────── */
footer{
  border-top:1px solid var(--rule); margin-top:var(--gap);
  padding:26px var(--margin) 40px;
  display:flex; flex-wrap:wrap; gap:12px 34px; justify-content:space-between;
}

/* ─────────────── responsive ─────────────── */
@media(max-width:700px){
  :root{ --margin:7vw; --gap:64px; --bar:92px; }
  .bar{ flex-direction:column; align-items:flex-start; gap:12px; padding-bottom:12px; }
  nav{ gap:20px; }
  .home-mount img{ max-height:56vh; }
  .home-foot{ flex-direction:column; align-items:flex-start; gap:22px; }
  .pager{ flex-direction:column; gap:20px; }
  .pager .next{ text-align:left; margin-left:0; }
}

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

@media print{
  header, footer, .pager, .enter{ display:none; }
  body{ background:#fff; }
}