/* 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}

/* 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)}
.front .hero h1{font:400 clamp(3.2rem,7vw,5.8rem)/.95 var(--head, var(--display)); letter-spacing:-.01em; margin:0 0 14px}
.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 .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 .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} }
.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}
.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 .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)}