/* Front page — doors (design: index.html) */
/* ---------- DOORS ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-block-start:3rem}
@media(max-width:768px){.doors{grid-template-columns:1fr}}
.door{position:relative;padding:1.8rem 1.6rem 1.5rem;border-radius:var(--radius);background:var(--silver-soft);
  border:1px solid var(--line);overflow:hidden;transition:transform .4s var(--ease),border-color .4s}
.door::before{content:"";position:absolute;inset:0;background:var(--silver);opacity:0;mix-blend-mode:overlay;transition:opacity .5s}
.door:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.door:hover::before{opacity:.14}
.door .k{font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.door h2,.door h3{font-family:var(--font-display);font-weight:500;font-size:var(--step-1);margin-block:.5rem .4rem;letter-spacing:-.01em}
.door p{color:var(--ink-soft);font-size:var(--step--1)}
.door .go{margin-block-start:1.1rem;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--step--1)}
.door .go::after{content:"→";transition:transform .3s}
[dir="rtl"] .door .go::after{content:"←"}
.door:hover .go::after{transform:translateX(5px)}
[dir="rtl"] .door:hover .go::after{transform:translateX(-5px)}

/* ===========================================================================
   ROUND 2 — modern, full-width column layouts.
   Hero is a two-column split (copy | portrait); the doors sit on the seam.
   David's story is a 2-col grid: copy + 2x2 trait grid | tall figure.
   =========================================================================== */

/* --- hero: split --- */
.hero--split{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,3.5rem)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,5vw,4rem);align-items:center}
@media(max-width:1024px){.hero__grid{grid-template-columns:1fr;gap:2rem}}
.hero__body h1{max-width:15ch}
.lede--hero{font-size:var(--step-0);max-width:52ch}
.hero__body .hero-actions{margin-block-start:2rem}
.hero__figure{position:relative;border-radius:calc(var(--radius) + 8px);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3.4;background:var(--silver-soft);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.65)}
.hero__figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 45%,color-mix(in srgb,var(--bg) 70%,transparent))}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform 1.2s var(--ease)}
.hero__figure:hover .hero__img{transform:scale(1.03)}
@media(max-width:1024px){.hero__figure{aspect-ratio:16/10}}

/* doors sit under the split, full width */
.doors{margin-block-start:clamp(2rem,4vw,3.2rem)}
.door h2,.door h3{font-family:var(--font-display);font-weight:500;font-size:var(--step-1);
  margin-block:.5rem .4rem;letter-spacing:-.01em}
.door::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .45s var(--ease)}
.door:hover::after{transform:scaleX(1)}

/* --- David's story: copy + trait grid | tall figure --- */
.story{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:stretch}
@media(max-width:1024px){.story{grid-template-columns:1fr}}
.story__body{display:flex;flex-direction:column}
.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-block-start:1.6rem}
@media(max-width:640px){.story__grid{grid-template-columns:1fr}}
.trait{border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;background:var(--surface);
  position:relative;overflow:hidden;transition:.4s var(--ease)}
.trait::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:2px;
  background:var(--silver);opacity:.65}
.trait:hover{transform:translateY(-4px);background:var(--surface-2);
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
.trait__k{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink);display:block;
  letter-spacing:-.01em;margin-block-end:.45rem}
.trait p{color:var(--ink-soft);font-size:var(--step--1);line-height:1.6}
.story__more{margin-block-start:1.6rem;align-self:flex-start}
.story__figure{position:relative;margin:0;border-radius:calc(var(--radius) + 6px);overflow:hidden;
  border:1px solid var(--line);min-height:420px;background:var(--silver-soft)}
.story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.story__figure:hover .story__img{transform:scale(1.04)}
.story__quote{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;padding:1.4rem;color:#fff;
  font-family:var(--font-display);font-size:1.02rem;line-height:1.4;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent)}
@media(max-width:1024px){.story__figure{min-height:340px}}

/* --- the book: cover | copy | quote (modern 3-col band) --- */
.bookband{display:grid;grid-template-columns:auto 1.4fr .8fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:center;
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:clamp(1.6rem,3.5vw,2.6rem);
  background:var(--silver-soft);position:relative;overflow:hidden}
.bookband::before{content:"";position:absolute;inset:0;background:var(--silver);opacity:.06;pointer-events:none}
.bookband>*{position:relative}
@media(max-width:1024px){.bookband{grid-template-columns:auto 1fr}.bookband__quote{display:none}}
@media(max-width:640px){.bookband{grid-template-columns:1fr;text-align:start}.bookband__cover{margin-inline:auto}}
.bookband__cover{width:min(220px,44vw);border-radius:12px;display:block;position:relative;
  transition:transform .5s var(--ease);perspective:900px}
.bookband__cover::after{content:"";position:absolute;inset-inline-start:6%;inset-block-end:-16px;width:88%;height:26px;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 75%);filter:blur(6px);z-index:-1}
.bookband__cover:hover{transform:translateY(-8px) rotate(-1.2deg)}
/* object-fit:contain + auto height: the jacket is shown whole, never cropped */
.bookband__cover img{width:100%;height:auto;display:block;border-radius:12px;object-fit:contain;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.65),0 0 0 1px var(--line)}
.bookband__title{font-family:var(--font-display);font-weight:500;font-size:var(--step-2);letter-spacing:-.02em;
  line-height:1.15;max-width:16ch}
.bookband__lede{color:var(--ink-soft);margin-block-start:1rem;max-width:52ch;line-height:1.65}
.bookband__meta{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.bookband__meta li{font-size:var(--step--1);color:var(--ink-faint);border:1px solid var(--line);
  border-radius:99px;padding:.3rem .8rem;background:var(--surface)}
.bookband .hero-actions{margin-block-start:1.5rem}
.bookband__quote blockquote{font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.35;
  color:var(--ink);border-inline-start:3px solid var(--accent);padding-inline-start:1.2rem;max-width:24ch}