/* ==========================================================================
   home.css — styles for index.html only
   Each section below is self-contained; delete the block to remove the section.
   ==========================================================================

   TABLE OF CONTENTS
   01  Layout shell
   02  Hero
   03  Now-playing
   04  About (scattered grid)
   05  Toolstack
   06  Work list
   07  Photo strip
   08  Contact / footer
   09  Responsive (<= 900px)
   ========================================================================== */


/* -- 01 Layout shell ------------------------------------------------------ */
main { padding: 0 28px; }

section {
  position: relative;
  padding: 120px 0;
  border-bottom: 1px solid var(--line);
}
section:last-child { border-bottom: none; }


/* -- 02 Hero -------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  padding: 140px 0 80px;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
}
.hero-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: end;
}
.hero h1 {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 13vw, 220px);
  line-height: .86;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.hero h1 .it {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acc);
  text-stroke: 1.5px var(--acc);
}
.hero h1 .stack { display: block; }

.hero-sub {
  max-width: 520px;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.35;
  color: var(--ink-2);
  padding-bottom: 24px;
}
.hero-sub em { color: var(--ink); font-style: italic; }

.hero-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-foot .cell .k { display: block; margin-bottom: 6px; }
.hero-foot .cell .v { font-size: 18px; color: var(--ink); }
.hero-foot .cell .v .lil {
  color: var(--ink-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.nyp-mark {
  position: absolute;
  right: 0; top: 110px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .3em;
}

.scroll-nudge {
  position: absolute;
  bottom: 26px; left: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.scroll-nudge .bar {
  display: block;
  width: 40px; height: 1px;
  background: var(--ink-3);
  position: relative;
  overflow: hidden;
}
.scroll-nudge .bar::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--acc);
  transform: translateX(-100%);
  animation: scroll-bar 2.2s infinite;
}
@keyframes scroll-bar {
  0%      { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}


/* -- 03 Now-playing ------------------------------------------------------- */
.now-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: center;
}
.now-card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, oklch(0.19 0.014 80), oklch(0.17 0.012 80));
  overflow: hidden;
  min-height: 144px;
}

/* Live mode — single currently-playing track, whole card links to Spotify */
.now-single {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  color: inherit;
  transition: background .25s;
}
.now-single:hover { background: rgba(255, 255, 255, .02); }

/* Top mode — list of top-5 tracks, each row links to Spotify */
.now-top { padding: 20px 24px; }
.now-top-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.now-list {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0; padding: 0;
}
.now-list li + li a { border-top: 1px solid var(--line); }
.now-list a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  color: inherit;
  transition: color .25s, padding-left .25s;
}
.now-list a:hover { color: var(--acc); padding-left: 6px; }
.now-list .rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .1em;
}
.now-list a:hover .rank { color: var(--acc); }
.now-list .meta { display: block; min-width: 0; }
.now-list .title {
  display: block;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-list .artist {
  display: block;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 2px;
}
.now-list a:hover .artist { color: var(--acc); }
.now-list .count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.now-art {
  width: 96px; height: 96px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background: repeating-linear-gradient(45deg,
    oklch(0.28 0.02 90) 0 6px,
    oklch(0.22 0.02 90) 6px 12px);
}
.now-art::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.now-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc);
}
.now-state .ping {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 0 var(--acc);
  animation: ping 1.6s infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0    oklch(0.88 0.22 120 / 0.7); }
  70%  { box-shadow: 0 0 0 14px oklch(0.88 0.22 120 / 0);   }
  100% { box-shadow: 0 0 0 0    oklch(0.88 0.22 120 / 0);   }
}
.now-title {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.now-artist {
  font-size: 18px;
  color: var(--ink-2);
  margin-top: 4px;
}
.now-wave {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 14px;
  margin-top: 10px;
}
.now-wave span {
  display: block;
  width: 2px;
  background: var(--ink-3);
  animation: bars 1.2s ease-in-out infinite;
}
.now-wave span:nth-child(1) { animation-delay: 0s; }
.now-wave span:nth-child(2) { animation-delay: .15s; }
.now-wave span:nth-child(3) { animation-delay: .3s; }
.now-wave span:nth-child(4) { animation-delay: .1s; }
.now-wave span:nth-child(5) { animation-delay: .25s; }
@keyframes bars {
  0%, 100% { height: 3px; }
  50%      { height: 14px; }
}

.now-words h2 {
  font-family: "Syne", sans-serif;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .95;
  letter-spacing: -0.03em;
}
.now-words h2 em {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--acc);
  font-weight: 400;
}
.now-words p {
  margin-top: 18px;
  max-width: 420px;
  color: var(--ink-2);
  font-size: 19px;
}


/* -- 04 About (scattered grid) ------------------------------------------- */
.about { position: relative; }
.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 60px;
  gap: 14px;
  position: relative;
}
.a-prose {
  grid-column: 1 / 7;
  grid-row: 1 / 6;
  align-self: center;
}
.a-prose p {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  max-width: 560px;
}
.a-prose p + p { margin-top: 18px; color: var(--ink-2); }
.a-prose .drop { color: var(--acc); font-style: italic; }

.photo {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: #111;
  transform: rotate(var(--r, 0deg));
  transition: transform .4s ease, filter .4s ease;
}
.photo::after {
  content: attr(data-cap);
  position: absolute;
  left: 8px; bottom: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  padding: 3px 6px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s;
}
.photo:hover { transform: rotate(0deg) scale(1.02); z-index: 3; }
.photo:hover::after { opacity: 1; }
.photo .ph {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Photo positions + subtle rotations.
   p5 is the hero (the image of me, "Absolute Cinema"), large on the
   right and unrotated so it stays the focal point. p1, p2 and p4 are
   small satellites in a row under the hero. p3 (Linz Land) is hidden
   everywhere — image not strong enough. Gradient fallback stays
   visible until an image lands on top. */
.p5 { grid-column: 7/13; grid-row: 1/10; --r: 0deg; }
.p5 .ph { background-color: oklch(0.34 0.04 300); }
.p5::after {
  /* Slightly larger caption on the hero so it reads as the lead photo */
  font-size: 10px;
}
.p1 { grid-column: 7/9;   grid-row: 10/12; --r: -1deg; }
.p1 .ph { background-color: oklch(0.32 0.05 60); }
.p2 { grid-column: 9/11;  grid-row: 10/12; --r:  1deg; }
.p2 .ph { background-color: oklch(0.30 0.06 240); }
.p3, .about .p3 { display: none; }
.p4 { grid-column: 11/13; grid-row: 10/12; --r: -1.5deg; }
.p4 .ph { background-color: oklch(0.32 0.06 30); }

.a-facts {
  grid-column: 1 / 7;
  grid-row: 7 / 14;
  align-self: start;
  margin-top: 20px;
}
.a-facts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 12px;
}
.a-facts dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  padding-top: 4px;
}
.a-facts dd { font-size: 19px; color: var(--ink); }
.a-facts dd em { color: var(--acc); font-style: italic; }

.long-link {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 28px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
  width: 100%;
  max-width: 560px;
  transition: color .25s, border-color .25s, padding-left .3s;
  cursor: none;
}
.long-link .ll-meta {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-3);
  margin-right: auto;
}
.long-link .ll-arr { font-weight: 400; transition: transform .3s; }
.long-link:hover { color: var(--acc); border-color: var(--acc); padding-left: 10px; }
.long-link:hover .ll-meta { color: var(--acc); }
.long-link:hover .ll-arr { transform: translate(4px, -4px); }


/* -- 05 Toolstack -------------------------------------------------------- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tool {
  background: var(--bg);
  padding: 22px 20px;
  position: relative;
  min-height: 156px;
  transition: background .35s;
  cursor: none;
  overflow: hidden;
}
.tool:hover { background: var(--bg-2); }
.tool .num {
  position: absolute;
  top: 10px; right: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .1em;
  z-index: 2;
}
.tool .nm {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  position: absolute;
  left: 20px; right: 20px;
  bottom: 42px;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.tool .tg {
  position: absolute;
  left: 20px; right: 20px;
  bottom: 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}
.tool:hover .nm { transform: translateY(-56px); }
.tool:hover .tg { transform: translateY(-56px); opacity: .6; }
.tool .nt {
  position: absolute;
  left: 20px; right: 20px;
  bottom: 18px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.3;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease .08s, transform .45s cubic-bezier(.2, .7, .2, 1) .08s;
}
.tool:hover .nt { opacity: 1; transform: translateY(0); }

/* Accent variant — flip background to the accent colour */
.tool.acc { background: var(--acc); color: var(--acc-ink); }
.tool.acc .num,
.tool.acc .tg  { color: oklch(0.3 0.1 120); }
.tool.acc .nt  { color: oklch(0.28 0.08 120); }


/* -- 06 Work list -------------------------------------------------------- */
.work-list { border-top: 1px solid var(--line); }
.work-row {
  display: grid;
  grid-template-columns: 60px 1.4fr 1fr 0.6fr 30px;
  gap: 24px;
  align-items: center;
  padding: 28px 8px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: color .25s;
  cursor: none;
}
.work-row:hover { color: var(--acc); }
.work-row .idx {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-3);
}
.work-row .nm {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.work-row .kind {
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
}
.work-row:hover .kind { color: var(--acc); }
.work-row .yr {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--ink-3);
  text-align: right;
}
.work-row .arr { justify-self: end; transition: transform .3s; }
.work-row:hover .arr { transform: translate(4px, -4px) rotate(-45deg); }

.work-peek {
  position: absolute;
  right: 120px; top: 50%;
  transform: translate(20px, -50%) scale(.9);
  width: 220px; height: 140px;
  pointer-events: none;
  opacity: 0;
  transition: all .3s;
  border-radius: 2px;
  overflow: hidden;
  z-index: 4;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}
.work-row:hover .work-peek {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}


/* -- 07 Photo strip ------------------------------------------------------ */
.photo-lead {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
.photo-lead h2 {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 7vw, 110px);
  line-height: .9;
  letter-spacing: -0.04em;
}
.photo-lead h2 em {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--acc);
}
.photo-lead p {
  color: var(--ink-2);
  max-width: 420px;
  font-size: 19px;
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.ps {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  transition: flex-grow .4s;
}
.ps .ph {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(.3) contrast(1.05);
  transition: filter .4s, transform .6s;
}
.ps:hover .ph { filter: none; transform: scale(1.04); }
.ps .meta {
  position: absolute;
  left: 10px; bottom: 10px; right: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: opacity .3s;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.ps:hover .meta { opacity: 1; }

/* Photo-strip gradient fallbacks (shown until JS wires images). */
.ps1 .ph { background-color: oklch(0.28 0.05 40); }
.ps2 .ph { background-color: oklch(0.32 0.04 210); }
.ps3 .ph { background-color: oklch(0.36 0.05 120); }
.ps4 .ph { background-color: oklch(0.28 0.05 340); }
.ps5 .ph { background-color: oklch(0.40 0.03 70); }


/* -- 08 Contact / footer ------------------------------------------------- */
.contact { padding-top: 140px; padding-bottom: 60px; }
.contact h2 {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 12vw, 200px);
  line-height: .88;
  letter-spacing: -0.045em;
}
.contact h2 em {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: var(--acc);
  font-weight: 400;
}
.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  transition: color .25s, border-color .25s;
  cursor: none;
}
.contact-mail:hover { color: var(--acc); border-color: var(--acc); }
.contact-mail .arr {
  display: inline-block;
  transform: translateY(-2px) rotate(-45deg);
  font-weight: 400;
  font-size: .7em;
}

.socials {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.soc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: 1px solid var(--line);
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  transition: background .25s, color .25s, border-color .25s;
  cursor: none;
}
.soc:hover { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.soc .h { display: flex; align-items: center; gap: 10px; }
.soc .h .handle {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.soc:hover .handle { color: oklch(0.3 0.1 120); }

footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 80px 0 40px;
  border-top: 1px solid var(--line);
  margin-top: 100px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .12em;
}
footer .colophon {
  font-family: "Instrument Serif", serif;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 420px;
}
footer .colophon em { color: var(--acc); font-style: italic; }
footer .big {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 60px);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
}


/* -- 09 Responsive -------------------------------------------------------

   Three breakpoints:
     ≤ 900px — tablet / small laptop (stack 2-col grids to 1-col)
     ≤ 640px — phone (tighten padding, shrink type, simplify about grid)
     ≤ 420px — small phone (single-column everywhere)

   Touch-only rules live under @media (hover: none) so the tool-card
   hover animation has a sensible always-visible fallback.                  */

@media (max-width: 900px) {
  main                 { padding: 0 20px; }
  section              { padding: 90px 0; }
  .hero                { padding: 120px 0 70px; }
  .hero-top            { grid-template-columns: 1fr; gap: 30px; }
  .hero-foot           { grid-template-columns: repeat(2, 1fr); margin-top: 60px; }
  .nyp-mark            { display: none; }

  .now-grid            { grid-template-columns: 1fr; gap: 30px; }
  .about-grid          { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; gap: 20px; }
  .a-prose             { grid-column: 1/7; grid-row: auto; }
  .p1, .p2, .p3, .p4, .p5 { grid-column: auto; grid-row: auto; --r: 0deg; }
  /* Only the cinema photo on tablet — others hidden, p5 spans full width. */
  .about .photo:not(.p5) { display: none; }
  .about .p5             { grid-column: 1/7; aspect-ratio: 3/4; }
  .a-facts             { grid-column: 1/7; grid-row: auto; }
  .tools-grid          { grid-template-columns: repeat(2, 1fr); }
  .work-row            { grid-template-columns: 24px 1fr 40px; gap: 10px; row-gap: 4px; }
  .work-row .kind,
  .work-row .yr        { display: none; }
  .work-peek           { display: none; }
  .photo-strip         { grid-template-columns: repeat(2, 1fr); }
  .socials             { grid-template-columns: repeat(2, 1fr); }
  .photo-lead          { grid-template-columns: 1fr; gap: 20px; }
  .contact             { padding-top: 100px; padding-bottom: 40px; }
  footer               { flex-direction: column; align-items: flex-start; gap: 30px; }
}

@media (max-width: 640px) {
  section              { padding: 70px 0; }
  .hero                { padding: 100px 0 50px; min-height: auto; }
  .hero h1             { font-size: clamp(56px, 15vw, 88px); }
  .hero-sub            { font-size: 17px; padding-bottom: 12px; }
  .hero-foot           { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; padding-top: 20px; }
  .hero-foot .cell .v  { font-size: 16px; }
  .scroll-nudge        { display: none; }

  /* Now-playing: stack art above text cleanly */
  .now-single          { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .now-single .now-art { width: 80px; height: 80px; }
  .now-title           { font-size: 20px; }
  .now-words h2        { font-size: clamp(32px, 9vw, 44px); }

  /* About on phones: only the cinema photo. Everything else hidden. */
  .about-grid          { grid-template-columns: 1fr; gap: 14px; }
  .a-prose             { grid-column: 1; }
  .a-prose p           { font-size: 20px; }
  .p1, .p2, .p3, .p4, .p5 { grid-column: auto; --r: 0deg; }
  .about .photo:not(.p5) { display: none; }
  /* No `order` here — let p5 land below the prose + long-link button
     in DOM order so the call-to-action stays on top. */
  .about .p5           { grid-column: 1; aspect-ratio: 4/5; }
  .a-facts             { grid-column: 1/3; margin-top: 10px; }
  .a-facts dd          { font-size: 17px; }
  /* On phones, keep the original quiet underlined-link feel but stack
     the "6 min read · includes detours" meta on a second line. */
  .long-link           { font-size: 17px; flex-wrap: wrap; row-gap: 2px; }
  .long-link .ll-label { flex: 0 0 100%; }
  .long-link .ll-meta  { font-size: 13px; margin-right: auto; }
  .long-link .ll-arr   { margin-left: auto; }

  /* Tools: single column, no hover-hidden content */
  .tools-grid          { grid-template-columns: 1fr; }
  .tool                { min-height: auto; padding: 18px 18px 22px; }

  /* Work list: show "kind" below name on mobile (nicer than nothing) */
  .work-row            { padding: 22px 4px; }
  .work-row .nm        { font-size: 24px; }

  .photo-lead h2       { font-size: clamp(40px, 11vw, 64px); }
  .photo-strip         { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  .contact h2          { font-size: clamp(56px, 15vw, 88px); }
  .contact-mail        { font-size: clamp(24px, 7vw, 36px); gap: 12px; margin-top: 20px; }
  .socials             { margin-top: 50px; grid-template-columns: 1fr; gap: 10px; }
  .soc                 { padding: 14px 16px; font-size: 17px; }

  footer               { padding-top: 50px; margin-top: 60px; }
  footer .big          { font-size: clamp(24px, 8vw, 36px); }
  footer .colophon     { font-size: 14px; }
}

@media (max-width: 420px) {
  main                 { padding: 0 16px; }
  .hero h1             { font-size: clamp(48px, 14vw, 64px); }
  .about-grid          { grid-template-columns: 1fr; }
  .a-prose             { grid-column: auto; }
  .about .p5           { grid-column: auto; aspect-ratio: 3/4; }
  .a-facts             { grid-column: auto; }
  .photo-strip         { grid-template-columns: 1fr; }
}

/* Touch devices: tool cards have no hover, so make the description
   always visible and drop the slide animation. */
@media (hover: none) {
  .tool .nm,
  .tool .tg            { position: static; transform: none; transition: none; }
  .tool .nt            { position: static; opacity: 1; transform: none; margin-top: 12px; }
  .tool                { padding: 18px; min-height: auto; }
  .tool .num           { position: absolute; top: 10px; right: 12px; }
  .work-peek           { display: none; }
  .work-row:hover .arr { transform: none; }
}