:root{
  color-scheme:light;
  --bg:#f7f4ee; --panel:#fffdf9; --ink:#1a1815; --soft:#5d5750; --muted:#948b7f;
  --rule:#e2dbcd; --rule-soft:#ede7db; --accent:#8a5a3c; --like:#c2452f;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(1.5rem,5vw,5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1,"liga" 1}
body.lb-open{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:#e6d9c4}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--panel);
  padding:.7rem 1.1rem;border:1px solid var(--rule)}
.skip:focus{left:1rem;top:1rem}

.label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.loading{padding:4rem 0;color:var(--muted);font-size:.9rem}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:baseline;
  justify-content:space-between;gap:2rem;padding:1.5rem var(--pad);
  background:linear-gradient(var(--bg) 55%,rgba(247,244,238,0))}
.brand{font-size:clamp(1.15rem,1.9vw,1.6rem);letter-spacing:-.01em;font-weight:500;
  text-decoration:none;color:var(--ink);line-height:1.15;white-space:nowrap}
nav{display:flex;gap:1.75rem}
nav a{font-size:.78rem;letter-spacing:.08em;color:var(--soft);text-decoration:none;
  position:relative;padding-bottom:2px}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);
  transition:width .35s var(--ease)}
nav a:hover{color:var(--ink)}
nav a:hover::after{width:100%}

/* ---------- hero ---------- */
.hero{padding:clamp(7.5rem,18vh,11.5rem) var(--pad) clamp(3.5rem,7vh,5.5rem);
  max-width:76rem;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:end}
.hero-title{margin:0 0 1.75rem;font-size:clamp(2.6rem,7.5vw,5.4rem);font-weight:300;
  line-height:1.02;letter-spacing:-.025em}
.hero-title em{font-style:italic;color:var(--accent)}
.hero-text{max-width:34rem;padding-bottom:.4rem}
.hero p{margin:0;font-size:clamp(1rem,1.4vw,1.1rem);color:var(--soft);line-height:1.75}
.hero p+p{margin-top:1.15rem}
.hero .label{display:block;margin-bottom:1.5rem}
.hero-title,.hero p{opacity:0;transform:translateY(14px);animation:rise .9s var(--ease) forwards}
.hero-title{animation-delay:.12s}
.hero p{animation-delay:.26s}
.hero p+p{animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- the hang ---------- */
.work{padding:0 var(--pad) clamp(6rem,12vh,10rem)}
.row{display:flex;gap:clamp(1.5rem,4vw,4rem);align-items:flex-start;
  margin:0 auto clamp(5rem,11vh,9rem)}
.row-1{max-width:44rem}
.row-2{max-width:64rem}
.row-3{max-width:76rem}
.row-2 .card:nth-child(2){margin-top:clamp(2rem,7vw,5.5rem)}
.row-3 .card:nth-child(1){margin-top:clamp(1.5rem,5vw,4rem)}
.row-3 .card:nth-child(3){margin-top:clamp(2.5rem,8vw,6rem)}

.card{display:block;flex-grow:var(--ratio);flex-basis:0;flex-shrink:1;min-width:0;text-align:left;
  opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.card.in{opacity:1;transform:none}
.card-frame{display:block;position:relative;overflow:hidden;min-width:0;background:#efe9dd;
  background-size:cover;background-position:center;
  box-shadow:0 1px 2px rgba(40,30,18,.07),0 12px 28px -14px rgba(40,30,18,.28);
  transition:box-shadow .55s var(--ease),transform .55s var(--ease)}
.card-frame picture{display:block}
.card-frame img{width:100%;height:auto;aspect-ratio:var(--ratio);object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease),transform 1.1s var(--ease);transform:scale(1.02)}
.card.loaded .card-frame img{opacity:1;transform:none}
.card:hover .card-frame{transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(40,30,18,.08),0 30px 50px -18px rgba(40,30,18,.4)}
.card:hover .card-frame img{transform:scale(1.025)}

.card-cap{display:block;padding-top:1rem}
.card-line{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.card-num{font-size:.7rem;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.card-title{font-size:.95rem;letter-spacing:.01em;opacity:.75;transition:opacity .4s var(--ease)}
.card:hover .card-title{opacity:1}
.card-meta{display:block;font-size:.76rem;color:var(--muted);margin-top:.15rem}

/* stat strip under each card */
.stats{display:flex;align-items:center;gap:1rem;margin-top:.55rem;
  font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.stat{display:inline-flex;align-items:center;gap:.32rem}
.stat svg{width:.85rem;height:.85rem;flex:none;opacity:.75}
.stat.on{color:var(--like)}
.stat.on svg{opacity:1}

/* type chip */
.chip{display:inline-block;padding:.13rem .5rem;border-radius:999px;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--rule);color:var(--muted)}
.chip-recreated{border-color:#d9c3ae;color:var(--accent);background:rgba(138,90,60,.06)}
/* Most work is original, so this badge stays quiet — it labels without
   competing with the painting or the title. */
.chip-original{border-color:var(--rule);color:#a89e91;background:transparent}
.card:hover .chip-original{color:var(--muted);border-color:#d5cdbf}
.chip-inline{transform:translateY(-1px)}

/* ---------- about / footer ---------- */
.about{border-top:1px solid var(--rule);padding:clamp(5rem,10vh,8rem) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(2rem,7vw,7rem);max-width:76rem;margin:0 auto;
  opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.about.in{opacity:1;transform:none}
.about p{margin:0 0 1.25rem;font-size:clamp(1rem,1.4vw,1.14rem);color:var(--soft);max-width:38rem}
.about p:first-of-type{color:var(--ink);font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-weight:300;line-height:1.5;letter-spacing:-.01em}
.about a:not(.contact-link){color:var(--accent);text-decoration:none;
  border-bottom:1px solid #d9c3ae;padding-bottom:1px}
.about a:not(.contact-link):hover{border-color:var(--accent)}
/* portrait sits in the About column, which was otherwise empty */
.about-side{display:flex;flex-direction:column;gap:1.4rem}
.portrait{display:block;max-width:22rem;background-size:cover;background-position:center;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(40,30,18,.07),0 16px 34px -16px rgba(40,30,18,.32)}
.portrait img{width:100%;height:auto;aspect-ratio:851/1064;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease)}
.portrait img.shown{opacity:1}

/* contact, in the About column */
/* No pill: the button padding pushed these in from the text column above,
   so the icons no longer lined up with the paragraphs. */
.contact-links{display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin-top:2.1rem}
.contact-link{display:inline-flex;align-items:center;gap:.55rem;padding-block:.35rem;
  font-size:.92rem;color:var(--accent);text-decoration:none}
.contact-link svg{width:1.05rem;height:1.05rem;flex:none;color:var(--muted);
  transition:color .3s var(--ease)}
.contact-link span{transition:color .3s var(--ease)}
.contact-link:hover svg{color:var(--accent)}
.contact-link:hover span{color:var(--ink)}

footer{border-top:1px solid var(--rule);padding:2.2rem var(--pad) 2.8rem;
  max-width:76rem;margin:0 auto}
.copyright{margin:0;font-size:.76rem;line-height:1.85;color:var(--muted);max-width:56rem}
.copyright+.copyright{margin-top:.7rem}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(247,244,238,.9);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;transition:opacity .3s var(--ease)}
.lb.on{opacity:1}
.lb-panel{position:absolute;inset:clamp(.75rem,2.5vw,2rem);display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(min(100%,25rem),.7fr);
  gap:clamp(1rem,2.5vw,2.5rem);
  transform:scale(.985);transition:transform .35s var(--ease)}
.lb.on .lb-panel{transform:none}

.lb-media{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:0;overflow:hidden;padding:clamp(1rem,3vw,2.5rem)}
.lb-pic{display:contents}
.lb-preload{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.lb-img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;
  box-shadow:0 4px 12px rgba(40,30,18,.1),0 40px 80px -30px rgba(40,30,18,.45);
  opacity:0;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.lb-img.shown{opacity:1}
.lb.zoomed .lb-img{transform:scale(2.1);cursor:zoom-out}
.lb-hint{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#bfb4a2;
  transition:opacity .3s var(--ease)}
.lb.zoomed .lb-hint{opacity:0}

/* right-hand pane: metadata, stats, conversation */
.lb-info{background:var(--panel);border:1px solid var(--rule-soft);border-radius:3px;
  overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.3rem,2.5vw,2rem);
  display:flex;flex-direction:column;gap:1.25rem}
.lb-head{display:flex;flex-direction:column;gap:.55rem}
.lb-num{font-size:.7rem;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-title{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.lb-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.15rem}
.lb-facts[hidden]{display:none}
.lb-facts{border-top:1px solid var(--rule-soft);padding-top:.9rem;
  display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;font-size:.8rem}
.lb-facts dt{color:var(--muted);letter-spacing:.04em}
.lb-facts dd{margin:0;color:var(--soft)}

.lb-stats{position:relative;display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);padding:.8rem 0}
.like-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:999px;
  border:1px solid var(--rule);font-size:.8rem;color:var(--soft);font-variant-numeric:tabular-nums;
  transition:all .28s var(--ease)}
.like-btn svg{width:1rem;height:1rem;transition:transform .3s var(--ease)}
.like-btn:hover{border-color:#d9c3ae;color:var(--ink)}
.like-btn.on{color:var(--like);border-color:rgba(194,69,47,.35);background:rgba(194,69,47,.07)}
.like-btn.on svg{fill:var(--like);stroke:var(--like)}
.like-btn.pop svg{transform:scale(1.35)}
.lb-stats .stat{font-size:.76rem;margin-left:.35rem}

/* conversation */
.thread-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.thread-head h3{margin:0;font-size:.86rem;font-weight:500;letter-spacing:.02em}
.thread{display:flex;flex-direction:column;gap:1.1rem;list-style:none;margin:0;padding:0}
.thread-empty{color:var(--muted);font-size:.82rem;font-style:italic}
.cmt{display:flex;flex-direction:column;gap:.3rem}
.cmt-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.cmt-author{font-size:.82rem;font-weight:500}
.cmt-when{font-size:.68rem;color:var(--muted)}
.cmt-mine{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cmt-body{margin:0;font-size:.86rem;color:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere}
.cmt-actions{display:flex;align-items:center;gap:.9rem;margin-top:.15rem}
.cmt-act{font-size:.7rem;color:var(--muted);display:inline-flex;align-items:center;gap:.3rem;
  transition:color .25s var(--ease);font-variant-numeric:tabular-nums}
.cmt-act svg{width:.8rem;height:.8rem}
.cmt-act:hover{color:var(--ink)}
.cmt-act.on{color:var(--like)}
.cmt-act.on svg{fill:var(--like);stroke:var(--like)}
.cmt-replies{list-style:none;margin:.7rem 0 0;padding:0 0 0 .9rem;
  border-left:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:.9rem}

/* comment form */
.cform{display:flex;flex-direction:column;gap:.55rem;border-top:1px solid var(--rule-soft);padding-top:1rem}
.cform.is-reply{border-top:0;padding-top:.6rem;margin-top:.2rem}
.cform input,.cform textarea{width:100%;font:inherit;font-size:.84rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--rule);border-radius:2px;padding:.55rem .7rem;
  transition:border-color .25s var(--ease)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:#c9b79f}
.cform textarea{resize:vertical;min-height:4.5rem;line-height:1.55}
.cform-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.cform-count{font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cform-count.over{color:var(--like)}
.cform-btns{display:flex;gap:.5rem}
.btn{padding:.45rem .95rem;border-radius:2px;font-size:.78rem;border:1px solid var(--ink);
  background:var(--ink);color:var(--bg);transition:opacity .25s var(--ease)}
.btn:hover{opacity:.82}
.btn[disabled]{opacity:.38;cursor:not-allowed}
.btn-ghost{background:none;color:var(--soft);border-color:var(--rule)}
.btn-ghost:hover{color:var(--ink);border-color:var(--muted);opacity:1}
.cform-msg{font-size:.74rem;color:var(--like)}
.cform-msg.ok{color:var(--accent)}
/* honeypot: never shown, never announced */
.cform input.hp{position:absolute;left:-9999px;width:1px;height:1px;padding:0;border:0;opacity:0}

.lb-btn{position:absolute;z-index:3;width:2.9rem;height:2.9rem;border-radius:50%;
  display:grid;place-items:center;font-size:1.1rem;color:var(--soft);
  background:rgba(255,253,249,.85);box-shadow:0 2px 14px rgba(40,30,18,.14);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.lb-btn:hover{background:#fff;color:var(--ink);transform:scale(1.06)}
.lb-close{top:clamp(.4rem,1.5vw,1rem);right:clamp(.4rem,1.5vw,1rem)}
.lb-prev,.lb-next{top:50%;margin-top:-1.45rem;font-size:1.5rem}
.lb-prev{left:clamp(.2rem,1vw,.75rem)}
.lb-next{right:clamp(.2rem,1vw,.75rem)}
.lb-counter{position:absolute;left:clamp(1rem,3vw,2rem);bottom:clamp(.6rem,2vw,1.2rem);
  font-size:.72rem;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}

@media (max-width:960px){
  .lb-panel{grid-template-columns:1fr;grid-template-rows:minmax(46vh,54vh) 1fr;
    inset:0;gap:0}
  .lb-media{padding:3.2rem 1rem 1rem;background:var(--bg)}
  .lb-info{border-radius:0;border:0;border-top:1px solid var(--rule)}
  .lb-prev,.lb-next{top:50%}
  /* the image fills the pane on small screens; the hint would sit on top of it */
  .lb-hint{display:none}
  .lb-counter{display:none}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:1.75rem;align-items:start}
  .row{flex-direction:column;gap:3rem;max-width:34rem}
  .row .card{margin-top:0!important}
  .about{grid-template-columns:1fr}
  .portrait{max-width:14rem}
  nav{gap:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .hero-title,.hero p{opacity:1;transform:none}
}

/* ---------- sharing ---------- */
.share-btn{position:static}
.share-menu{position:absolute;z-index:5;top:calc(100% + .6rem);left:0;width:min(17rem,80vw);
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;
  box-shadow:0 4px 10px rgba(40,30,18,.06),0 22px 44px -20px rgba(40,30,18,.4);
  padding:.85rem;display:flex;flex-direction:column;gap:.5rem;
  animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.share-head{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.share-list{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.share-item{display:flex;align-items:center;gap:.4rem;padding:.45rem .6rem;border-radius:3px;
  font-size:.8rem;color:var(--soft);text-decoration:none;border:1px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.share-item:hover{background:var(--bg);color:var(--ink);border-color:var(--rule)}
.share-item svg{width:.9rem;height:.9rem;flex:none}
.share-copy{width:100%;text-align:left;border-top:1px solid var(--rule-soft);border-radius:0;
  padding-top:.6rem;margin-top:.15rem}
.share-copy:hover{border-color:transparent;border-top-color:var(--rule-soft)}
.share-note{margin:.1rem 0 0;font-size:.68rem;line-height:1.45;color:var(--muted)}
.share-status{margin:0;font-size:.7rem;color:var(--accent);min-height:1em}
@media (max-width:960px){
  .share-menu{left:auto;right:0}
}

/* ---------- search ---------- */
.work-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;max-width:76rem;margin:0 auto clamp(2.5rem,6vh,4rem);
  padding:0 var(--pad)}
.search{display:flex;align-items:center;gap:.6rem;flex:1 1 16rem;max-width:26rem;
  border-bottom:1px solid var(--rule);padding:.4rem .1rem;
  transition:border-color .35s var(--ease)}
.search:focus-within{border-color:var(--muted)}
.search-icon{width:1rem;height:1rem;flex:none;color:var(--muted);
  transition:color .35s var(--ease)}
.search:focus-within .search-icon{color:var(--soft)}
.search input{flex:1;min-width:0;font:inherit;font-size:.92rem;color:var(--ink);
  background:none;border:0;padding:.15rem 0;appearance:none}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none}
.search input::-webkit-search-cancel-button{display:none}
.search-clear{width:1.4rem;height:1.4rem;flex:none;border-radius:50%;display:grid;
  place-items:center;font-size:.72rem;color:var(--muted);
  transition:background .25s var(--ease),color .25s var(--ease)}
.search-clear:hover{background:#ece5d7;color:var(--ink)}
.work-count{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

.no-results{max-width:44rem;margin:0 auto;padding:clamp(3rem,10vh,6rem) 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.no-results p{margin:0;color:var(--soft);font-size:1.05rem}

/* ---------- phones ----------
   Mobile is the primary audience, so this block is about thumbs and Safari
   rather than about width. */
@media (max-width:820px){
  /* iOS Safari zooms the whole page when a focused field is under 16px. */
  .search input,.cform input,.cform textarea{font-size:16px}
  .work-bar{gap:.6rem}
  .search{max-width:none;flex-basis:100%}
  .work-count{width:100%;text-align:left}
}

/* Touch-sized hit areas. Keyed to width rather than pointer type so the rule
   is testable, and because a narrow window is a phone in practice. */
@media (max-width:820px){
  header{gap:.75rem}
  .brand{font-size:1.12rem}
  nav{gap:.15rem}
  nav a{font-size:.74rem}
  nav a{padding:.7rem .45rem}
  .brand{display:inline-block;padding-block:.55rem}
  footer a{display:inline-block;padding-block:.8rem}
  /* Inline prose links can't be block-sized without wrecking the line box;
     vertical padding on an inline element grows the hit area for free. */
  .about a{padding-block:.45rem}
  .search{padding-block:.6rem}
  .search input{padding-block:.45rem}
  .search-clear{width:2.6rem;height:2.6rem;font-size:.85rem}
  .like-btn,.btn{min-height:2.9rem;padding-inline:1.05rem}
  .contact-link{min-height:2.75rem}
  .share-item{min-height:2.9rem}
  .share-copy{min-height:3rem}
  .cmt-act{min-height:2.6rem;padding-block:.5rem}
  .lb-btn{width:3.1rem;height:3.1rem}
}

/* Small phones: the title and three nav items only just fit. */
@media (max-width:380px){
  header{padding-inline:1rem;gap:.4rem}
  .brand{font-size:1rem}
  nav a{font-size:.68rem;padding:.7rem .28rem;letter-spacing:.04em}
}

/* Touch devices keep :hover styles stuck after a tap. */
@media (hover:none){
  .card:hover .card-frame{transform:none;
    box-shadow:0 1px 2px rgba(40,30,18,.07),0 12px 28px -14px rgba(40,30,18,.28)}
  .card:hover .card-frame img{transform:none}
  .card-title,.card-cap{opacity:1}
}

/* ---------- server-rendered painting page ----------
   Present on /p/<n>-<slug> so the URL has content of its own for crawlers and
   for anyone without JavaScript. The script removes it and opens the lightbox,
   which presents the same painting and the same facts. */
.detail{max-width:76rem;margin:0 auto;padding:clamp(7rem,16vh,10rem) var(--pad) clamp(2rem,5vh,3.5rem);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.detail-media picture{display:block}
.detail-media img{width:100%;height:auto;
  box-shadow:0 1px 2px rgba(40,30,18,.07),0 16px 34px -16px rgba(40,30,18,.32)}
.detail-body{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.detail-num{font-size:.72rem;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums}
.detail-title{margin:0;font-size:clamp(1.8rem,4vw,3rem);font-weight:300;letter-spacing:-.025em;line-height:1.1}
.detail-facts{margin:.6rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.85rem}
.detail-facts dt{color:var(--muted)}
.detail-facts dd{margin:0;color:var(--soft)}
.detail-desc{margin:.6rem 0 0;color:var(--soft);font-size:.92rem;line-height:1.7}
.detail-back{margin-top:.5rem;font-size:.82rem;color:var(--accent);text-decoration:none;
  border-bottom:1px solid #d9c3ae;padding-bottom:1px}
.detail-back:hover{border-color:var(--accent)}
@media (max-width:820px){
  .detail{grid-template-columns:1fr;padding-top:6rem}
}