/* turnertomlinson.com · home page (the F4 design), on top of site.css. Near-black page; the
   accent for headings and small labels is its own token (--acc, tuner: "Heading accent"). */
:root{--acc:#4fe8cf;--acc-rgb:79 232 207}
.f4{--a-text:color-mix(in srgb, var(--acc) 78%, #fff)}
.f4 .glow em,.f4 .glow i{color:var(--acc)}
.f4 :focus-visible{outline-color:var(--acc)}

/* calm means calm: with reduced motion (or the ink off) the page is just the background */
html.still body::before{display:none}

/* ---------- hero row: portrait + caption | name, role, link tree ----------
   Not scroll-driven and not pinned: an ordinary block; the intro plays on a timer. */
.f4 .pin{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:8px}
.hero-grid{display:grid;gap:14px}
.pcol{display:grid;gap:8px;min-width:0}
/* phone: portrait, caption, name and the link tree all fit in the first screen */
.pframe{position:relative;width:min(100%,calc(100svh - 330px - env(safe-area-inset-bottom)));min-width:min(100%,200px);aspect-ratio:1}
.f4 .portrait{width:100%;height:100%;min-width:0}
.explain{font:400 13px/1.45 var(--mono);color:rgb(var(--ink-rgb) / .9);margin:2px 0 0;min-height:2.9em;max-width:46ch}
.explain i{font-style:italic;color:var(--a-text)}
/* the final state is a plain headshot caption: the name */
.explain.name{letter-spacing:.04em;color:var(--muted)}

/* reduced motion: a still of the previous stage, faded out over the new one */
.screen canvas.xfade{z-index:1;opacity:0;pointer-events:none}
html.gl .screen.ready canvas.xfade{opacity:0}

/* replay: a circular arrow on the portrait's corner once the sequence has played */
.replay{position:absolute;right:10px;bottom:10px;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  color:var(--ink);background:rgb(0 0 0 / .7);border:1px solid rgb(var(--acc-rgb) / .55);box-shadow:0 6px 18px rgb(0 0 0 / .55)}
.replay[hidden]{display:none}
.replay:hover{color:var(--acc);border-color:var(--acc)}

.f4 .who h1{font-size:clamp(42px,11.5vw,96px)}
.f4 .who .role{margin-top:10px}

/* the link tree: compact 2x2 chips on a phone, a list of rows on a desktop */
.tree{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;min-height:94px}
/* an odd number of links: the last chip spans the row (phone grid only; desktop is one column) */
.tree li:last-child:nth-child(odd){grid-column:1/-1}
.tree .item{display:flex;align-items:center;gap:8px;min-height:44px;height:100%;padding:6px 12px;border:1px solid rgb(var(--ink-rgb) / .16);border-radius:12px;
  text-decoration:none;background:rgb(0 0 0 / .45);transition:border-color .2s}
.tree a.item:hover{border-color:var(--acc)}
.tree .tx{display:flex;flex-direction:column;min-width:0}
.tree .t{font:400 19px/1.1 var(--serif)}
.tree .d{font:400 11px/1.3 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .arr{margin-left:auto;color:var(--acc);transition:transform .2s}
.tree a:hover .arr{transform:translate(2px,-2px)}
.tree .pending .item{border-style:dashed;color:var(--muted);cursor:default;gap:6px}
.tree .pending .t{color:rgb(var(--ink-rgb) / .62)}
.tree .pending .d{color:rgb(var(--ink-rgb) / .62)}
.tree .d{text-shadow:0 0 1px rgb(0 0 0 / .9),0 0 8px rgb(0 0 0 / .85)}

/* short phones (SE, Safari with both bars showing) */
@media (max-width:859px) and (max-height:640px){
  .explain{min-height:0}
}

@media (min-width:860px){
  .f4 .pin{min-height:100vh;min-height:100svh;padding-bottom:0}
  .f4 .pin .wrap{grid-template-columns:auto minmax(0,1fr);gap:0 56px;align-items:center}
  .pframe{width:min(540px,calc(100svh - 190px));min-width:300px}
  .f4 .who{align-self:center}
  .tree{grid-template-columns:1fr;gap:0;max-width:440px;margin-top:26px;border-top:1px solid var(--line)}
  .tree .item{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;min-height:58px;padding:8px 2px}
  .tree .tx{flex-direction:row;align-items:baseline;gap:12px}
  .tree .t{font-size:24px}
  .tree .d{font-size:12px}
  .tree .pending .item{border-style:solid}
}

/* ---------- sections ---------- */
.f4 h2 .sl{color:var(--acc);margin-right:.06em}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lede{font:400 15px/1.6 var(--mono);color:rgb(var(--ink-rgb) / .86);margin:-12px 0 6px;max-width:52ch}
.f4 .authorlink{margin:18px 0 0}

/* the "swipe →" hint: only when a row is wider than the screen (f4.js sets .rail-over) */
.swipe{display:none;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--a-text);white-space:nowrap;
  text-shadow:0 0 1px rgb(0 0 0 / .9),0 0 8px rgb(0 0 0 / .85)}
.sec.rail-over .swipe{display:inline}
@media (max-width:859px){html:not(.js) #books .swipe{display:inline}}

/* ---------- the horizontal rows: books, then builds, left to right like covers on a shelf ----------
   The row scrolls on its own (scroll-snap), the page never does. Its side padding lines the
   first card up with .wrap's text edge; on a phone the next card peeks in from the right. */
.f4{--wrapw:1080px;--gut:18px;--cw:min(58vw,240px);--cgap:14px}
.rail-wrap{position:relative;max-width:100%;overflow:hidden}
.rail{list-style:none;margin:0;display:flex;align-items:stretch;gap:var(--cgap);
  padding:22px max(var(--gut),calc((100% - var(--wrapw)) / 2 + var(--gut))) 26px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:max(var(--gut),calc((100% - var(--wrapw)) / 2 + var(--gut)));-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgb(var(--acc-rgb) / .45) transparent}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:rgb(var(--acc-rgb) / .45);border-radius:6px}
.rail:focus-visible{outline-offset:-2px}
/* fade at the right edge while there is more to see */
.rail-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:linear-gradient(90deg,transparent,rgb(0 0 0 / .72))}
.rail-wrap.over:not(.at-end)::after{opacity:1}

.card{flex:0 0 var(--cw);width:var(--cw);display:flex;flex-direction:column;align-items:flex-start;scroll-snap-align:start;min-width:0}
.card .cover{position:relative;display:block;width:100%;max-width:none;aspect-ratio:5/8;margin:0 0 16px;overflow:hidden;background:#000;
  border-radius:2px 5px 5px 2px;box-shadow:0 0 0 1px rgb(var(--ink-rgb) / .14),0 22px 50px rgb(0 0 0 / .6)}
.card .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card h3{font:400 26px/1.04 var(--serif);margin:0 0 7px}
.card .meta{margin:0 0 8px}
.card .award{margin:0 0 8px}
.card .line{margin:0 0 12px;font-size:14px;line-height:1.5;color:rgb(var(--ink-rgb) / .86)}
.card .sidequest{margin:0 0 8px}
.card .btn{margin-top:auto}

/* a build without its cover yet: a typographic placeholder, same shape as a book */
.cover.ph{display:flex;flex-direction:column;padding:9% 9% 8%;color:var(--ink);isolation:isolate;
  background:
    radial-gradient(120% 70% at 85% 0%, rgb(var(--acc-rgb) / .22), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgb(var(--b-rgb) / .16), transparent 65%),
    #050707}
.cover.ph::before{content:"";position:absolute;inset:7px;border:1px solid rgb(var(--acc-rgb) / .38);border-radius:2px;pointer-events:none}
.cover.ph::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background:repeating-linear-gradient(0deg,rgb(255 255 255 / .025) 0 1px,transparent 1px 4px)}
.ph-k{font:400 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.ph-t{margin-top:auto;font:400 clamp(38px,11vw,54px)/.9 var(--serif);letter-spacing:-.02em;text-wrap:balance;
  text-shadow:0 0 22px rgb(var(--acc-rgb) / .35)}
.ph-d{margin-top:14px;font:400 italic 17px/1.25 var(--serif);color:rgb(var(--ink-rgb) / .82)}
.ph-u{margin-top:auto;padding-top:16px;font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:lowercase;color:var(--muted)}

/* the mystery book takes the same slot as a cover */
.card .mystery{max-width:none;aspect-ratio:5/8}
.card .mystery .mx-q{font-size:clamp(110px,28vw,160px)}

/* ---------- about: the pull-quote, then the bio ---------- */
.pull{margin:0 0 34px;padding:0 0 0 clamp(16px,3vw,28px);border-left:2px solid var(--acc)}
.pull p{margin:0;font:400 clamp(34px,7.4vw,72px)/1.04 var(--serif);letter-spacing:-.01em;text-wrap:balance;max-width:20ch}
.f4 .bio{font-size:17px;line-height:1.75;max-width:62ch;margin:0}
.f4 .bio em{color:var(--a-text)}

@media (min-width:860px){
  .f4{--cw:240px;--cgap:28px}
}
.f4 .foot{padding:72px 0 calc(48px + env(safe-area-inset-bottom))}

/* big windows (his ~1700x1400 Chrome on the ultrawide): scale the hero up so it fills the
   window on purpose instead of floating a 540px portrait in the middle of the black */
@media (min-width:1400px) and (min-height:1000px){
  .f4 .wrap{max-width:1320px}
  .f4{--wrapw:1320px;--cw:270px;--cgap:34px}
  .pull p{font-size:84px}
  .f4 .bio{font-size:18.5px}
  .f4 .pin .wrap{gap:0 80px}
  .pframe{width:min(740px,calc(100svh - 300px))}
  .f4 .who h1{font-size:clamp(92px,7vw,128px)}
  .f4 .who .role{font-size:14px;margin-top:16px}
  .tree{max-width:540px;margin-top:34px}
  .tree .item{min-height:68px}
  .tree .t{font-size:30px}
  .tree .d{font-size:13px}
  .explain{font-size:15px;max-width:52ch}
}

/* no JS: the plain photo with its name caption, the name and the link tree are the hero */
html:not(.js) .screen .tag{display:none}