/* Apple-style sections & organized homepage layout.
   Shared by the homepage (/), Tools (/work/), Extras (/beyond/), and About (/about/).

   .ap-stack        column of tiles inside the 1200px container
   .ap              one rounded bento tile (full width)
   .ap-split        two-column flagship tile (copy on left, window/art on right)
   .ap-grid         two tiles side by side (one column on phones/tablets)
   .ap-photo        picture fills the tile, words sit on top in white with a smooth scrim
   .ap-copy         words at the top/left of a tile
     .ap-eyebrow    small grey/muted label above the name
     .ap-name       the subject, e.g. "Research"
     .ap-line       concise explanation of what the section offers
     .ap-cta        action buttons: .ap-btn (filled) and .ap-btn.alt (outline)
   .ap-art          visual showcase pinned to the bottom/right edge
     .ap-window     screenshot in a macOS-style window frame
     .ap-panel      card for live content (charts, lists)
   .ap-chapters     section jump bar (6-card directory on homepage, icon row on inner pages)
   .ap-head         page header: name, line, buttons, centred
*/

:root{--ap-gap:10px}
[data-theme=neon]{
  --ap-tile:#10131c;
  --ap-tile-elev:#171b28;
  --ap-panel:#171b28;
  --ap-line:rgba(255,255,255,.10);
  --ap-spec:inset 0 1px 0 rgba(255,255,255,.14);
}
[data-theme=paper]{
  --ap-tile:#f1eee7;
  --ap-tile-elev:#ffffff;
  --ap-panel:#ffffff;
  --ap-line:rgba(20,22,30,.09);
  --ap-spec:inset 0 1px 0 rgba(255,255,255,.9);
}

.ap-stack{
  display:grid;
  gap:var(--ap-gap);
  padding:0 1.25rem;
  max-width:1200px;
  margin:0 auto;
}
.ap-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ap-gap);
}

/* ---------- tile ---------- */
.ap{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  min-height:clamp(520px,44vw,620px);
  padding:clamp(2.25rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem) 0;
  border-radius:0;
  border:1px solid var(--ap-line);
  background:var(--ap-tile);
  box-shadow:var(--ap-spec),0 18px 42px -24px var(--shadow);
  color:var(--fg);
  text-align:center;
  scroll-margin-top:76px;
}
.ap-grid .ap{
  min-height:clamp(500px,42vw,570px);
  padding:clamp(2rem,3.2vw,2.5rem) clamp(1.35rem,2.6vw,2.1rem) 0;
}
.ap-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:38rem;
}
.ap-eyebrow{
  margin:0 0 .5rem;
  font:600 .78rem/1.3 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--t-link);
}
.ap-name{
  margin:0;
  font:700 clamp(2.15rem,4.2vw,3.15rem)/1.05 var(--disp);
  letter-spacing:-.03em;
  text-wrap:balance;
}
.ap-grid .ap-name{
  font-size:clamp(1.85rem,3vw,2.4rem);
}
.ap-line{
  margin:.55rem 0 0;
  font:400 clamp(1.02rem,1.45vw,1.2rem)/1.45 var(--body);
  letter-spacing:-.008em;
  color:var(--muted);
  text-wrap:balance;
  max-width:36rem;
}
.ap-grid .ap-line{
  font-size:clamp(.98rem,1.25vw,1.1rem);
}
.ap-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem .9rem;
  margin:1.25rem 0 0;
}

.ap-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.55rem 1.3rem;
  border-radius:980px;
  border:1px solid var(--fg);
  background:var(--fg);
  color:var(--t-page);
  font:500 .98rem/1 var(--body);
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.ap-btn:hover{
  background:color-mix(in srgb,var(--fg) 85%,var(--t-page));
  color:var(--t-page);
  text-decoration:none;
}
.ap-btn:active{transform:scale(.98)}
.ap-btn.alt{
  background:transparent;
  color:var(--fg);
  border-color:color-mix(in srgb,var(--fg) 26%,transparent);
}
.ap-btn.alt:hover{
  background:color-mix(in srgb,var(--fg) 10%,transparent);
  border-color:color-mix(in srgb,var(--fg) 42%,transparent);
  color:var(--fg);
}
.ap-btn:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

/* ---------- picture under the words: Fumik0 Inspector Chrome ---------- */
.ap-art{
  position:relative;
  width:100%;
  margin-top:auto;
  padding-top:clamp(1.4rem,2.5vw,2rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
}
.ap-window{
  width:min(880px,96%);
  margin:0;
  border:1px solid rgba(255,255,255,.14);
  border-bottom:0;
  border-radius:0;
  overflow:hidden;
  background:#0d0f16;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -16px 44px -20px rgba(0,0,0,.6);
}
[data-theme=paper] .ap-window{
  border-color:rgba(20,22,30,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 -14px 36px -18px rgba(20,22,30,.24);
}
.ap-grid .ap-window{
  width:100%;
}
.ap-window-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:.5rem .85rem;
  background:#12151f;
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  font:500 .75rem/1 var(--mono);
  color:#949bb0;
  text-align:left;
}
.ap-window-bar i{
  flex:none;
  width:7px;
  height:7px;
  border-radius:1.5px;
  background:#2ee6b8;
  box-shadow:0 0 8px rgba(46,230,184,.55);
}
.ap-window-bar i:nth-child(2),
.ap-window-bar i:nth-child(3){
  display:none;
}
.ap-window-bar small{
  margin-left:.15rem;
  font:500 .75rem/1.2 var(--mono);
  color:#c7cedf;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ap-window-bar::after{
  content:"INSPECT";
  margin-left:auto;
  flex:none;
  font:600 .75rem/1 var(--mono);
  letter-spacing:.1em;
  color:rgba(242,244,248,.42);
  padding:.18rem .42rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
}
.ap-window img{
  display:block;
  width:100%;
  height:clamp(220px,24vw,340px);
  object-fit:cover;
  object-position:center top;
}
.ap-grid .ap-window img{
  height:clamp(190px,18vw,250px);
}

.ap-panel{
  width:100%;
  margin:0 0 clamp(1.35rem,2.5vw,2rem);
  padding:1.1rem 1.25rem;
  border:1px solid var(--ap-line);
  border-radius:0;
  background:var(--ap-panel);
  box-shadow:var(--ap-spec);
  text-align:left;
}
.ap-panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  margin:0 0 .55rem;
  font:400 .76rem/1.3 var(--body);
  color:var(--muted);
}
.ap-panel-head b{
  font:600 .95rem/1.2 var(--disp);
  color:var(--fg);
}
.ap-panel .mini-bars{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
.ap-panel-sub{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .65rem;
  margin-top:.85rem;
  padding-top:.75rem;
  border-top:1px solid var(--ap-line);
}
.aps-label{
  font:600 .76rem/1.2 var(--body);
  color:var(--muted);
}
.ap-note{
  margin:.75rem 0 0;
  font:400 .78rem/1.4 var(--body);
  color:var(--muted);
}

/* ---------- photo tiles: picture fills the tile, words on top ---------- */
.ap-photo{
  background:#08090d;
  color:#fff;
  border-color:rgba(255,255,255,.14);
}
[data-theme=paper] .ap-photo{
  border-color:rgba(20,22,30,.12);
}
.ap-photo .ap-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--spring);
}
.ap-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,13,.8) 0%,rgba(8,9,13,.5) 38%,rgba(8,9,13,.2) 68%,rgba(8,9,13,.58) 100%);
}
.ap-photo:hover .ap-bg{transform:scale(1.03)}
.ap-photo .ap-eyebrow{color:var(--t-ink-link,#2ee6b8)}
.ap-photo .ap-name{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.ap-photo .ap-line{color:rgba(242,244,248,.88)}
.ap-photo .ap-btn{border-color:#fff;background:#fff;color:#08090d}
.ap-photo .ap-btn:hover{background:rgba(255,255,255,.86);color:#08090d}
.ap-photo .ap-btn.alt{
  background:rgba(8,9,13,.38);
  color:#fff;
  border-color:rgba(255,255,255,.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.ap-photo .ap-btn.alt:hover{background:#fff;color:#08090d;border-color:#fff}

/* ---------- chapter row (inner pages: /beyond/, /about/) ---------- */
.ap-chapters{
  display:flex;
  justify-content:center;
  gap:clamp(1rem,3vw,2.75rem);
  margin:0 auto;
  padding:clamp(1.25rem,2.5vh,1.75rem) 1.25rem 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.ap-chapters::-webkit-scrollbar{display:none}
.ap-chapters a{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  min-width:4.5rem;
  color:var(--fg);
  font:500 .84rem/1.2 var(--body);
  text-decoration:none;
  transition:color .2s,border-color .2s,transform .2s;
}
.ap-chapters svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ap-chapters a:hover{color:var(--t-link);text-decoration:none}
.ap-chapters a:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:10px}

/* ---------- page header without a tile ---------- */
.ap-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:52rem;
  margin:0 auto;
  padding:clamp(2.25rem,6vh,4rem) 1.25rem clamp(1.5rem,3.5vh,2.25rem);
  text-align:center;
}
.ap-head .ap-name{font-size:clamp(2.5rem,5.5vw,4.1rem)}
.ap-head .ap-line{color:var(--muted)}

/* ---------- facts strip (big number, small label) ---------- */
.ap-facts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.25rem clamp(2rem,5vw,4rem);
  margin:0;
  padding:0;
  list-style:none;
}
.ap-facts li{display:flex;flex-direction:column;align-items:center}
.ap-facts b{
  font:700 clamp(1.85rem,3.2vw,2.5rem)/1 var(--disp);
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.ap-facts span{
  margin-top:.3rem;
  font:500 .85rem var(--body);
  color:var(--muted);
}

/* ---------- section title between groups of tiles ---------- */
.ap-title{
  max-width:1200px;
  margin:clamp(2.5rem,5vw,4rem) auto 1.25rem;
  padding:0 1.25rem;
  font:700 clamp(1.75rem,3.2vw,2.4rem)/1.08 var(--disp);
  letter-spacing:-.025em;
}

/* =====================================================================
   HOMEPAGE ORGANIZATION — Above-the-fold split hero, 6-card directory,
   flagship Research split card, Latest Articles row, and balanced Bento
   ===================================================================== */
.home-hero{
  padding-top:clamp(1.5rem,3.2vh,2.5rem);
  padding-bottom:clamp(1.25rem,2.5vh,2rem);
}
.home-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;
  gap:clamp(1.75rem,4vw,3.25rem);
}
.home-hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.home-hero-copy .ap-name{
  font-size:clamp(2.65rem,5.2vw,4.35rem);
  line-height:1.02;
  letter-spacing:-.035em;
}
.home-hero-lead{
  margin:.9rem 0 0;
  max-width:36rem;
  font:400 clamp(1.04rem,1.35vw,1.18rem)/1.52 var(--body);
  color:var(--muted);
}
.home-hero-cta{
  justify-content:flex-start;
  margin-top:1.35rem;
}

/* Latest article callout pill inside hero */
.home-latest-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  max-width:100%;
  margin-top:1.15rem;
  padding:.38rem .85rem .38rem .45rem;
  border-radius:980px;
  background:var(--ap-tile);
  border:1px solid var(--ap-line);
  box-shadow:var(--ap-spec);
  color:var(--fg);
  font:500 .85rem/1.3 var(--body);
  text-decoration:none;
  transition:border-color .2s,transform .2s;
}
.home-latest-pill:hover{
  border-color:color-mix(in srgb,var(--fg) 30%,transparent);
  transform:translateY(-1px);
  text-decoration:none;
}
.hlp-badge{
  flex:none;
  padding:.18rem .55rem;
  border-radius:980px;
  background:var(--t-link,#0b7a60);
  color:var(--t-page,#08090d);
  font:600 .75rem/1.2 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.hlp-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
  color:var(--fg);
}
.hlp-meta{
  flex:none;
  color:var(--muted);
  font-size:.78rem;
}
.home-latest-pill::after{
  content:"\2192";
  flex:none;
  color:var(--t-link);
  font:600 .95em/1 var(--mono);
}

/* Credibility facts inside hero */
.home-hero-facts{
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:start;
  gap:.75rem clamp(1.35rem,2.6vw,2.25rem);
  margin:1.35rem 0 0;
  padding:1.1rem 0 0;
  border-top:1px solid var(--ap-line);
  list-style:none;
  width:100%;
}
.home-hero-facts li{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.home-hero-facts b{
  font:700 clamp(1.35rem,2vw,1.65rem)/1 var(--disp);
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  color:var(--fg);
}
.home-hero-facts span{
  margin-top:.22rem;
  font:500 .78rem/1.2 var(--body);
  color:var(--muted);
}

/* Right hero column: Interactive X-Ray stage card */
.home-hero-stage{
  min-width:0;
}
.home-xray-card.tile-art{
  max-width:none;
  margin:0;
  padding:1.1rem 1.25rem 1rem;
  border-radius:var(--r-lg,24px);
  border:1px solid var(--ap-line);
  background:var(--ap-tile);
  box-shadow:var(--ap-spec),0 18px 42px -24px var(--shadow);
}
.home-xray-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.35rem;
  padding-bottom:.65rem;
  border-bottom:1px solid var(--ap-line);
  font:500 .78rem/1.2 var(--body);
  color:var(--muted);
}
.home-xray-head strong{
  font:600 .88rem/1.2 var(--disp);
  color:var(--fg);
}
.home-xray-card .xray{
  max-height:min(40vh,340px);
  width:100%;
  margin:0 auto;
}

/* 6-card organized directory bar under the hero */
.ap-chapters.home-chapters{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin:clamp(1.25rem,2.5vh,1.85rem) 0 0;
  padding:0;
  overflow:visible;
}
.ap-chapters.home-chapters a{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:.7rem;
  min-width:0;
  padding:.7rem .85rem;
  border-radius:16px;
  border:1px solid var(--ap-line);
  background:var(--ap-tile);
  box-shadow:var(--ap-spec);
  text-align:left;
  transition:transform .22s var(--spring),border-color .2s,background .2s;
}
.ap-chapters.home-chapters a:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--fg) 26%,transparent);
  color:var(--fg);
}
.hc-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:color-mix(in srgb,var(--fg) 7%,transparent);
  color:var(--fg);
  transition:background .2s,color .2s;
}
.ap-chapters.home-chapters a:hover .hc-ico{
  background:color-mix(in srgb,var(--t-link) 14%,transparent);
  color:var(--t-link);
}
.ap-chapters.home-chapters svg{
  width:20px;
  height:20px;
}
.hc-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.hc-text strong{
  font:600 .9rem/1.2 var(--disp);
  color:var(--fg);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hc-text small{
  margin-top:.12rem;
  font:400 .75rem/1.2 var(--body);
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Flagship Research split tile (#research) */
.ap-split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(1.5rem,3.5vw,2.75rem);
  min-height:0;
  padding:clamp(2rem,3.6vw,2.75rem);
  text-align:left;
}
.ap-split .ap-copy{
  align-items:flex-start;
  max-width:none;
}
.ap-split .ap-line{
  text-wrap:pretty;
}
.ap-split .ap-cta{
  justify-content:flex-start;
}
.ap-split .ap-art{
  margin-top:0;
  padding-top:0;
}
.ap-split .ap-window{
  width:100%;
  border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.55);
}
[data-theme=paper] .ap-split .ap-window{
  border-bottom:1px solid rgba(0,0,0,.14);
}
.ap-split .ap-window img{
  height:clamp(240px,24vw,310px);
}

/* Malware families pill strip inside Research card */
.home-families{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin-top:1.15rem;
  width:100%;
}
.hf-label{
  font:600 .78rem/1.2 var(--body);
  color:var(--muted);
}
.hf-list{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.hf-list a{
  display:inline-flex;
  align-items:center;
  padding:.28rem .72rem;
  border-radius:980px;
  background:var(--ap-tile-elev);
  border:1px solid var(--ap-line);
  color:var(--fg);
  font:500 .8rem/1.25 var(--body);
  text-decoration:none;
  transition:border-color .2s,background .2s,transform .2s;
}
.hf-list a:hover{
  border-color:var(--t-link);
  color:var(--t-link);
  transform:translateY(-1px);
  text-decoration:none;
}

/* Latest articles section inside .home-stack */
.home-latest{
  padding:clamp(1.75rem,3vw,2.35rem);
  border-radius:var(--r-lg,24px);
  border:1px solid var(--ap-line);
  background:var(--ap-tile);
  box-shadow:var(--ap-spec),0 18px 42px -24px var(--shadow);
}
.home-latest .latest-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
}
.home-latest .latest-title{
  margin:0;
  font-size:clamp(1.65rem,2.8vw,2.15rem);
}
.latest-body{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:1.1rem 1.25rem 1.3rem;
  flex:1;
}
.latest-body .latest-meta{
  margin:0;
}
.latest-body h3{
  margin:0;
  font:650 1.14rem/1.28 var(--disp);
  letter-spacing:-.015em;
}
.latest-sum{
  margin:.15rem 0 0;
  font:400 .88rem/1.5 var(--body);
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Essay banner (#essays): balanced height, left-aligned editorial layout */
.ap-essay{
  min-height:clamp(320px,30vw,390px);
  align-items:flex-start;
  justify-content:center;
  padding:clamp(2rem,3.8vw,2.85rem);
  text-align:left;
}
.ap-essay::after{
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.68) 48%,rgba(0,0,0,.28) 100%);
}
.ap-essay .ap-copy{
  align-items:flex-start;
  max-width:34rem;
}
.ap-essay .ap-cta{
  justify-content:flex-start;
}

/* Tools tile project pills */
.home-tools-art{
  gap:1rem;
  width:100%;
}
.home-tool-pills{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem;
  width:100%;
}
.home-tool-pills a{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:.6rem .85rem;
  border-radius:14px;
  background:var(--ap-panel);
  border:1px solid var(--ap-line);
  box-shadow:var(--ap-spec);
  text-align:left;
  color:var(--fg);
  text-decoration:none;
  transition:border-color .2s,transform .2s;
}
.home-tool-pills a:hover{
  border-color:color-mix(in srgb,var(--fg) 28%,transparent);
  transform:translateY(-1px);
  text-decoration:none;
}
.home-tool-pills strong{
  font:600 .9rem/1.2 var(--disp);
  color:var(--fg);
}
.home-tool-pills span{
  font:400 .75rem/1.25 var(--body);
  color:var(--muted);
}

/* Closing card at bottom of homepage */
.home-end-wrap{
  margin-top:var(--ap-gap);
}
.home-end{
  max-width:none;
  padding:clamp(2.25rem,4.5vw,3.25rem) 1.5rem;
  border-radius:var(--r-lg,24px);
  border:1px solid var(--ap-line);
  background:var(--ap-tile);
  box-shadow:var(--ap-spec),0 18px 42px -24px var(--shadow);
}
.home-end .ap-name{
  font-size:clamp(1.9rem,3.6vw,2.65rem);
  max-width:20ch;
}
.home-end .ap-cta{
  margin-top:1.35rem;
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .ap-chapters.home-chapters{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:920px){
  .home-hero-grid,
  .ap-split{
    grid-template-columns:1fr;
  }
  .home-xray-card .xray{
    max-height:380px;
  }
  .ap-grid{
    grid-template-columns:1fr;
  }
  .ap,.ap-grid .ap{
    min-height:clamp(440px,90vw,520px);
  }
  .ap-split{
    min-height:0;
  }
  .ap-essay{
    min-height:320px;
  }
  .ap-chapters:not(.home-chapters){
    justify-content:flex-start;
  }
}
@media (max-width:640px){
  .ap-chapters.home-chapters{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .home-hero-facts{
    grid-template-columns:repeat(2,1fr);
    gap:.85rem 1.25rem;
  }
  .hlp-meta{
    display:none;
  }
  .home-tool-pills{
    grid-template-columns:1fr;
  }
  .home-latest .latest-head{
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
  }
}
@media (prefers-reduced-motion:reduce){
  .ap-photo .ap-bg{transition:none}
  .ap-photo:hover .ap-bg{transform:none}
}
html.data-saver .ap-photo .ap-bg,
html.data-saver .ap-window img{display:none}

/* ---------- section page top: prompt, name, one line. Same block as the Work and Beyond headers ---------- */
.pg-top{position:relative;overflow:hidden;background:#08090d;color:#f2f4f8;padding:clamp(3.5rem,9vw,7rem) 1.25rem clamp(2.5rem,6vw,4.5rem)}
.pg-top::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 0,rgba(46,230,184,.12),transparent 55%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none}
.pg-top-in{position:relative;max-width:1160px;margin:0 auto}
.pg-prompt{margin:0 0 1rem;font:500 1.05rem/1.2 var(--mono);color:#9aa3b2}
.pg-prompt span{color:#2ee6b8;margin-right:.5rem}
.pg-top h1{margin:0;font:700 clamp(3.2rem,9vw,7rem)/1 var(--disp);letter-spacing:-.045em}
.pg-sub{margin:1.1rem 0 0;font:500 clamp(1.15rem,2vw,1.5rem)/1.35 var(--disp);color:#c4cad6}