/* =====================================================================
   DEREK MICHALSKI — shared styles for every page
   Colours: --paper (page) and --ink (text). While a visitor looks at a
   photograph the page leans towards that photograph's own colour.
   ===================================================================== */
:root{ --paper:#F1F1EE; --ink:#121110; --mute:#45423e; --tint:#F1F1EE; --amt:0%;
       --bg:var(--paper); --fg:var(--ink); --m:clamp(16px,4vw,64px);
       --page:color-mix(in oklab, var(--tint) var(--amt), var(--paper)); }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:15px;line-height:1.6;
     -webkit-font-smoothing:antialiased;background:var(--paper);background:var(--page);
     transition:background-color 1.4s cubic-bezier(.3,.6,.2,1)}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.bod{font-family:"Bodoni Moda",Didot,"Bodoni 72",serif;font-weight:400}
.small{font-size:12px;letter-spacing:.02em;color:var(--mute);line-height:1.5}
.skip{position:absolute;left:-9999px} .skip:focus{left:var(--m);top:8px;z-index:50;background:var(--paper);padding:6px 10px}

/* running head */
.run{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
     padding:18px var(--m);font-size:13px;background:var(--paper);background:var(--page);
     transition:background-color 1.4s cubic-bezier(.3,.6,.2,1)}
.run a{text-decoration:none}
.run nav{display:flex;gap:clamp(14px,2.2vw,30px);flex-wrap:wrap;justify-content:flex-end}
.run nav a{color:var(--mute)} .run nav a:hover,.run nav a[aria-current="page"]{color:var(--ink)}
.run nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.folio{position:fixed;left:var(--m);bottom:18px;z-index:20;font-size:12px;color:var(--mute);pointer-events:none}

/* cover */
.cover{position:relative;height:100vh;min-height:560px;overflow:hidden}
.cover .first{position:absolute;left:calc(var(--m) - .04em);top:16vh;font-size:clamp(90px,19vw,330px);line-height:.78;letter-spacing:-.035em;white-space:nowrap}
.cover .last{position:absolute;right:var(--m);bottom:12vh;font-size:clamp(22px,2.9vw,52px);line-height:1;white-space:nowrap}
.cover .dek{position:absolute;left:52%;top:46vh;max-width:25ch;font-size:15px;line-height:1.55}
.cover .side{position:absolute;right:var(--m);top:16vh;writing-mode:vertical-rl}

/* section title pages (Photography, Paintings, Poetry) */
.title-page{position:relative;min-height:88vh;padding:0 var(--m);display:grid;align-content:end;padding-bottom:12vh;overflow:hidden}
.title-page h1{font-size:clamp(72px,16.5vw,290px);line-height:.8;letter-spacing:-.035em;margin-left:-.04em}
.title-page .dek{margin-top:10vh;max-width:34ch;font-size:16px;margin-left:auto;margin-right:8vw}

/* contents on the home page: the three parts as type */
.contents{padding:14vh var(--m) 18vh}
.contents a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:24px;text-decoration:none;
     border-top:1px solid color-mix(in oklab,var(--ink) 20%,transparent);padding:2vh 0 2.4vh}
.contents a:last-child{border-bottom:1px solid color-mix(in oklab,var(--ink) 20%,transparent)}
.contents .w{font-size:clamp(56px,11vw,190px);line-height:.9;letter-spacing:-.03em;transition:letter-spacing .6s cubic-bezier(.2,.7,.1,1)}
.contents a:nth-child(2) .w{padding-left:12vw} .contents a:nth-child(3) .w{padding-left:24vw}
.contents a:hover .w,.contents a:focus-visible .w{font-style:italic;letter-spacing:-.01em}
.contents .n{font-size:13px;color:var(--mute);text-align:right;max-width:16em}

/* plates */
.plate{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:2vw;padding:0 var(--m);
       min-height:var(--h,125vh);align-items:start;overflow:hidden}
.pic{position:relative;grid-column:var(--col);margin-top:var(--top);z-index:2}
.pic button{all:unset;display:block;width:100%;cursor:zoom-in;position:relative}
.pic button:focus-visible{outline:1px solid var(--ink);outline-offset:10px}
.pic img{width:100%;height:auto;max-height:86vh;object-fit:contain;object-position:left top}
.pic.portrait img{width:auto;max-width:100%}
.cap{position:absolute;width:14em}
.cap.right{left:calc(100% + 2vw);bottom:0}
.cap.left{right:calc(100% + 2vw);bottom:0;text-align:right}
.cap.below{left:0;top:calc(100% + 16px)}
.cap b{display:block;font-family:"Bodoni Moda",serif;font-weight:400;font-size:18px;color:var(--ink);margin-bottom:2px}
.g{position:absolute;z-index:1;pointer-events:none;color:var(--ink);line-height:.8;font-weight:400;white-space:nowrap}
.g.num{font-size:clamp(200px,36vw,620px);letter-spacing:-.04em}
.g.vert{writing-mode:vertical-rl;font-size:clamp(42px,6.4vw,110px);font-style:italic;letter-spacing:-.02em}
.g.rule{height:1px;background:var(--ink);opacity:.7}
.inter{position:relative;min-height:105vh;padding:0 var(--m);display:grid;align-content:center}
.inter p{letter-spacing:-.03em;line-height:.9}
.inter.a p{font-size:clamp(64px,13.5vw,230px)}
.inter.a span{display:block} .inter.a span:nth-child(2){padding-left:24vw;font-style:italic} .inter.a span:nth-child(3){text-align:right}
.inter.b p{font-size:clamp(36px,5.6vw,92px);font-style:italic;max-width:12em;margin-left:auto;line-height:1.02}

/* index of all works */
.index{padding:8vh var(--m) 12vh}
.index header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:9vh}
.index h2{font-size:clamp(64px,11vw,190px);line-height:.8;letter-spacing:-.03em}
.index ol{list-style:none;columns:3 17em;column-gap:4vw;counter-reset:w}
.index li{break-inside:avoid;counter-increment:w}
.index li button{all:unset;cursor:pointer;display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;width:100%;padding:7px 0}
.index li button::before{content:counter(w);font-size:12px;color:var(--mute)}
.index li button .t{font-family:"Bodoni Moda",serif;font-size:21px;line-height:1.2}
.index li button:hover .t,.index li button:focus-visible .t{font-style:italic}
.peek{position:fixed;z-index:30;width:min(300px,26vw);pointer-events:none;opacity:0;transform:translate(24px,-50%);transition:opacity .25s;
      box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.peek.on{opacity:1}

/* text pages */
.page{padding:20vh var(--m) 18vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:2vw;position:relative}
.page h2{grid-column:1 / -1;line-height:.78;letter-spacing:-.035em;margin-bottom:10vh}
.about h2{font-size:clamp(90px,22vw,380px)}
.about .essay{grid-column:7 / span 5;columns:2 17em;column-gap:2.4vw;font-size:15.5px}
.about .essay p{margin-bottom:1em;break-inside:avoid}
.about .essay p:first-child::first-letter{font-family:"Bodoni Moda",serif;float:left;font-size:4.6em;line-height:.8;padding:.06em .08em 0 0}
.about .pull{grid-column:2 / span 4;grid-row:2;font-family:"Bodoni Moda",serif;font-style:italic;font-size:clamp(26px,2.6vw,40px);line-height:1.15;align-self:start}
.contact h2{font-size:clamp(54px,11.2vw,200px)}
.contact .wrapf{grid-column:7 / span 5}
.contact .intro-line{margin-bottom:34px;max-width:40ch}

/* form */
.cform{display:grid;gap:26px;max-width:640px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.cform label{display:grid;gap:6px;font-size:13px;color:var(--mute)}
.cform input,.cform textarea{font-family:"Bodoni Moda",serif;font-size:20px;color:var(--ink);background:transparent;border:0;
     border-bottom:1px solid var(--ink);padding:6px 0;border-radius:0;resize:vertical;width:100%}
.cform input:focus,.cform textarea:focus{outline:none;border-bottom-width:2px;padding-bottom:5px}
.cform button{justify-self:start;font:inherit;font-size:14px;cursor:pointer;padding:14px 30px;border:1px solid var(--ink);background:transparent;color:var(--ink);transition:background .2s,color .2s}
.cform button:hover{background:var(--ink);color:var(--paper)}
.cform button:disabled{opacity:.5;cursor:wait}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .status{font-size:15px;min-height:1.6em}

/* poetry */
.parts{padding:6vh var(--m) 4vh;display:flex;flex-wrap:wrap;gap:0 4vw;align-items:baseline}
.parts button{all:unset;cursor:pointer;font-family:"Bodoni Moda",serif;font-size:clamp(34px,6vw,100px);line-height:1;letter-spacing:-.02em;color:var(--mute);padding:6px 0}
.parts button[aria-selected="true"]{color:var(--ink);font-style:italic}
.parts button:hover{color:var(--ink)}
.parts button:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.poems{padding:4vh var(--m) 16vh}
.poem{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2vw;padding:16vh 0}
.poem .body{grid-column:var(--pc,4 / span 6)}
.poem h3{font-family:"Bodoni Moda",serif;font-weight:400;font-size:clamp(34px,4.4vw,72px);line-height:1;letter-spacing:-.02em;margin-bottom:5vh}
.poem .text{font-family:"Bodoni Moda",serif;font-size:clamp(18px,1.45vw,23px);line-height:1.6;white-space:pre-line}
.poem .epi{font-family:"Bodoni Moda",serif;font-size:15px;font-weight:500;line-height:1.55;color:var(--mute);white-space:pre-line;margin:-2vh 0 5vh;max-width:34em}
.poem .epi em{color:var(--ink)}
.poem .date{margin-top:4vh;font-size:13px;font-style:italic;color:var(--mute)}
.toc{padding:4vh 0 8vh;border-bottom:1px solid color-mix(in oklab,var(--ink) 18%,transparent)}
.toc ol{list-style:none;columns:3 16em;column-gap:4vw;counter-reset:p}
.toc li{break-inside:avoid;counter-increment:p;display:grid;grid-template-columns:2.4em 1fr;padding:5px 0}
.toc li::before{content:counter(p);font-size:12px;color:var(--mute);padding-top:.35em}
.toc a{font-family:"Bodoni Moda",serif;font-size:19px;line-height:1.25;text-decoration:none}
.toc a:hover,.toc a:focus-visible{font-style:italic}
.poem{scroll-margin-top:60px}
.poem .pair{grid-column:2 / span 10;display:grid;grid-template-columns:1fr 1fr;gap:6vw}
.poem .pair .small{display:block;margin-bottom:2vh}
.empty{grid-column:1/-1;padding:14vh 0 8vh;max-width:30ch;font-family:"Bodoni Moda",serif;font-style:italic;font-size:clamp(26px,3vw,44px);line-height:1.2;margin-left:30vw}

footer{padding:24px var(--m) 60px;display:flex;justify-content:space-between;gap:20px}

/* viewer */
dialog#viewer{border:0;padding:0;max-width:none;max-height:none;width:100vw;height:100vh;background:#151517;color:#eee}
dialog#viewer::backdrop{background:transparent}
.viewer{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:clamp(16px,3vw,40px)}
.viewer .stage{display:grid;place-items:center;min-height:0;position:relative}
.viewer .stage{overflow:hidden}
.viewer .stage img{max-width:100%;max-height:calc(100vh - 2*clamp(16px,3vw,40px) - 56px);width:auto;height:auto;object-fit:contain;animation:vshow .4s ease}
.viewer .meta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;font-size:14px}
.viewer .meta .bod{font-size:18px}
.viewer button{all:unset;cursor:pointer;padding:6px 10px;color:#bbb}
.viewer button:hover{color:#fff}
.viewer button:focus-visible{outline:1px solid #fff}
.viewer .ctrl{display:flex;gap:6px}
@keyframes vshow{from{opacity:0}to{opacity:1}}

/* protection */
.protect,.protect *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.protect::after{content:"";position:absolute;inset:0;background:transparent;z-index:1}
body.shield .protect img,body.shield .peek{filter:blur(30px) grayscale(.4)}
@media print{ body *{visibility:hidden!important}
  body::before{content:"Printing is not available for this site.";visibility:visible;display:block;padding:40px;font:16px sans-serif;color:#000} }

@media (max-width:820px){
  .run{flex-direction:column;gap:6px} .run nav{justify-content:flex-start}
  .cover .first{top:16vh} .cover .last{bottom:16vh;font-size:7vw}
  .cover .dek{left:var(--m);top:auto;bottom:30vh}
  .contents a{grid-template-columns:1fr} .contents .n{text-align:left}
  .contents a:nth-child(2) .w{padding-left:6vw} .contents a:nth-child(3) .w{padding-left:12vw}
  .plate{display:block;min-height:0;padding:14vh var(--m) 10vh}
  .pic{width:var(--mw,80%);margin-left:var(--ml,0);margin-top:0}
  .pic.portrait{width:calc(var(--mw,80%) * .8)}
  .cap.right,.cap.left,.cap.below{position:static;text-align:left;margin-top:14px;width:auto}
  .g.vert,.g.rule{display:none}
  .inter{min-height:80vh} .inter.a span:nth-child(2){padding-left:10vw}
  .index header{display:block} .index ol{columns:1}
  .page{grid-template-columns:1fr} .page h2,.about .essay,.about .pull,.contact .wrapf{grid-column:1}
  .about .pull{grid-row:auto;margin-bottom:6vh} .about .essay{columns:1}
  .cform .row{grid-template-columns:1fr}
  .poem{display:block;padding:10vh 0} .poem .pair{grid-template-columns:1fr;gap:6vh}
  .empty{margin-left:0}
  .folio{display:none}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} }

/* poetry list and poem pages */
.poem-list{list-style:none;columns:2 22em;column-gap:5vw;counter-reset:p;padding:4vh 0 4vh}
.poem-list li{break-inside:avoid;counter-increment:p;display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;padding:9px 0;border-bottom:1px solid color-mix(in oklab,var(--ink) 12%,transparent)}
.poem-list li::before{content:counter(p);font-size:12px;color:var(--mute)}
.poem-list a{font-family:"Bodoni Moda",serif;font-size:clamp(20px,1.8vw,28px);line-height:1.2;text-decoration:none}
.poem-list a:hover,.poem-list a:focus-visible{font-style:italic}
.poem-page{padding:12vh var(--m) 10vh}
.poem-page .ret{font-size:13px}
.poem-page .ret a{color:var(--mute);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.poem-page .ret a:hover{color:var(--ink)}
.poem-page .ret.end{margin-top:6vh}
.poem-page .poem{padding:10vh 0 4vh}
.poem-page .poem .body{grid-column:4 / span 7}
.poem-page .poem h1,.poem-page .poem h2{font-weight:400;font-size:clamp(40px,5.4vw,92px);line-height:.98;letter-spacing:-.025em;margin-bottom:6vh}
.poem-page .poem .pair h1,.poem-page .poem .pair h2{font-size:clamp(30px,3.4vw,56px)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-top:12vh;padding-top:3vh;border-top:1px solid color-mix(in oklab,var(--ink) 18%,transparent)}
.pn a{display:grid;gap:4px;text-decoration:none;max-width:24em}
.pn a.nx{justify-self:end;text-align:right}
.pn .bod{font-size:clamp(18px,1.6vw,24px);line-height:1.25}
.pn a:hover .bod{font-style:italic}
@media (max-width:820px){ .poem-page .poem .body{grid-column:1} .poem-list{columns:1} .pn{grid-template-columns:1fr} .pn a.nx{justify-self:start;text-align:left} }

/* ---------- darker, firmer type for reading ---------- */
body{font-weight:450}
.poem .text,.about .essay p,.poem-list a,.index li button .t{font-weight:500}
.bod{font-weight:500}
.cover .first,.title-page h1,.contents .w,.about h2,.contact h2,.index h2,.poem-page .poem h1{font-weight:400}

/* ---------- front page stamp: Derek over MICHALSKI ART over the three parts, set as a square ---------- */
.stamp-wrap{display:grid;place-items:center;height:auto;min-height:100vh;padding:14vh var(--m) 8vh}
.stamp{width:min(76vmin,620px);aspect-ratio:1/1;margin:0}
.stamp svg{width:100%;height:100%;overflow:visible;display:block}
.stamp text{fill:var(--ink)}
.s-derek{font-family:"Bodoni Moda",serif;font-size:330px;font-weight:400}
.s-rule{fill:none;stroke:var(--ink);stroke-width:5}
.s-rule.thin{stroke-width:2}
.s-line{font-family:"Bodoni Moda",serif;font-size:104px;font-weight:500}
.s-links{font-family:"Hanken Grotesk",sans-serif;font-size:50px;font-weight:600}
.s-links a tspan{fill:var(--ink)}
.s-links a:hover tspan,.s-links a:focus tspan{fill:var(--mute);text-decoration:underline}
.s-links .dot{fill:var(--mute)}

/* ---------- photography: a black wall, each framed photograph hung in the right two-thirds ---------- */
body.wall{--paper:#0c0c0c;--ink:#f1eee8;--mute:#b9b4ab;--page:#0c0c0c;background:#0c0c0c;color:var(--ink)}
body.wall .run{background:#0c0c0c}
body.wall .index li{border-color:rgba(255,255,255,.08)}
body.wall .plate{display:grid;grid-template-columns:1fr 2fr;min-height:100vh;padding:14vh var(--m) 12vh;align-items:center;
  background:radial-gradient(ellipse 40% 44% at 66.6% 50%,#2e2d2a 0%,#181816 60%,#0c0c0c 100%)}
body.wall .pic{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;width:auto}
body.wall .pic .cap{position:static;width:auto;margin-top:34px;text-align:center}
body.wall .cap b{color:var(--ink)}
body.wall .inter p{color:var(--ink)}
body.wall footer{border-color:rgba(255,255,255,.1)}
body.wall .pic button{display:block;cursor:zoom-in}
@media (max-width:820px){
  .stamp{width:88vw}
  body.wall .plate{grid-template-columns:1fr 2fr;padding:10vh 12px 8vh;min-height:0}
  body.wall .pic{grid-column:2}
  .fr{--imgmax:52vh}
}

/* ---------- the hang: every framed photograph in the right two-thirds, the left third left empty ---------- */
body.wall .work{display:grid;grid-template-columns:1fr 2fr;min-height:100vh;padding:12vh var(--m) 10vh;align-items:center;
  background:radial-gradient(ellipse 40% 46% at 66.6% 50%,#34322e 0%,#1b1a18 58%,#0c0c0c 100%)}
body.wall .hang{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center}
body.wall .hang button{all:unset;display:block;cursor:zoom-in;position:relative}
body.wall .hang img{display:block;width:auto;height:auto;max-width:100%;max-height:78vh;
  filter:drop-shadow(14px 18px 12px rgba(0,0,0,.85)) drop-shadow(3px 5px 3px rgba(0,0,0,.7))}
body.wall .hang figcaption{margin-top:30px;text-align:center}
body.wall .hang figcaption b{font-size:19px;color:var(--ink);font-weight:400}
@media (max-width:820px){ body.wall .work{min-height:0;padding:9vh 12px 7vh} body.wall .hang img{max-height:60vh} }

/* ---------- one photograph per page: lit wall, frame in the right two-thirds, deep cast shadow ---------- */
body.wall .index li a{display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;padding:7px 0;text-decoration:none;color:inherit}
body.wall .index li a::before{content:counter(w);font-size:12px;color:var(--mute)}
body.wall .index li a .t{font-family:"Bodoni Moda",serif;font-size:21px;line-height:1.2;font-weight:500}
body.wall .index li a:hover .t,body.wall .index li a:focus-visible .t{font-style:italic}
body.wall.single .work{min-height:calc(100vh - 60px);padding:8vh var(--m) 6vh;
  background:radial-gradient(ellipse 52% 78% at 64% 40%,#5c5852 0%,#45423d 30%,#2a2825 58%,#141312 82%,#0c0c0c 100%)}
body.wall.single .hang img{max-height:76vh;
  filter:drop-shadow(.4vh .9vh .5vh rgba(0,0,0,.9)) drop-shadow(1.6vh 3.2vh 2.2vh rgba(0,0,0,.85)) drop-shadow(3.5vh 6vh 6vh rgba(0,0,0,.6))}
body.wall.single .hang figcaption{margin-top:5vh;display:flex;gap:18px;align-items:baseline;justify-content:center}
body.wall.single .hang figcaption .small{color:var(--mute)}
body.wall .wpn{padding:6vh var(--m) 10vh;border-top:1px solid rgba(255,255,255,.1)}
body.wall .wpn a{color:var(--ink)}
@media (max-width:820px){ body.wall.single .work{min-height:0;padding:6vh 12px 5vh} body.wall.single .hang img{max-height:62vh} }
body.wall .wpn{margin-top:0}
/* shadows are baked into the framed images (consistent in every browser); no rules or lines on the wall */
body.wall .hang img, body.wall.single .hang img{filter:none}
body.wall .wpn, body.wall footer, body.wall .run{border:0 !important; box-shadow:none !important}
body.wall .index li{border:0 !important}
/* one continuous lit wall behind the whole page: no band edges above or below the work */
body.wall.single{background:#0c0c0c radial-gradient(ellipse 52% 70% at 64% 42%,#5c5852 0%,#45423d 30%,#2a2825 58%,#141312 82%,#0c0c0c 100%) fixed}
body.wall.single .work, body.wall.single .run, body.wall.single footer, body.wall.single .wpn{background:transparent !important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pull-src{margin-top:-1em;margin-bottom:3em;color:var(--mute)}
.pull .pull-src{display:block;margin:1.4em 0 0;font-style:normal;font-family:"Hanken Grotesk",sans-serif;font-size:13px;line-height:1.5;max-width:30ch}

/* ================= phones and small tablets ================= */
@media (max-width:820px){
  :root{--m:20px}
  /* menu: a solid bar, name on its own line, larger tap targets */
  .run{position:sticky;top:0;flex-direction:column;align-items:flex-start;gap:6px;padding:14px var(--m) 10px;background:var(--paper,#f1efe9)}
  body.wall .run{background:#0c0c0c}
  .run nav{justify-content:flex-start;gap:4px 18px}
  .run nav a{font-size:15px;padding:6px 0}
  /* calmer vertical rhythm */
  .page{padding:12vh var(--m) 10vh;display:block}
  .title-page{min-height:auto!important;padding:14vh var(--m) 6vh}
  .title-page h1{font-size:clamp(56px,17vw,120px)}
  .contents{padding:6vh var(--m) 8vh}
  .about h2,.contact h2{font-size:clamp(56px,18vw,120px);margin-bottom:5vh}
  .about .essay{columns:1;font-size:16px;line-height:1.6}
  .index{padding:4vh var(--m) 8vh}
  .index li a .t,.index li button .t{font-size:19px}
  .index li a{padding:9px 0}
  /* a single photograph: full width, centred, no reserved left third */
  body.wall.single .work{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100svh - 90px);padding:4vh 14px 4vh}
  body.wall.single .hang{grid-column:auto;width:100%;align-items:center}
  body.wall.single .hang img{width:100%;max-width:100%;max-height:72svh;object-fit:contain}
  body.wall.single .hang figcaption{margin-top:3vh;flex-wrap:wrap;text-align:center}
  body.wall.single{background-attachment:scroll;background-image:radial-gradient(ellipse 90% 55% at 50% 40%,#5c5852 0%,#45423d 30%,#2a2825 60%,#141312 85%,#0c0c0c 100%)}
  body.wall .wpn{padding:4vh var(--m) 8vh}
  /* poems */
  .poem-page{padding-top:6vh}
  .poem .text{font-size:17px;line-height:1.65}
  .parts{padding:0 var(--m)}
  .parts button{font-size:22px;padding:6px 0}
  /* form */
  .cform input,.cform textarea{font-size:16px} /* stops iPhone zooming in */
  .cform .row{display:block}
  footer{flex-direction:column;gap:6px;padding:4vh var(--m)}
}
/* poems: quieter, book-like text size */
.poem .text{font-size:clamp(15px,1.05vw,17px);line-height:1.75;font-weight:400}
.poem .epi{font-size:13.5px}
@media (max-width:820px){ .poem .text{font-size:15px;line-height:1.7} .poem-page .poem h1{font-size:clamp(34px,10vw,52px)} }
/* mottos and quotations above a poem sit on the right, as in print */
.poem .epi{text-align:right;margin-left:auto;margin-right:0;max-width:30em}
.poem .body{display:flex;flex-direction:column}
.poem .body > h1,.poem .body > .text,.poem .body > .date{align-self:stretch}
/* poems: a sturdy book serif for reading; Bodoni stays for titles */
.poem .text,.poem .epi,.poem .date,.pair .text{font-family:"EB Garamond",Garamond,"Times New Roman",serif;color:var(--ink)}
.poem .text,.pair .text{font-size:clamp(18px,1.3vw,21px);font-weight:500;line-height:1.6;letter-spacing:.005em}
.poem .epi{font-size:16px;font-weight:500;color:var(--mute)}
.poem .epi em{color:var(--ink)}
@media (max-width:820px){ .poem .text,.pair .text{font-size:18px;line-height:1.6} .poem .epi{font-size:15px} }
/* titles at reading size: EB Garamond, calmer sizes (Bodoni only for the big section names) */
.poem-page .poem h1,.poem-page .poem h2{font-family:"EB Garamond",Garamond,serif;font-weight:500;font-size:clamp(26px,2.3vw,36px);line-height:1.2;letter-spacing:0;margin-bottom:5vh;max-width:24em}
.poem-list a,.poem-list a span,.pn .bod,.index li a .t,.index li button .t,.hang figcaption b,body.wall.single .hang figcaption b{font-family:"EB Garamond",Garamond,serif;font-weight:500;letter-spacing:0}
.poem-list a{font-size:clamp(18px,1.4vw,21px)}
.index li a .t,.index li button .t{font-size:clamp(18px,1.4vw,21px)}
.hang figcaption b{font-size:20px}
.pn .bod{font-size:clamp(17px,1.3vw,20px)}
@media (max-width:820px){ .poem-page .poem h1,.poem-page .poem h2{font-size:26px} }
/* mottos under a poem title: larger, author line the same size */
.poem .epi{font-size:clamp(18px,1.3vw,21px);line-height:1.5;color:var(--ink);margin:0 0 6vh auto}
.poem .epi em{font-size:1em}
@media (max-width:820px){ .poem .epi{font-size:17px} }