/* A writer's home: the front page and the pages around the rooms (app/tools/home.py; his picks of the comps, 2026-10-12:
   "3, with plain word", then "a", the front page; sketches/2026-10-12-a-writers-home). Worn over the writer's look, whose
   paper, ink and faces it takes (--ground, --ink, --soft, --accent, --text, --head, --plain). */
.writer-home{--measure:34rem; --rule:color-mix(in srgb,var(--ink) 18%,transparent); background:var(--ground); color:var(--ink)}
.writer-home a{color:inherit; text-decoration-thickness:1px; text-underline-offset:3px}

/* the writer's way through: their name, and the doors to their pages */
.writer-way{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 28px;
  padding:calc(22px + env(safe-area-inset-top,0px)) var(--pad) 0}
.writer-way .name{font:italic 400 1.35rem/1 var(--modern, var(--display)); text-decoration:none}
.writer-way nav{display:flex; flex-wrap:wrap; gap:6px 22px; font:500 .68rem/1.5 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em}
.writer-way nav a{text-decoration:none; color:var(--soft)}
.writer-way nav a[aria-current]{color:var(--ink); border-bottom:1px solid var(--ink)}
.writer-end{margin-top:90px; padding:26px var(--pad) 30px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:18px;
  font:500 .68rem/1.5 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft)}
.writer-end a{text-decoration:none}
.writer-end .made{display:inline-flex; align-items:center; color:var(--soft)}   /* stanza's seal, on the free plan */
.writer-end .made svg{width:18px; height:18px}

/* the front page: the name, a line, a few sentences and a face; then the work */
.front{max-width:68rem; margin:0 auto; padding:0 var(--pad); font-family:var(--text)}
.front .lab{margin:0 0 16px; font:500 .68rem/1.4 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft)}
.front .more{margin:14px 0 0; font-size:1rem}
.front .more a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.front .more a::after{content:" →"}
.front .hero{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px,6vw,80px); align-items:center;
  padding:clamp(48px,9vh,96px) 0 clamp(40px,7vh,72px)}
.front .hero.bare{grid-template-columns:minmax(0,1fr)}
/* the name on one line where it can be, stepped down only as far as its face needs, else two even lines (home.py → NAME_FIT; his pick,
   2026-10-25) */
.front .hero h1{font:400 clamp(3.2rem,7vw,5.8rem)/.95 var(--head, var(--display)); letter-spacing:-.01em; margin:0 0 14px; text-wrap:balance}
.front .hero .line{font:400 clamp(1.15rem,1.8vw,1.4rem)/1.35 var(--text); color:var(--soft); margin:0 0 26px}
.front .hero .line:has(+ .place){margin-bottom:10px}
/* the place they live, in their own words (his pick, 2026-10-13: "4a"): set as a dateline, quieter than the line */
.front .hero .place{font:500 .72rem/1.5 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft); margin:0 0 26px}
.front .hero .bio{font:400 1.12rem/1.6 var(--text); max-width:34rem; margin:0}
.front .hero .face{margin:0; justify-self:end; width:min(100%,23rem)}
.front .hero .face img{width:100%; height:auto; display:block}
.front .hero .face figcaption{margin-top:8px; font:400 .78rem/1.4 var(--text); color:var(--soft)}
.front .band{padding:clamp(34px,6vh,56px) 0; border-top:1px solid var(--rule)}
.front .cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,24px)}
.front .cards a{text-decoration:none}
.front .cards img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.front .cards img.card{aspect-ratio:1200/630}   /* a collection's card, its name on it: whole, never cropped */
.front .cards .t{display:block; margin-top:9px; font:400 1.15rem/1.3 var(--head, var(--display))}
.front .band.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,80px)}
.front .book{margin:0; font:400 1.5rem/1.3 var(--head, var(--display))}
.front .book span{display:block; margin-top:6px; font:400 1rem/1.45 var(--text); color:var(--soft)}
.front .recent{list-style:none; margin:0; padding:0; font:400 1.1rem/1.45 var(--text)}
.front .recent li{margin:0 0 12px}
.front .recent span{display:block; color:var(--soft); font-size:.98rem}
.front .quote blockquote{margin:0 auto; max-width:46rem; text-align:center; font:italic 400 clamp(1.5rem,3vw,2.2rem)/1.3 var(--display)}
.front .quote .who-said{text-align:center; margin:14px 0 0; color:var(--soft); font:400 .95rem/1.4 var(--text)}
.front .quote .who-said a{color:var(--accent)}
.front .also ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 28px; font:400 1.1rem/1.4 var(--text)}
.front .also a{color:var(--accent); text-decoration:none}
.front .also a::after{content:" →"}
@media (max-width:820px){
  .front .hero{grid-template-columns:1fr; gap:26px}
  .front .hero .face{justify-self:start; width:min(70%,16rem)}
  .front .cards{grid-template-columns:1fr 1fr}
  .front .band.two{grid-template-columns:1fr; gap:34px}
}

/* the pages around the rooms: a reading page in the look */
.writer-page{max-width:var(--measure); margin:0 auto; padding:clamp(54px,10vh,96px) var(--pad) 0; font:400 1.12rem/1.6 var(--text)}
.writer-page .kicker{display:block; font-variant-caps:all-small-caps; letter-spacing:.18em; color:var(--accent); margin:0 0 8px}
.writer-page h1{font:400 clamp(2.4rem,5vw,3.6rem)/1.02 var(--head, var(--display)); margin:0 0 28px}
.writer-page h2{font:400 1.45rem/1.2 var(--head, var(--display)); margin:46px 0 14px}
.writer-page p{margin:0 0 1em}
.writer-page .soft{color:var(--soft)}
.writer-page .portrait{float:right; width:min(36%,12.5rem); margin:6px 0 14px 24px}
.writer-page .portrait img{display:block; width:100%; height:auto}
.writer-page .portrait figcaption{margin-top:7px; font:italic 400 .78rem/1.35 var(--text); color:var(--soft)}
@media (max-width:640px){ .writer-page .portrait{float:none; width:72%; margin:0 0 20px} }
/* her page of recordings (step 114; stanza-69's mock, mock.css → .heard): each in her order, a rule between, her line beneath past the button */
.writer-page .heard{list-style:none; margin:30px 0 0; padding:0; max-width:40rem}
.writer-page .heard li{padding:22px 0 24px; border-top:1px solid var(--rule)}
.writer-page .heard li:last-child{border-bottom:1px solid var(--rule)}
.writer-page .heard .said{margin:12px 0 0 56px; font:400 1rem/1.5 var(--text); color:var(--soft)}
.writer-page .heard .st-player{max-width:none}
.writer-page .heard .st-player:not(.on) + .said{margin-left:0}
@media (max-width:820px){ .writer-page .heard .said{margin-left:0} }
.writer-page .voiced-about{margin:26px 0 0; max-width:30rem; padding-top:14px; border-top:1px solid var(--rule)}   /* a recording on About (step 113) */
.writer-page .voiced-about .st-player{max-width:none}
.writer-page .lengths{clear:both; margin-top:42px; padding:18px 20px; border:1px solid var(--rule); border-radius:3px}
.writer-page .lengths h2{margin:0 0 10px; font-size:1.1rem}
.writer-page .lengths .n{font:500 .6rem/1.3 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft); display:block; margin:14px 0 4px}
.writer-page .lengths p{font-size:1rem}
/* Books with covers (his picks, 2026-10-14), as the books move draws them: rows that fit the count; one book large, as the writer
   chooses it: in its cover's colors (a band of them, set on .books), as a title page, or side by side */
.writer-page:has(.books){max-width:min(64rem, 100%)}
.writer-home:has(.books.one-color){overflow-x:clip}
.writer-page .books .cover{display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; background:var(--rule)}
.writer-page .books .about > *{display:block}
.writer-page .books .year{color:var(--soft); font-size:.92em}
.writer-page .books .imprint, .writer-page .books .note{color:var(--soft); font-size:.95rem; line-height:1.45}
.writer-page .books .note{font-style:italic}
.writer-page .books .t{font-size:1.15rem; line-height:1.3}
.writer-page .books .there{color:var(--accent); font-size:.95rem}
/* a title that opens the book whole, page by page (Whitman's, 2026-10-14: "The title is the link"): no underline until pointed at */
.writer-page .books .t a{color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color 120ms linear}
.writer-page .books .t a:is(:hover, :focus-visible){border-bottom-color:var(--accent); outline:none}
.writer-page .credits + .credits{margin-top:6px}
.writer-page .covers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 34px; align-items:start}
.writer-page .covers.pair{max-width:40rem; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 40px}
.writer-page .covers .book{display:grid; grid-row:span 2; grid-template-rows:subgrid; gap:14px 0; margin:0}
.writer-page .covers :is(.cover, .leaf){grid-row:1}
.writer-page .covers .about{grid-row:2}
/* a book's back, turned to from its cover (his words, 2026-10-14: "flip to the alternate image" · "Yes, Its back"), as the verso move
   turns a picture (moves.css): about its own middle, a cross-fade under reduced motion; turned while *Turn over* holds the focus */
.writer-page .books .leaf{position:relative; display:block}
.writer-page .books .faces{display:grid; transform-style:preserve-3d; transform:perspective(2400px) rotateY(0deg); transition:transform 560ms cubic-bezier(.45,.05,.3,1)}
.writer-page .books .face{grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.writer-page .books .face.back{transform:rotateY(180deg)}
.writer-page .books .leaf:not(.opens):has(.turn-over:focus) .faces{transform:perspective(2400px) rotateY(180deg)}
.writer-page .books :is(.turn-over, .turn-back){position:absolute; left:10px; bottom:10px; padding:7px 10px 6px; border-radius:2px; cursor:pointer;
  background:color-mix(in srgb,var(--ground) 92%,transparent); color:var(--ink); font:500 .62rem/1 var(--plain, var(--text)); letter-spacing:.2em;
  text-transform:uppercase; transition:opacity 160ms linear; -webkit-tap-highlight-color:transparent}
.writer-page .books :is(.turn-over, .turn-back):focus:not(:focus-visible){outline:none}
.writer-page .books .turn-back, .writer-page .books .leaf:has(.turn-over:focus) .turn-over{opacity:0; pointer-events:none}
.writer-page .books .leaf:has(.turn-over:focus) .turn-back{opacity:1; pointer-events:auto}
/* a book's title page beneath its cover, the cover opened at its spine onto it (his pick, 2026-10-14: "Two kinds for a book"):
   it swings open about its left edge, as a book's does, and is gone once it stands edge-on (moves.py → opened) */
.writer-page .books .leaf.opens .faces{transform:none; transform-style:flat}   /* flat: the cover drawn over the page, never through it */
.writer-page .books .leaf.opens .face.lid{transform-origin:0 50%; transform:perspective(1600px) rotateY(0deg); transition:transform 620ms cubic-bezier(.45,.05,.3,1), opacity 0s}
.writer-page .books .leaf.opens:has(.turn-over:focus) .face.lid{transform:perspective(1600px) rotateY(-88deg); opacity:0; transition:transform 620ms cubic-bezier(.45,.05,.3,1), opacity 0s linear 600ms}
@media (prefers-reduced-motion:reduce){
  .writer-page .books .faces, .writer-page .books .leaf:has(.turn-over:focus) .faces{transition:none; transform:none}
  .writer-page .books .face{backface-visibility:visible; -webkit-backface-visibility:visible; transition:opacity 200ms linear}
  .writer-page .books .face.back{transform:none; opacity:0}
  .writer-page .books .leaf:has(.turn-over:focus) .face.back{opacity:1}
  .writer-page .books .leaf:not(.opens):has(.turn-over:focus) .face:not(.back){opacity:0}
  .writer-page .books .leaf.opens .face.lid, .writer-page .books .leaf.opens:has(.turn-over:focus) .face.lid{transform:none; transition:opacity 200ms linear}
  .writer-page .books .leaf.opens:has(.turn-over:focus) .face.lid{opacity:0}
}
.writer-page .credits{margin:64px 0 0; max-width:44rem; font:italic 400 .82rem/1.5 var(--text); color:var(--soft)}
.writer-page .one .book{display:grid; margin:0}
.writer-page .one .year{font:500 .72rem/1.3 var(--plain, var(--text)); letter-spacing:.2em; text-transform:uppercase}
.writer-page .one .t{font-size:clamp(2.2rem,4.2vw,3.4rem); line-height:1.08; margin:14px 0 18px}
.writer-page .one .imprint, .writer-page .one .note{font-size:1.12rem; line-height:1.5}
.writer-page .one .there{display:inline-block; margin-top:22px; font-size:1.05rem}
.writer-page .one-page .book{justify-items:center; text-align:center; gap:clamp(28px,5vh,48px)}
.writer-page .one-page .cover{width:auto; height:min(66vh,36rem); max-width:100%}
.writer-page .one-page .about{max-width:34rem}
.writer-page :is(.one-side, .one-color) .book:has(.cover){grid-template-columns:minmax(0,min(28rem,48vh)) minmax(0,1fr); gap:0 clamp(32px,5vw,72px); align-items:center}
.writer-page :is(.one-side, .one-color) .about{max-width:30rem}
.writer-page .one-color{background:var(--ground); color:var(--ink); margin:0 calc(50% - 50vw); padding:clamp(48px,8vh,90px) calc(50vw - 50%)}
@media (max-width:640px){
  .writer-page .covers, .writer-page .covers.pair{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 20px}
  .writer-page .one-page .cover{height:auto; width:78%}
  .writer-page :is(.one-side, .one-color) .book:has(.cover){grid-template-columns:minmax(0,1fr); gap:30px}
  .writer-page :is(.one-side, .one-color) .cover{width:78%}
}
.writer-page .list{list-style:none; margin:0; padding:0}
.writer-page .list li{padding:14px 0; border-top:1px solid var(--rule)}
.writer-page .list li:last-child{border-bottom:1px solid var(--rule)}
.writer-page .list .t{display:block; font-size:1.15rem}
.writer-page .list .meta{display:block; color:var(--soft); font-size:.98rem}
.writer-page .list .meta a{color:var(--accent)}
.writer-page .list .year{display:block; font:500 .72rem/1.4 var(--plain, var(--text)); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-bottom:3px}
/* readings (his words, 2026-10-14: "to encourage participation" · "Build it"): those to come first, each with where to find out more
   and Add to calendar; those past beneath, folded while any are to come */
.writer-page .ahead, .writer-page .past{margin:0 0 clamp(36px,6vh,56px)}
.writer-page :is(.ahead, .past) .lab, .writer-page .past > summary{display:block; margin:0 0 14px; font:500 .72rem/1.4 var(--plain, var(--text)); letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.writer-page .past > summary{cursor:pointer; list-style:none}
.writer-page .past > summary::-webkit-details-marker{display:none}
.writer-page .past > summary::after{content:" +"}
.writer-page .past[open] > summary::after{content:" −"}
.writer-page .ahead .year{color:var(--accent)}
/* a few words above a list of readings, kept quiet so the readings lead (his words, 2026-10-14: "a different type treatment that frees up
   some of that screen real estate and puts the focus on the content below"): small, italic, soft, as a cover's credit is */
.writer-page :is(.ahead, .past) .intro{max-width:32rem; margin:-4px 0 16px; font:italic 400 .9rem/1.5 var(--text); color:var(--soft)}
.writer-page :is(.ahead, .past) .intro i{font-style:normal}   /* a book's name upright in an italic line */
.writer-page .list .meta.note{font-style:italic}
.writer-page .ahead .t{font-size:1.3rem}
.writer-page .list .go{display:flex; gap:18px; margin-top:8px; font:500 .72rem/1.4 var(--plain, var(--text)); letter-spacing:.14em; text-transform:uppercase}
.writer-page .list .go a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
/* the next reading on the front page, under the bio */
.front .next{margin:22px 0 0; font-size:1.02rem; line-height:1.45}
.front .next .lab{display:block; margin:0 0 4px}
.front .next a{color:var(--ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.front .next a::after{content:" →"; color:var(--accent)}
.writer-page .year{display:block; font:500 .6rem/1.3 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft); margin-bottom:3px}
.writer-page .praise{margin:0 0 36px}
.writer-page .praise blockquote{margin:0; font:italic 400 1.5rem/1.35 var(--text)}
.writer-page .praise.lead blockquote{font:italic 400 clamp(1.7rem,3.4vw,2.3rem)/1.25 var(--modern, var(--display))}
.writer-page .praise .who{margin-top:10px; font-variant-caps:all-small-caps; letter-spacing:.1em; color:var(--soft)}
.writer-page .praise .who i{font-variant-caps:normal; letter-spacing:0}
.writer-page .note{font-size:.98rem; color:var(--soft)}
/* a room read aloud (home.py; its reading at its foot, reading.css): marked on its card, and the Readings page holding them all, first */
.front .cards .aloud{display:block; margin-top:4px; font:500 10px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.writer-page .aloud-list{margin:0 0 56px}
.writer-page .aloud-films{display:flex; flex-wrap:wrap; gap:32px 40px; margin-top:20px}
.writer-page .aloud-films figure{margin:0; display:grid; gap:14px; width:clamp(118px,12vw,160px)}
.writer-page .aloud-films figcaption{display:grid; gap:6px}
.writer-page .aloud-films figcaption i{font:italic 400 1.35rem/1.2 var(--head, var(--display))}
.writer-page .aloud-films figcaption span{font:500 10.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.writer-page .aloud-films figcaption a{color:var(--ink); justify-self:start}
.writer-page .aloud-list .lab{display:block; margin:0 0 14px; font:500 .72rem/1.4 var(--plain, var(--text)); letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.writer-page .aloud-list .intro{max-width:32rem; margin:-4px 0 16px; font:italic 400 .9rem/1.5 var(--text); color:var(--soft)}
/* the events lead and the recordings sit beside them, small (his words, 2026-11-01, about 8:56 pm, of Whitman's Readings: "so they don't
   occupy the prime real estate that should be taken up by the upcoming current events"; his pick "2", side by side at a desk; home.py →
   readings two): Coming up and Past readings in the main column from the top, the recordings in a narrow column at its right at about
   half their size, each still beside its words, its play button and its running time kept; on a phone the events first, the recordings
   after them */
.writer-page .aloud-side > section{margin:0 0 44px}
.writer-page .aloud-side .aloud-films{display:grid; gap:24px; margin-top:16px}
.writer-page .aloud-side .aloud-films figure{width:auto; grid-template-columns:80px minmax(0,1fr); gap:0 16px; align-items:start}
.writer-page .aloud-side .reading-still{width:80px; box-shadow:0 10px 22px -14px rgba(0,0,0,.55)}
.writer-page .aloud-side .reading-still .play{width:30px; height:30px; bottom:9px; font-size:11px; padding-left:2px}
.writer-page .aloud-side .aloud-films figcaption{gap:6px; align-content:start; padding-top:2px}
.writer-page .aloud-side .aloud-films figcaption i{font-size:1.1rem}
.writer-page .aloud-side .aloud-films figcaption span{font-size:9.5px}
.writer-page .aloud-side .aloud-films figcaption a{font-size:.95rem}
.writer-page .aloud-side .intro{font-size:.84rem}
.writer-page .aloud-side .st-title{white-space:normal; overflow:visible}   /* a poem's title whole in the narrow column, turned over */
.writer-page .aloud-side .voiced-list .from i{font-size:.92rem}
@media (min-width:960px){
  .writer-page:has(> .readings.two){max-width:calc(var(--measure) + 19rem)}
  .writer-page .readings.two{display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:0 4rem; align-items:start}
}
/* the poems a writer reads aloud to readers, among Readings (step 112; stanza-69's mock, mock.css → .heard): each its player (moves.css →
   .st-player), a rule between, and the way to its room beneath, clear of the button (42px and the gap); without the script, at the left */
.writer-page .voiced{margin:0 0 clamp(36px,6vh,56px)}
.writer-page .voiced .lab{display:block; margin:0 0 14px; font:500 .72rem/1.4 var(--plain, var(--text)); letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.writer-page .voiced-list{list-style:none; margin:0; padding:0; max-width:40rem}
.writer-page .voiced-list li{padding:20px 0 22px; border-top:1px solid var(--rule)}
.writer-page .voiced-list li:last-child{border-bottom:1px solid var(--rule)}
.writer-page .voiced-list .st-player{max-width:none}
.writer-page .voiced-list .from{display:inline-block; margin:12px 0 0 56px; font:500 .68rem/1.4 var(--plain, var(--text)); text-transform:uppercase;
  letter-spacing:.16em; color:var(--soft); text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent)}
.writer-page .voiced-list .from i{font:italic 400 1.02rem/1 var(--text); text-transform:none; letter-spacing:0; color:var(--ink)}
.writer-page .voiced-list .st-player:not(.on) + .from{margin-left:0}

/* a writer's home as he chose it (step 82; his yes to the design's three rows, 2026-10-19; stanza-36's comps): the seal with its words;
   a picture of their own beside the bio; one piece alone set wide; and a home with no bio and no picture set as a title page, the name
   and the line centered and large, the work beneath, the name said once */
.writer-end .made{gap:8px; text-transform:none; letter-spacing:.02em; font:italic 400 .9rem/1 var(--text)}
.writer-end .made svg{width:16px; height:16px}
.front .hero .face.own img{box-shadow:0 18px 40px -26px rgba(0,0,0,.5)}   /* theirs, never Whitman's portrait */
.front .cards.one{grid-template-columns:minmax(0,34rem)}
.front .cards img.card{box-shadow:0 14px 30px -18px rgba(0,0,0,.42); outline:1px solid color-mix(in srgb,var(--ink) 10%,transparent); outline-offset:-1px}
.front .hero.title{min-height:calc(66vh - 20px); display:grid; place-content:center; text-align:center; padding:clamp(40px,8vh,80px) 0}
.front .hero.title h1{font-size:clamp(3.4rem,8vw,6.6rem)}
.front .hero.title .line{margin:0}
.front .hero.title .place{margin:12px 0 0}
.front .band.after-title{border-top:0; display:grid; justify-items:center}
.front .band.after-title .lab{text-align:center}
.front .band.after-title .cards{justify-self:stretch}
.front .band.after-title .cards.one{justify-self:center; width:min(100%,34rem); grid-template-columns:minmax(0,1fr)}
.writer-home:has(.hero.title) .writer-way .name{visibility:hidden}
.writer-home:has(.hero.title) .writer-way:not(:has(nav a + a)){display:none}
@media (max-width:820px){ .front .cards.one{grid-template-columns:minmax(0,1fr)} .front .hero.title{min-height:calc(52vh - 40px)} }

/* the openings (step 97; his yes, 2026-10-25: "on the home page, I like the options as rendered" · "add type and picture";
   research/2026-10-25-writers-presence.md, parts 4 and 5; app/tools/home.py → opening): the home's first screen composed one way of seven,
   on the look's own paper, inks and faces, so any opening goes with any look. The front goes on beneath it, without what it has shown */
.writer-main{display:block}
.opening{position:relative; --h:max(540px, calc(100svh - var(--wayH, 64px)))}
.opening a{color:inherit}
.opening [hidden]{display:none !important}
.opening .lab{font:500 .66rem/1.4 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft); margin-right:.6em}
.opening .next{font:400 .98rem/1.45 var(--text); color:var(--soft); margin:0}
.opening .next a{text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent)}
.opening .line i{font-style:normal}   /* a title in an italic line stands upright */
.writer-main .front .hero{padding-top:clamp(40px,7vh,72px)}
.writer-home:has(.opening:is(.op-face, .op-window, .op-index, .op-lines, .op-type, .op-picture)) .writer-way .name{visibility:hidden}   /* said once, in the opening */

/* the face: their portrait at full height, flush to the right and the foot; the name at the size of a poster */
.op-face{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:var(--h); height:var(--h); overflow:hidden}
.op-face .who{display:flex; flex-direction:column; justify-content:flex-end; gap:22px; padding:0 var(--pad) clamp(30px,6.5vh,64px)}
.op-face .name{font:400 clamp(4.6rem,13.2vw,13rem)/.84 var(--head, var(--display)); letter-spacing:-.025em; margin:0 0 0 -.05em}
.op-face .line{font:italic 400 clamp(1.1rem,1.6vw,1.45rem)/1.35 var(--text); color:var(--soft); margin:0; max-width:38rem}
.op-face .line .place{display:block; margin-top:8px; font:500 .7rem/1.5 var(--plain, var(--text)); font-style:normal; text-transform:uppercase; letter-spacing:.16em}
.op-face .who .next{max-width:34rem; margin-top:-4px}
.op-face .pic{position:relative; margin:0; height:var(--h)}
.op-face .pic img{display:block; height:var(--h); width:auto; max-width:62vw; object-fit:cover}
.op-face .pic figcaption{position:absolute; right:14px; bottom:12px; font:400 .7rem/1 var(--text); color:rgba(243,238,227,.62)}
@media (max-width:820px){   /* a phone: the face fills the screen's height, the name on the picture at its foot; the line beneath, on the paper */
  .op-face{grid-template-columns:1fr; grid-template-rows:auto auto; height:auto; overflow:visible}
  .op-face .pic{grid-area:1/1; height:min(74svh, 640px)}
  .op-face .pic img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:54% 16%}
  .op-face .pic figcaption{top:10px; bottom:auto}
  .op-face .who{display:contents}
  .op-face .name{grid-area:1/1; align-self:end; z-index:1; margin:0 0 18px 16px; font-size:clamp(3.6rem,20vw,5.4rem); line-height:.82; color:#f3eee3;
    text-shadow:0 1px 18px rgba(0,0,0,.35)}
  .op-face .line{grid-area:2/1; padding:20px var(--pad) 0}
  .op-face .who .next{grid-area:3/1; margin:0; padding:14px var(--pad) 0}
}

/* words first: a passage of their own, as large as the screen allows, the longest line kept whole; signed beneath */
.op-words{min-height:var(--h); display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); box-sizing:border-box}
.op-words .passage{margin:0; font-family:var(--head, var(--display)); font-weight:400; font-size:clamp(2.2rem,5.4vw,5.5rem); line-height:1.08; letter-spacing:-.012em}
.op-words .passage .l{display:block; padding-left:1.1em; text-indent:-1.1em}
.op-words .passage .l.hang{text-indent:-1.42em}   /* the parenthesis hung in the margin, so the letters align */
.op-words .sign{margin:clamp(26px,5vh,48px) 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px}
.op-words .sign .who{font:400 clamp(1.5rem,2.4vw,2.1rem)/1.1 var(--head, var(--display))}
.op-words .sign .who::before{content:"— "; color:var(--soft)}
.op-words .sign .src{font:400 1.05rem/1.3 var(--text); color:var(--soft)}
.op-words > .next{position:absolute; left:var(--pad); bottom:clamp(18px,3.5vh,34px)}
@media (max-width:820px){ .op-words{justify-content:flex-start; padding-top:clamp(40px,9vh,90px)} .op-words .passage{line-height:1.06} .op-words > .next{position:static; margin-top:28px} }

/* the window: one picture in a round window on a field of one color, the home's own unless it has one of its own; scrolled, it opens
   (the runway only where the script runs and motion is welcome: without it, the window stands still on its first screen) */
.op-window{--field:var(--ground); --field-ink:var(--ink); margin-top:calc(-1 * var(--wayH, 64px)); height:max(540px, 100svh)}
.op-window.moving{height:calc(100svh + 120vh)}
.writer-home:has(.op-window) .writer-way{position:relative; z-index:2}
.writer-home:has(.op-window[style]) .writer-way{color:var(--field-ink)}
.op-window .stage{position:sticky; top:0; height:max(540px, 100svh); overflow:hidden; display:grid; grid-template-rows:auto 1fr auto;
  justify-items:center; padding-top:var(--wayH, 64px); box-sizing:border-box; color:var(--field-ink); background:var(--field)}
.op-window .head{text-align:center; padding:0 var(--pad); opacity:calc(1 - var(--p, 0) * 3)}
.op-window .name{font:400 clamp(3.2rem,6.4vw,6.2rem)/.95 var(--head, var(--display)); margin:0; letter-spacing:-.01em}
.op-window .line{font:italic 400 clamp(1.05rem,1.5vw,1.3rem)/1.35 var(--text); margin:10px 0 0; color:color-mix(in srgb, var(--field-ink) 70%, transparent)}
.op-window .hole{align-self:center; width:min(54vh, 80vw, 520px); aspect-ratio:1}
.op-window .win{display:block; position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; will-change:transform; transform-origin:50% 50%}
.op-window .win img{display:block; width:100%; height:100%; object-fit:cover}
.op-window.moving .win img{position:absolute; max-width:none; will-change:transform}
.op-window .foot{text-align:center; padding:0 var(--pad) clamp(18px,4vh,38px); opacity:calc(1 - var(--p, 0) * 3)}
.op-window .place{font:500 .7rem/1.5 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; margin:0 0 6px;
  color:color-mix(in srgb, var(--field-ink) 72%, transparent)}
.op-window :is(.next, .lab){color:color-mix(in srgb, var(--field-ink) 72%, transparent)}
.op-window .enter{position:absolute; left:var(--pad); bottom:clamp(24px,6vh,60px); margin:0; opacity:calc((var(--p, 0) - .78) * 5); pointer-events:none}
.op-window .enter a{pointer-events:auto; text-decoration:none; color:#f6f2ea; display:grid; gap:16px; text-shadow:0 1px 18px rgba(0,0,0,.35)}
.op-window .enter .t{font:400 clamp(2rem,4.4vw,4rem)/1 var(--head, var(--display))}
.op-window .enter .go{font:500 .74rem/1.4 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em}

/* the index: every room and essay a line, a strip of its picture beside it, ruled; the work is the first thing seen */
.op-index{padding:clamp(4px,1vh,12px) var(--pad) clamp(30px,6vh,60px); min-height:var(--h); box-sizing:border-box}
:is(.op-index, .op-lines) .head{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:10px 48px; margin:0 0 clamp(18px,3.5vh,34px)}
:is(.op-index, .op-lines) .name{font:500 clamp(3rem,6.2vw,5.8rem)/.9 var(--head, var(--display)); letter-spacing:-.03em; margin:0}
:is(.op-index, .op-lines) .aside{padding-bottom:.4em}
:is(.op-index, .op-lines) .line{font:400 clamp(1rem,1.3vw,1.15rem)/1.4 var(--text); color:var(--soft); margin:0 0 6px}
:is(.op-index, .op-lines) .place{font:500 .68rem/1.5 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft); margin:0 0 6px}
.opening .rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.opening .rows li{border-bottom:1px solid var(--rule)}
.opening .rows a{display:grid; grid-template-columns:3.2rem minmax(0,1fr) 9rem clamp(12rem,24vw,22rem); align-items:center; gap:0 22px;
  padding:clamp(7px,1.1vh,11px) 0; text-decoration:none}
.opening .rows .n{font:500 .78rem/1 var(--plain, var(--text)); color:var(--soft); font-variant-numeric:tabular-nums}
.opening .rows .t{font:400 clamp(1.6rem,2.75vw,2.6rem)/1.08 var(--head, var(--display)); letter-spacing:-.015em}
.opening .rows .k{font:500 .64rem/1.3 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.14em; color:var(--soft); text-align:right}
.opening .rows .strip{display:block; height:clamp(34px,4.6vh,44px); overflow:hidden; transition:height .35s ease}
.opening .rows .strip img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92)}
.opening .rows a:is(:hover, :focus-visible) .strip{height:clamp(110px,16vh,150px)}
.opening .rows a:hover .t{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.12em}
.opening .rows .first{font:italic 400 clamp(1.05rem,1.45vw,1.3rem)/1.35 var(--text); color:var(--soft); transition:color .2s ease}
.opening .rows a:is(:hover, :focus-visible) .first{color:var(--ink)}
/* among pictures, a room without one: its first line in the strip's place, and nothing opens beneath it */
.opening .rows .strip.bare{display:flex; align-items:center; white-space:nowrap}
.opening .rows .strip.bare .first{overflow:hidden; text-overflow:ellipsis}
.opening .rows a:is(:hover, :focus-visible) .strip.bare{height:clamp(34px,4.6vh,44px)}
/* without a picture in any of them, a contents page: the title and its first line side by side on one baseline, what it holds at the end;
   the first lines in one column just past the longest title (the rows share the list's columns) */
.opening .rows.words{display:grid; grid-template-columns:3.2rem fit-content(46%) minmax(0,1fr) auto}
.opening .rows.words li{grid-column:1/-1; display:grid; grid-template-columns:subgrid}
.opening .rows.words a{grid-column:1/-1; grid-template-columns:subgrid; align-items:baseline; padding:clamp(12px,2.1vh,20px) 0}
.opening .rows.words .t{font-size:clamp(1.8rem,3.1vw,3rem)}
.opening .rows.words .first{padding-left:clamp(10px,2.6vw,44px)}
@media (max-width:820px){
  :is(.op-index, .op-lines) .head{grid-template-columns:1fr}
  .opening .rows a{grid-template-columns:2rem minmax(0,1fr); gap:6px 12px; padding:12px 0}
  .opening .rows .k{grid-column:2; text-align:left; order:3}
  .opening .rows .strip{grid-column:1/-1; order:4; height:46px}
  .opening .rows .t{font-size:1.55rem}
  .opening .rows.words, .opening .rows.words li{display:block}
  .opening .rows.words a{grid-template-columns:2rem minmax(0,1fr); padding:14px 0 16px}
  .opening .rows.words .t{font-size:1.75rem}
  .opening .rows.words .first{grid-column:2; order:3; padding-left:0}
  .opening .rows.words .k{order:4}
  .opening .rows a:is(:hover, :focus-visible) .strip.bare{height:46px}
}

/* the poem and first lines (step 110; his "add both", 2026-10-26, 12:11 pm): the work itself first, the rooms below as the index lists them */
.writer-home .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.opening .below{padding:clamp(30px,6vh,60px) var(--pad) 0}
.opening .below > .lab{display:block; margin:0 0 14px}
.op-lines .below{padding-left:0; padding-right:0}

/* the poem: one whole poem on the first screen, in the writer's type, as large as the screen allows with every line whole (the
   opening's script sets --fs); the name small in the way through's corner; where it is from beneath it, and room for their voice */
.op-poem .stage{min-height:var(--h); display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:clamp(10px,2vh,24px) var(--pad) clamp(28px,5vh,52px); box-sizing:border-box}
.op-poem .piece{margin:0; display:grid; gap:clamp(18px,3.4vh,34px); justify-items:start; width:max-content; max-width:100%}
/* its title set apart as the look sets its headings (his pick, 2026-10-26, 7:33 pm: "the head"; research/2026-10-26-the-poem-and-its-
   title.md): the look's heading face, weight and style (--head-weight, --head-style and --head-ls beside its faces, in its own stylesheet,
   since a writer's published home carries no data-look), about 1.7 times the poem's size, in ink, a clear space beneath; the script fits
   the title and the lines together. A face the writer chose over the look sets it in that face's own title weight, upright (faces.css) */
.op-poem .title{font:var(--head-style, normal) var(--head-weight, 400) calc(var(--fs, 2.4rem) * 1.7)/1.04 var(--head, var(--display));
  letter-spacing:var(--head-ls, -.015em); margin:0 0 .1em; text-wrap:balance}
:root[data-face]:not([data-face=""]) .op-poem .title{font-style:normal; font-weight:var(--title-weight, 400); letter-spacing:var(--title-ls, -.015em)}
.op-poem .lines{font-family:var(--text); font-weight:400; font-size:var(--fs, 2.4rem); line-height:1.32; letter-spacing:-.005em}
.op-poem .lines .verse + .verse{margin-top:.7em}
.op-poem.measure .lines .verse > span{white-space:pre}
@media (min-width:821px){ .op-poem .lines .verse > span{white-space:pre} }   /* at a window every line whole, as the script fits it; a phone turns a long one over, hung */
.op-poem .under{display:flex; flex-wrap:wrap; align-items:center; gap:14px 36px; width:100%}
.op-poem .from{margin:0; font:500 .68rem/1.4 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft)}
.op-poem .from a{text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent)}
.op-poem .from .lab{margin:0}
.op-poem .from i{font:italic 400 1.02rem/1 var(--text); text-transform:none; letter-spacing:0; color:var(--ink)}
.op-poem .under .st-player{flex:1 1 20rem; max-width:26rem}   /* the poet's voice beside where it is from (step 112; the mock's) */
@media (max-width:820px){ .op-poem .stage{place-items:start; padding-top:clamp(36px,8vh,70px)} }

/* first lines: the old book's back matter as the front door, every first line by its letters, each a door to its poem, its room where
   the page number stood; two columns at a window, one on a phone */
.op-lines{min-height:var(--h); padding:clamp(4px,1vh,12px) var(--pad) clamp(30px,6vh,60px); box-sizing:border-box}
.op-lines .firsts-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px solid var(--ink); padding-top:10px; margin:0 0 4px}
.op-lines .firsts-h .lab{margin:0}
.op-lines .firsts{list-style:none; margin:0; padding:0; columns:2; column-gap:clamp(36px,5vw,80px)}
.op-lines .firsts li{break-inside:avoid; border-bottom:1px solid var(--rule)}
.op-lines .firsts a{display:flex; align-items:baseline; gap:14px; padding:clamp(6px,1.05vh,10px) 0; text-decoration:none}
.op-lines .firsts .f{flex:1 1 auto; min-width:0; font:400 clamp(1.08rem,1.42vw,1.32rem)/1.3 var(--text)}
.op-lines .firsts .r{flex:none; font:500 .62rem/1.3 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.14em; color:var(--soft)}
.op-lines .firsts a:is(:hover, :focus-visible) .f{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.14em}
@media (max-width:820px){ .op-lines .firsts{columns:1} .op-lines .firsts a{flex-direction:column; align-items:flex-start; gap:3px} }

/* type as image: the name, or words of their own, at the size of a wall, the longest line run past the screen's right edge so the
   screen crops it; still words, read as words; the line, the place and Coming up small above it */
.op-type{height:var(--h); overflow:hidden; display:grid; grid-template-rows:auto 1fr; padding:clamp(10px,2vh,22px) 0 0; box-sizing:border-box}
.op-type .aside{padding:0 var(--pad); display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 28px; max-width:64rem}
.op-type .aside .name{font:400 clamp(1.5rem,2.2vw,2rem)/1.1 var(--head, var(--display)); margin:0; flex-basis:100%}
.op-type .line{font:italic 400 clamp(1.05rem,1.5vw,1.3rem)/1.35 var(--text); color:var(--soft); margin:0}
.op-type .place{font:500 .7rem/1.5 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; color:var(--soft); margin:0}
.op-type .src{font:400 1rem/1.3 var(--text); color:var(--soft); margin:0}
.op-type .next{flex-basis:100%; margin-top:4px}
.op-type .big{align-self:end; margin:0 0 .02em -.055em; padding:0; white-space:nowrap; font:400 clamp(6rem,21vw,30rem)/.8 var(--head, var(--display));
  letter-spacing:-.035em; color:var(--ink)}
.op-type p.big{letter-spacing:-.02em; line-height:.9; margin:0 0 .06em; padding-left:var(--pad); font-size:clamp(3rem,9vw,12rem)}
.op-type .big .hang{margin-left:-.3em}   /* a parenthesis or a quotation mark hung in the margin, so the letters align */
:is([data-look=compositor], [data-look=lapidary]) .op-type .big{text-transform:uppercase; letter-spacing:-.01em}   /* a look whose heads are capitals */
@media (max-width:820px){ .op-type{height:min(78svh, 680px)} .op-type .aside{gap:4px 16px} }

/* the picture: their own pictures fill the first screen under the way through, one giving way to the next (a slow fade, never where
   less motion is asked); the name small at the foot on a narrow, eased fade of dark, never a band; the room each leads to named */
.writer-home:has(.op-picture) .writer-way{position:relative; z-index:3; color:#f4f0e8}
.writer-home:has(.op-picture) .writer-way nav a{color:rgba(244,240,232,.82)}
.op-picture{margin-top:calc(-1 * var(--wayH, 64px)); height:max(540px, 100svh); overflow:hidden; color:#f4f0e8; background:#14120f}
.op-picture::before, .op-picture::after{content:""; position:absolute; left:0; right:0; z-index:1; pointer-events:none}
.op-picture::before{top:0; height:150px; background:linear-gradient(rgba(10,9,8,.5), rgba(10,9,8,.38) 22%, rgba(10,9,8,.2) 50%, rgba(10,9,8,.07) 76%, rgba(10,9,8,0))}
.op-picture::after{bottom:0; height:260px; background:linear-gradient(rgba(10,9,8,0), rgba(10,9,8,.1) 25%, rgba(10,9,8,.3) 50%, rgba(10,9,8,.5) 75%, rgba(10,9,8,.64))}
.op-picture :is(.pics, .pic){position:absolute; inset:0}
.op-picture .pic{display:block; opacity:0; transition:opacity 2.4s ease-in-out}
.op-picture .pic.on{opacity:1}
.op-picture .pic img{width:100%; height:100%; object-fit:cover; display:block}
.op-picture .who{position:absolute; z-index:2; left:var(--pad); bottom:clamp(24px,5vh,48px); max-width:min(34rem, 60vw)}
.op-picture .name{font:400 clamp(1.6rem,2.6vw,2.4rem)/1.05 var(--head, var(--display)); margin:0; text-shadow:0 1px 14px rgba(0,0,0,.35)}
.op-picture .line{font:italic 400 clamp(1rem,1.25vw,1.15rem)/1.35 var(--text); margin:6px 0 0; color:rgba(244,240,232,.88); text-shadow:0 1px 10px rgba(0,0,0,.3)}
.op-picture .place{font:500 .66rem/1.5 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; margin:6px 0 0; color:rgba(244,240,232,.82)}
.op-picture .who .next{margin-top:14px; font-size:.92rem; color:rgba(244,240,232,.88)}
.op-picture .who .lab{color:rgba(244,240,232,.74)}
.op-picture .corner{position:absolute; z-index:2; right:var(--pad); bottom:clamp(24px,5vh,48px); text-align:right}
.op-picture .from{font:400 .98rem/1.3 var(--text); color:#f4f0e8; text-decoration:none}
.op-picture .from .k{font:500 .64rem/1 var(--plain, var(--text)); text-transform:uppercase; letter-spacing:.16em; opacity:.75}
@media (max-width:820px){
  .op-picture{height:max(520px, 88svh)}
  .op-picture .who{right:var(--pad); max-width:none; bottom:58px}
  .op-picture .corner{left:var(--pad); text-align:left; bottom:20px}
}
@media (prefers-reduced-motion: reduce){ .op-picture .pic{transition:none} .opening .rows .strip{transition:none} }