.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.skip-link:focus{left:8px;top:8px;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;}



/* ============================================================
   TOKENS — shared with the GeN3 company site (index.html)
   ============================================================ */
:root{
  --paper:#EDE8DB;
  --ink:#16150F;
  --accent:#3C7A6B;
  --muted:#B4AC9B;

  --mint:#8FBAAD;
  --line:rgba(22,21,15,.22);
  --hair:rgba(22,21,15,.14);
  --edge:clamp(20px,5vw,80px);
  --h-font:"Helvetica Neue",Helvetica,"Arial Nova",Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--h-font);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0;font-weight:inherit;}
a{color:inherit;text-decoration:none;}

.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.display{font-weight:800;line-height:.9;letter-spacing:-.035em;}
.label{font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;}
.label.thin{font-weight:400;opacity:.6;}
.built-by{border-bottom:1px solid currentColor;padding-bottom:1px;opacity:.85;transition:color .25s ease,border-color .25s ease,opacity .25s ease;}
.built-by:hover{color:var(--mint);border-color:var(--mint);opacity:1;}


.nav{
  position:fixed;top:0;left:0;right:0;z-index:9997;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--edge);mix-blend-mode:difference;color:#fff;
}
.nav .brand{font-weight:800;letter-spacing:-.02em;font-size:15px;}
.nav .links{display:flex;gap:26px;}
.nav .links a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;}
.nav .links a.on{opacity:1;border-bottom:1px solid currentColor;padding-bottom:3px;}
.nav .links a:not(.on){opacity:.6;position:relative;padding-bottom:3px;transition:opacity .25s;}
.nav .links a:not(.on)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s cubic-bezier(.16,1,.3,1);}
.nav .links a:not(.on):hover{opacity:1;}
.nav .links a:not(.on):hover::after{right:0;}
@media(max-width:640px){.nav .links{display:none;}}

.band{position:relative;padding:clamp(60px,12vh,140px) var(--edge);}
.wrap{width:min(1160px,92vw);margin:0 auto;}

/* ---------- dossier framing (shared with the landing page) ---------- */
.corner-labels{position:absolute;inset:0;z-index:5;pointer-events:none;}
.cl{position:absolute;pointer-events:auto;}
.cl-tl{left:var(--edge);top:60px;}
.cl-tr{right:var(--edge);top:60px;text-align:right;}
.cl-bl{left:var(--edge);bottom:26px;}
.cl-br{right:var(--edge);bottom:26px;text-align:right;}

/* mobile — the left/right dossier corner labels collide on narrow screens.
   Keep the left-hand pair (the identifying ones) and drop the right-hand ornamentation. */
@media(max-width:760px){
  .cl-tr,.cl-br{display:none;}
  .cl{max-width:74vw;}
}

.reg{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.45;z-index:5;}
.reg::before,.reg::after{content:"";position:absolute;background:var(--ink);}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px);}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px);}
.reg.on-dark::before,.reg.on-dark::after{background:var(--paper);}
.gline{position:absolute;background:var(--line);z-index:5;}
.gline.h{left:0;height:1px;width:100%;transform-origin:left center;transform:scaleX(0);}
.gline.v{top:0;width:1px;height:100%;transform-origin:top center;transform:scaleY(0);}
.gline.on-dark{background:rgba(237,232,219,.2);}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:40px;flex-wrap:wrap;gap:12px;}
.sec-head h2{font-size:clamp(22px,3vw,40px);font-weight:800;letter-spacing:-.02em;}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;border:1px solid var(--paper);}
.btn.on-paper{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn.on-paper.solid{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn.on-paper.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.btn.on-paper.ghost:hover{background:var(--ink);color:var(--paper);}
.btn[disabled],.btn.disabled{opacity:.4;pointer-events:none;}

/* ---------- geometric marks (reused construction vocabulary) ---------- */
.mk{width:26px;height:26px;position:relative;flex:0 0 auto;}
.mk-node::after{content:"";position:absolute;inset:5px;border-radius:50%;background:currentColor;}
.mk-ring{border:1.5px solid currentColor;border-radius:50%;}
.mk-ring::after{content:"";position:absolute;inset:7px;border:1.5px solid currentColor;border-radius:50%;}
.mk-slash::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 44%,currentColor 44% 56%,transparent 56%);}
.mk-cross::before,.mk-cross::after{content:"";position:absolute;background:currentColor;}
.mk-cross::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-.75px);}
.mk-cross::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-.75px);}
.mk-bars::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 8px);}
.mk-half{border:1.5px solid currentColor;border-radius:50%;overflow:hidden;}
.mk-half::after{content:"";position:absolute;left:0;top:0;width:50%;height:100%;background:currentColor;}

/* ============================================================
   MOTION HERO — layered paper-cutout scene (horizon/skyline/palms),
   reused as the hero on every page except the landing page's own cover.
   ============================================================ */
.mb-scene{position:relative;height:100vh;overflow:hidden;background:linear-gradient(180deg,#2E6B5D 0%,var(--accent) 55%,#4a8b7a 100%);}
.mb-scene.flipped .mb-bg{transform:scaleX(-1);}
.mb-bg{position:absolute;inset:0;}
.mb-layer{position:absolute;will-change:transform;}
.mb-layer img{display:block;width:100%;height:auto;}
.mb-horizon,.mb-skyline{left:50%;top:50%;width:120%;}
.mb-skyline{filter:drop-shadow(0 3px 10px rgba(0,0,0,.4));}
.mb-palms{left:50%;top:-6%;width:150%;height:106%;}
.mb-palms img{height:100%;object-fit:cover;}

/* mobile — a 16:9 layer scaled by width can't cover a tall, narrow viewport, so the
   scene used to sit as a band with flat gradient above and below. Switch the pair to
   object-fit:cover at full-bleed height. Both layers come from the same 1672x941 canvas
   and get identical box + object-fit values, so they crop identically and the skyline
   stays locked to the waterline. */
@media(max-aspect-ratio:3/2){
  .mb-horizon,.mb-skyline{width:132%;height:132%;}
  .mb-horizon img,.mb-skyline img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;}
  .mb-palms{width:210%;height:124%;top:-12%;}
}

.mb-grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* contrast scrim — guarantees text legibility over arbitrary photo content.
   The photo has both very light (sand, sky) and very dark (buildings) regions, so
   text-shadow alone is not enough: paper-coloured type disappears over the light sand.
   This lays a directional wash under the copy, heaviest where the text actually sits. */
.mb-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(22,21,15,.82) 0%,rgba(22,21,15,.62) 26%,rgba(22,21,15,.28) 52%,rgba(22,21,15,0) 78%),
    linear-gradient(180deg,rgba(22,21,15,.42) 0%,rgba(22,21,15,0) 22%,rgba(22,21,15,0) 58%,rgba(22,21,15,.46) 100%);}
.mb-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(22,21,15,.4) 100%);}

/* ============================================================
   MASTHEAD — sits on top of the motion hero
   ============================================================ */
.ed-mast-frame{position:relative;padding-bottom:56px;display:flex;align-items:center;z-index:6;}
.ed-mast-frame .corner-labels .label{color:var(--paper);}
.ed-mast-frame .ed-kicker .label{color:var(--paper);}
.ed-mast-frame h1,.ed-mast-frame .dek{color:var(--paper);}
.ed-mast-frame h1{text-shadow:0 2px 6px rgba(0,0,0,.55),0 10px 44px rgba(0,0,0,.5);}
.ed-mast-frame .dek{opacity:.94;text-shadow:0 1px 3px rgba(0,0,0,.75),0 2px 18px rgba(0,0,0,.6);}
.ed-mast-frame .ed-pill{border-color:var(--paper);color:var(--paper);}
.ed-mast-frame .ed-pill::before{background:var(--paper);}
.ed-mast-frame .ed-pill:hover{color:var(--ink);}
.ed-mast-frame .wrap{position:relative;z-index:6;}
.ed-mast{padding-top:clamp(120px,20vh,190px);}
.ed-kicker{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.ed-kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);}
.ed-mast h1{font-size:clamp(46px,9vw,120px);max-width:14ch;}
.ed-mast .dek{font-size:clamp(15px,1.7vw,20px);line-height:1.55;opacity:.75;max-width:60ch;margin-top:26px;}

.ed-rail{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;border-top:1px solid var(--line);padding-top:26px;}
.ed-pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--ink);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .3s ease,transform .15s ease;
}
.ed-pill::before{
  content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:translateY(101%);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.ed-pill:hover{color:var(--paper);}
.ed-pill:hover::before{transform:translateY(0);}
.ed-pill:active{transform:scale(.95);}
.ed-pill .sw{width:8px;height:8px;border-radius:50%;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.ed-pill:hover .sw{transform:scale(1.35);}

/* ============================================================
   FEATURED STORY
   ============================================================ */
.ed-feat{position:relative;display:grid;grid-template-columns:1.15fr .85fr;min-height:min(78vh,720px);border:1px solid var(--line);}
.ed-feat-media{position:relative;overflow:hidden;background:var(--ink);cursor:crosshair;}
.ed-feat-media img{position:absolute;inset:-9%;width:118%;height:118%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.95);will-change:transform;}
.ed-feat-media::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,var(--accent),var(--ink));mix-blend-mode:multiply;opacity:.6;}
.ed-feat-media.true-color::after{opacity:.12;background:linear-gradient(200deg,transparent,var(--ink));}
.ed-feat-media.true-color .ed-feat-tag{background:var(--accent);}
.ed-feat-tag{position:absolute;left:28px;top:28px;z-index:3;color:var(--paper);background:var(--ink);padding:8px 14px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;will-change:transform;}
/* cursor reticle — echoes the cover hero's live-measurement cursor */
.ed-feat-reticle{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .35s ease;}
.ed-feat-reticle .r-line{position:absolute;background:var(--mint);opacity:.55;will-change:transform;}
.ed-feat-reticle .r-v{top:0;left:0;width:1px;height:100%;}
.ed-feat-reticle .r-h{left:0;top:0;height:1px;width:100%;}
.ed-feat-reticle .r-dot{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px;border:1.5px solid var(--mint);border-radius:50%;will-change:transform;}
.ed-feat-reticle .r-tag{position:absolute;left:0;top:0;color:var(--mint);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;will-change:transform;}
.ed-feat-body{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:22px;background:var(--paper);}
.ed-feat-body .num{font-size:11px;letter-spacing:.24em;opacity:.5;}
.ed-feat-body h2{font-size:clamp(26px,3.2vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.04;}
.ed-feat-body p{font-size:14.5px;line-height:1.6;opacity:.75;max-width:44ch;}
.ed-feat-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;border-top:1px solid var(--line);padding-top:16px;margin-top:6px;}
@media(max-width:900px){.ed-feat{grid-template-columns:1fr;}.ed-feat-media{height:44vh;}}

/* ============================================================
   FEED GRID
   ============================================================ */
.ed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.ed-card{position:relative;background:var(--paper);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;}
.ed-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(22,21,15,.4);}
.ed-plate{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--paper);}
.ed-plate.photo{background-size:cover;background-position:center;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.ed-plate.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(22,21,15,.05),rgba(22,21,15,.4));}
.ed-card:hover .ed-plate.photo{transform:scale(1.045);}
.ed-plate .fig{position:absolute;font-size:clamp(60px,9vw,120px);font-weight:800;opacity:.16;letter-spacing:-.04em;line-height:1;transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);}
.ed-plate .mk{width:44px;height:44px;transition:transform .45s cubic-bezier(.16,1,.3,1);}
.ed-card:hover .ed-plate .mk{transform:scale(1.18) rotate(10deg);}
.ed-card:hover .ed-plate .fig{opacity:.26;transform:scale(1.05);}
.ed-plate .plate-tag{position:absolute;left:14px;top:14px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;transition:transform .35s ease;}
.ed-card:hover .ed-plate .plate-tag{transform:translateY(-2px);}
.ed-card-body{padding:22px 20px 24px;display:flex;flex-direction:column;gap:12px;flex:1;}
.ed-card-body .cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.ed-card-body h3{font-size:clamp(17px,1.8vw,21px);font-weight:800;letter-spacing:-.015em;line-height:1.15;transition:color .25s ease;}
.ed-card:hover .ed-card-body h3{color:var(--accent);}
.ed-card-body p{font-size:12.5px;line-height:1.55;opacity:.7;}
.ed-card-body .meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.45;padding-top:10px;border-top:1px solid var(--hair);transition:border-color .3s ease;}
.ed-card:hover .ed-card-body .meta{border-color:var(--accent);}
.ed-card-body .go{opacity:0;transform:translateX(-6px);color:var(--accent);font-weight:700;transition:opacity .3s ease,transform .3s ease;}
.ed-card:hover .ed-card-body .go{opacity:1;transform:translateX(0);}
.ed-cell-fill{background:var(--paper);grid-column:span 2;}
@media(max-width:900px){.ed-grid{grid-template-columns:1fr 1fr;}.ed-cell-fill{grid-column:span 1;}}
/* single column: every card fills its own row, so the filler would just add a blank band */
@media(max-width:620px){.ed-grid{grid-template-columns:1fr;}.ed-cell-fill{display:none;}}

.ed-sample-note{font-size:12px;line-height:1.5;opacity:.55;max-width:52ch;margin-top:10px;}

/* ============================================================
   FLIPBOOK / FEED TOGGLE BANNER
   ============================================================ */
.ed-flipband{background:var(--ink);color:var(--paper);}
.ed-flip-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(237,232,219,.2);}
.ed-flip-cell{padding:clamp(30px,4vw,54px);display:flex;flex-direction:column;gap:18px;justify-content:center;}
.ed-flip-cell:first-child{border-right:1px solid rgba(237,232,219,.2);}
.ed-flip-cell .k{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);}
.ed-flip-cell h3{font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;}
.ed-flip-cell p{font-size:13.5px;line-height:1.6;opacity:.72;max-width:40ch;}
.ed-page-icon{display:flex;gap:3px;margin-bottom:4px;}
.ed-page-icon span{width:14px;height:20px;border:1.5px solid var(--mint);opacity:.7;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;}
.ed-page-icon span:nth-child(2){opacity:.9;}
.ed-page-icon span:nth-child(3){opacity:1;}
.ed-flip-cell:hover .ed-page-icon span{opacity:1;}
.ed-flip-cell:hover .ed-page-icon span:nth-child(1){transform:rotate(-14deg) translate(-3px,1px);}
.ed-flip-cell:hover .ed-page-icon span:nth-child(2){transform:translateY(-2px);}
.ed-flip-cell:hover .ed-page-icon span:nth-child(3){transform:rotate(14deg) translate(3px,1px);}
@media(max-width:760px){.ed-flip-grid{grid-template-columns:1fr;}.ed-flip-cell:first-child{border-right:0;border-bottom:1px solid rgba(237,232,219,.2);}}

/* ============================================================
   SUBSCRIBE STRIP
   ============================================================ */
.ed-sub-wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:34px 0;}
.ed-sub-wrap h3{font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;max-width:20ch;}
.ed-sub-form{position:relative;display:flex;gap:0;align-items:center;border-bottom:1px solid var(--ink);min-width:min(360px,90vw);}
.ed-sub-form::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--accent);transition:right .35s cubic-bezier(.16,1,.3,1);}
.ed-sub-form:focus-within::after{right:0;}
.ed-sub-form input{
  border:0;background:transparent;padding:10px 4px;font-family:inherit;font-size:13px;flex:1;color:var(--ink);
}
.ed-sub-form input:focus{outline:0;}
.ed-sub-form button{border:0;background:transparent;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding:10px 4px;cursor:pointer;color:var(--ink);transition:color .25s ease,transform .25s cubic-bezier(.16,1,.3,1);}
.ed-sub-form button:hover{color:var(--accent);transform:translateX(4px);}

/* ============================================================
   FOOTER (static — matches index.html footer content)
   ============================================================ */
.footer-band{background:var(--ink);color:var(--paper);}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;}
.ft-top h2{font-size:clamp(34px,8vw,110px);}
.ft-mail{font-size:clamp(16px,2vw,26px);font-weight:700;letter-spacing:-.01em;border-bottom:2px solid var(--paper);padding-bottom:2px;}
.ft-bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;border-top:1px solid rgba(237,232,219,.2);padding-top:20px;margin-top:60px;}
.ft-social{display:flex;gap:20px;flex-wrap:wrap;}
.ft-social a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;}
.ft-social a:hover{opacity:1;color:var(--mint);}

.rise{opacity:1;}

/* ---------- scroll progress rail ---------- */
.scroll-rail{position:fixed;top:16vh;bottom:16vh;right:14px;width:16px;z-index:9996;pointer-events:none;mix-blend-mode:difference;}
.scroll-rail .track{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;opacity:.25;transform:translateX(-.5px);}
.scroll-rail .fill{position:absolute;top:0;left:50%;width:1px;height:100%;background:#fff;transform:translateX(-.5px) scaleY(0);transform-origin:top center;}
.scroll-rail .pct{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:9.5px;letter-spacing:.16em;color:#fff;white-space:nowrap;font-weight:600;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
@media(max-width:760px){.scroll-rail{display:none;}}

/* ============================================================
   VIEWPORT GUARDS — appended last so these win over the base rules above.
   (An earlier attempt sat near the top of the sheet and was silently
   overridden by the original .ed-mast / .ed-mast-frame declarations.)

   1. html needs overflow-x:hidden too; body alone still let the page drag
      sideways because the document element was the thing scrolling.
   2. The dossier corner labels are pinned to the hero's corners while the
      masthead copy is flex-centred. On short viewports (laptops at 768px
      tall, phones in landscape) the copy grew into the label band. Scale the
      display type to viewport HEIGHT as well as width, drop the big inner
      padding, and once there is genuinely no room, retire the decorative
      labels rather than let them collide.
   ============================================================ */
html{overflow-x:hidden;}

/* Applied unconditionally, NOT behind a max-height query: a 768px-tall laptop is
   the exact case that broke, and it sits just outside any sensible threshold.
   Sizing the display type against viewport height as well as width is what
   actually fixes it, at every size. */
.ed-mast-frame{padding-top:max(112px,11vh);padding-bottom:56px;}
.ed-mast{padding-top:0;}
.ed-mast h1{font-size:clamp(30px,min(9vw,13vh),120px);}
.ed-mast .dek{font-size:clamp(13px,1.6vw,20px);margin-top:clamp(14px,2.4vh,26px);}
.cover-headline h1{font-size:clamp(44px,min(17vw,19vh),240px);}

@media(max-height:620px){
  .ed-mast-frame{padding-top:106px;padding-bottom:40px;} /* clears the 2-line corner label (ends ~96px) */
  .ed-mast h1{font-size:clamp(26px,min(7vw,10.5vh),120px);}
  .ed-actions{margin-top:16px;}
}

/* genuinely no room left — retire the decorative framing rather than collide */
/* On the narrowest phones the corner label wraps to a taller block (~126px),
   so the fixed floor above is not enough. */
@media(max-width:400px){
  .ed-mast-frame{padding-top:148px;}
}

@media(max-height:560px){
  .cl-tl,.cl-tr,.cl-bl,.cl-br,.cl{display:none;}
}

/* ---------- auto grid filler ----------
   Card count is dynamic in WordPress, so the trailing pad is sized in PHP and passed
   in as --fill3 / --fill2. Without this the grid's own background shows through the
   empty cells of the last row as a grey block. */
.ed-cell-fill{background:var(--paper);grid-column:span var(--fill3,2);}
@media(max-width:900px){.ed-cell-fill{grid-column:span var(--fill2,1);}}
@media(max-width:620px){.ed-cell-fill{display:none;}}

/* ==========================================================================
   Archive navigation: section chips, search, pager.
   Added when the feed became paginated; before this the grid was capped at
   twelve stories with no way to reach a thirteenth.
   ========================================================================== */

/* Section and search pages use a shorter hero. A section is a waypoint, not an
   arrival, so it should not cost a full viewport before the first card. */
.mb-scene.compact{height:min(62vh,620px);}
@media(max-width:620px){.mb-scene.compact{height:min(56vh,460px);}}

.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

.ed-sections{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:44px 0 26px;padding-bottom:18px;border-bottom:1px solid var(--hair);}
.ed-sections:first-child{margin-top:0;}
.ed-chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:9px 15px;border:1px solid var(--line);background:transparent;color:var(--ink);
  transition:background .2s,color .2s,border-color .2s;}
.chip:hover{border-color:var(--ink);}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

.ed-search{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--paper);}
.ed-search input[type=search]{appearance:none;border:0;outline:0;background:transparent;color:var(--ink);
  font:inherit;font-size:12.5px;letter-spacing:.04em;padding:9px 14px;width:clamp(140px,24vw,220px);}
.ed-search input[type=search]::placeholder{color:var(--ink);opacity:.42;}
.ed-search:focus-within{border-color:var(--ink);}
.ed-search button{border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink);
  cursor:pointer;padding:0 14px;font-size:13px;transition:background .2s,color .2s;}
.ed-search button:hover{background:var(--ink);color:var(--paper);}

.ed-empty{margin:60px 0;font-size:14.5px;line-height:1.6;opacity:.6;}

/* Pager. Page number on the left, links on the right, matching the .meta rows on the
   cards rather than introducing a second visual language for navigation. */
.ed-pag{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--hair);}
.ed-pag-at{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.45;}
.ed-pag-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.ed-pag-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;
  padding:9px 12px;border:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink);transition:background .2s,color .2s,border-color .2s;}
.ed-pag-links a.page-numbers:hover{border-color:var(--ink);}
.ed-pag-links .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.ed-pag-links .page-numbers.dots{border-color:transparent;opacity:.4;min-width:0;padding:9px 4px;}
@media(max-width:620px){
  .ed-sections{margin:32px 0 22px;}
  .ed-search input[type=search]{width:100%;}
  .ed-search{flex:1 1 100%;}
  .ed-pag{flex-direction:column;align-items:flex-start;}
}