/* ==========================================================================
   KOBRO — FOCUS LAYER
   Loaded last. Pulls every section into one centred column, caps the
   display type, and removes edge-of-screen decoration so the eye lands
   in the middle of the page instead of the corners.
   Change --shell to widen or narrow the whole site in one place.
   ========================================================================== */

:root{
  --shell:1120px;                                        /* content column */
  --shell-bleed:1320px;                                  /* art may sit here */
  --gutter:max(var(--pad),calc((100% - var(--shell)) / 2));
  --gutter-bleed:max(var(--pad),calc((100% - var(--shell-bleed)) / 2));
  --gap-y:clamp(56px,6vw,92px);                          /* section rhythm */
}

/* --------------------------------------------------------------------------
   1. Centre every band. Backgrounds stay full-width; content does not.
   -------------------------------------------------------------------------- */
.site-header,
.hero-v3,
.page-hero-v3,
.section-v3,
.index-strip,
.section-switcher,
.statement,
.editorial-split,
.case-facts,
.case-story,
.trip-story,
.article-layout,
.card-detail-hero,
.case-hero,
.trip-hero,
.article-head-v3,
.case-media,
.route-stage,
.market-note,
.mascot-pose-duo,
.missing,
.success-page,
.redirect-page,
.case-next,
footer{
  padding-inline:var(--gutter);
}

.index-strip a{padding:18px 20px}
.index-strip a:last-child{border-right:0}
.section-switcher a{padding-inline:20px}
.section-switcher a:last-child{border-right:0}

.section-v3{padding-block:var(--gap-y)}
.statement{padding-block:clamp(60px,7vw,110px)}

.editorial-split{gap:clamp(24px,4vw,56px);min-height:0}
.editorial-split>div{padding:clamp(32px,4vw,64px) 0}
.editorial-split>div:first-child{padding-right:clamp(24px,4vw,56px)}

.case-facts article{padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,34px)}
.case-facts article:last-child{border-right:0}
.case-story,.trip-story,.article-layout{gap:clamp(32px,4vw,64px);padding-block:var(--gap-y)}
.card-detail-hero{gap:clamp(28px,4vw,60px);padding-block:calc(var(--header) + 44px) var(--gap-y)}

.market-note{min-height:0;gap:clamp(24px,4vw,56px);padding-top:44px}
.market-note>div{padding-bottom:36px}
.market-note img{max-height:320px}
.market-intro{gap:24px}
.market-intro p{font-size:clamp(17px,1.7vw,21px);max-width:52ch}
.mascot-pose-duo>header h2{font-size:clamp(34px,4.2vw,58px)}

/* --------------------------------------------------------------------------
   2. Type scale. Same faces and weights, capped so headlines stop
      stretching the full width of a large monitor.
   -------------------------------------------------------------------------- */
.intro-word-v3{font-size:clamp(76px,15vw,190px)}
.hero-v3 h1{font-size:clamp(80px,13vw,168px)}

/* The KOBRO lockup is a masked SVG sized in vw, so it needs its own cap
   or it runs straight off the side of a wide screen. */
.brand-lockup-hero .brand-word{width:min(86%,700px)}
.brand-lockup-hero .brand-star{font-size:clamp(24px,3vw,42px);margin-left:14px}
.brand-lockup-intro .brand-word{width:min(74vw,620px)}
.brand-lockup-intro .brand-star{font-size:clamp(22px,2.6vw,38px);margin-left:14px}
.brand-lockup-footer .brand-word{width:min(56%,400px)}
.brand-lockup-footer .brand-star{font-size:clamp(18px,2vw,30px)}
.hero-footer h2{font-size:clamp(34px,4.2vw,58px)}
.hero-footer p{font-size:16px}

.page-hero-v3 h1,
.journal-hero h1{font-size:clamp(62px,10vw,128px)}
.page-hero-v3 .lede{font-size:clamp(21px,2.4vw,30px);max-width:34ch}

.section-title-v3 h2{font-size:clamp(34px,4.4vw,58px)}
.editorial-split h2{font-size:clamp(42px,6vw,86px)}
.manifesto p{font-size:clamp(21px,2.4vw,31px);max-width:24ch}
.statement p{font-size:clamp(36px,5vw,68px);max-width:16ch}
.newsletter-v3 h2{font-size:clamp(42px,5.4vw,76px)}
.newsletter-v3{gap:clamp(28px,4vw,56px)}
.footer-big{font-size:clamp(48px,7vw,104px)}

.feature-panel h3{font-size:clamp(34px,3.4vw,48px)}
.feature-panel .massive{font-size:clamp(76px,8vw,124px)}
.feature-panel p{font-size:15px}

.case-hero h1,.trip-hero h1,.article-head-v3 h1{font-size:clamp(48px,7vw,108px);max-width:14ch}
.case-hero>p,.trip-hero>p,.article-head-v3 .dek{font-size:clamp(20px,2.3vw,30px);max-width:38ch}
.case-facts p{font-size:clamp(19px,1.9vw,25px)}
.card-detail-copy h1{font-size:clamp(42px,5.4vw,80px)}
.collection-head strong{font-size:clamp(32px,4vw,54px)}
.market-note h2{font-size:clamp(38px,4.6vw,66px)}
.missing h1,.success-page h1{font-size:clamp(48px,7vw,104px)}
.redirect-page h1{font-size:clamp(34px,4vw,54px)}
.project-card h2,.post-card h2{font-size:clamp(26px,2.6vw,38px)}
.trip-card h2{font-size:clamp(24px,2.4vw,34px)}
.project-number,.post-glyph span{font-size:clamp(64px,7vw,110px)}
.product-card-v3 h3{font-size:26px}
.article-body{max-width:68ch;font-size:17px}
.article-body>p:first-child{font-size:clamp(21px,2.2vw,28px)}
.article-body h2{font-size:clamp(28px,3vw,40px)}
.article-body blockquote{font-size:clamp(23px,2.6vw,34px)}

/* --------------------------------------------------------------------------
   3. Quiet the edges. These elements lived in the corners of the viewport
      and pulled attention away from the content.
   -------------------------------------------------------------------------- */
.hero-v3:before,                 /* vertical grid ruling behind the hero */
.page-hero-v3:after,             /* oversized circle in the page headers */
.hero-meta-left,
.hero-meta-right,
.hero-bear-tag,
.page-count,
.section-title-v3 .right,
.article-seal{
  display:none;
}

/* Section headers: eyebrow over headline, short gold rule instead of a
   full-width hairline. */
.section-title-v3{
  display:block;
  border-top:0;
  padding-top:0;
  margin-bottom:clamp(28px,3.5vw,48px);
}
.section-title-v3:before{
  content:'';
  display:block;
  width:56px;
  height:2px;
  background:var(--gold);
  margin-bottom:16px;
}
.section-title-v3 h2{margin-top:8px}

/* Page headers become a single stack: label, headline, one line of intent.
   Previously the lede sat in the right-hand columns, directly under the
   mascot artwork, and the two collided on wide screens. */
.page-hero-v3{display:block}
.page-hero-v3 .crumb{margin-bottom:clamp(24px,4vw,56px)}
.page-hero-v3 h1{margin:0 0 24px}
.page-hero-v3 .lede{margin:0}

.section-title-v3 h2{max-width:20ch}
.manifesto .text-link{align-self:flex-start}
.home-feature-grid{align-items:start}
.home-feature-grid .slab{max-width:250px}
.collection-head{flex-wrap:wrap;gap:18px}

/* Mascot art follows the column instead of the window edge. */
.hero-bear{right:var(--gutter-bleed);height:min(48vh,440px)}
.about-bear,.roam-bear{right:var(--gutter-bleed);height:min(46vh,400px);opacity:.4}
.collection-hero-bear{right:var(--gutter-bleed);height:min(50vh,420px)}
.mascot-stage{min-height:0}
.mascot-stage img{height:min(38vh,340px)}
.mascot-pose-duo>div{min-height:0}
.mascot-pose-duo>div img{height:min(36vh,320px)}

/* --------------------------------------------------------------------------
   4. Grids: fewer, calmer, shorter. The staggered 12-column collage was
      built for a full-bleed page and reads as clutter inside a column.
   -------------------------------------------------------------------------- */
/* The staggered 12-column collage is replaced by an even two-up. The
   nth-child offsets in main.css/v3.css need matching specificity to undo. */
.project-grid,.blog-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,3vw,44px);
}
.project-grid .project-card:nth-child(n),
.blog-grid .post-card:nth-child(n){
  grid-column:auto;
  margin:0;
}
.project-media,.post-art{height:300px;min-height:0}
.project-mark{width:74px}

.collection-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:28px 18px}
.product-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));background:none;border:0;gap:1px}
.product-card-v3{background:var(--paper);outline:1px solid var(--line)}
.product-card-v3{min-height:0}
.product-card-v3 .product-image{height:250px}

.home-feature-grid{gap:clamp(18px,2vw,26px)}
.home-feature-grid .project-media{height:250px}
.home-feature-grid .trip-card{min-height:0;padding:20px}

.feature-triptych{grid-template-columns:repeat(3,1fr)}
.feature-panel{min-height:360px;padding:22px}
.route-mini{height:150px}

.atlas-canvas{height:min(42vw,420px);min-height:280px}
.route-stage{height:min(40vw,380px);min-height:260px;padding:36px}
.case-media{min-height:0;padding-block:var(--gap-y)}
.case-placeholder{height:min(46vh,440px)}
.case-hero,.trip-hero,.article-head-v3{min-height:0;padding-block:calc(var(--header) + 64px) 56px}
.page-hero-v3{min-height:0;padding-block:calc(var(--header) + 56px) 56px}
.hero-v3{min-height:min(86svh,760px)}

/* --------------------------------------------------------------------------
   5. Detail pages read as one centred column.
   -------------------------------------------------------------------------- */
.case-story,.trip-story,.article-layout{grid-template-columns:200px minmax(0,1fr)}
.article-rail,.case-sticky,.trip-story aside{font-size:13px}

.missing,.success-page,.redirect-page{
  min-height:0;
  padding-block:clamp(90px,12vw,150px);
  align-items:center;
  text-align:center;
}
.missing h1,.success-page h1,.redirect-page h1{max-width:none}
.missing p,.success-page p,.redirect-page p{max-width:46ch;margin-inline:auto}

/* --------------------------------------------------------------------------
   7. Journal: the atlas and the written index are one page, not two.
   -------------------------------------------------------------------------- */
.atlas-block{margin-bottom:clamp(32px,4vw,52px)}
.atlas-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.atlas-head p{margin:0;color:var(--muted);font-size:14px}
.atlas-dot{cursor:pointer}
.atlas-dot i{transition:box-shadow .25s,transform .25s}
.atlas-dot:hover i{transform:scale(1.25);box-shadow:0 0 0 12px rgba(182,149,91,.28)}

.journal-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:clamp(22px,2.5vw,34px);
}
.journal-controls .filter-row{margin:0}
.journal-controls .section-tally{margin:0;padding:0;border:0}

/* Arriving from an atlas pin. */
.post-card.is-focus .post-art{outline:2px solid var(--gold);outline-offset:4px}

/* --------------------------------------------------------------------------
   8. Small screens: the column is the screen, so give the space back.
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .project-grid,.blog-grid{grid-template-columns:1fr}
  .feature-triptych{grid-template-columns:1fr}
  .case-story,.trip-story,.article-layout{grid-template-columns:1fr}
  .editorial-split>div:first-child{padding-right:0}
  .hero-bear,.about-bear,.roam-bear,.collection-hero-bear{
    right:calc(var(--pad) * -1);
    height:min(30vh,240px);
    opacity:.24;
  }
  .hero-bear{top:12%}
  .market-note{grid-template-columns:1fr}
}
@media(max-width:560px){
  .collection-grid{grid-template-columns:1fr}
  .index-strip{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   9. Route map — named stops, hoverable, keyboard navigable.
   -------------------------------------------------------------------------- */
.route-stage{display:block;height:auto;min-height:0;padding:clamp(20px,3vw,36px)}
.route-map{display:grid;gap:clamp(16px,2vw,26px)}
.route-map .route-svg{width:100%;height:min(46vw,400px);display:block}

.route-svg polyline{stroke:rgba(246,244,241,.42);stroke-width:2}
.route-map.is-live .route-svg circle:not(.route-halo){fill:var(--gold);opacity:1;animation:none}
.route-map.is-live .route-halo{fill:transparent;opacity:1;animation:none}
.route-halo{fill:transparent;stroke:transparent;stroke-width:0}
.route-num{
  fill:rgba(246,244,241,.5);
  font:500 15px var(--mono);
  text-anchor:middle;
  transition:fill .18s;
}
.route-stop{cursor:pointer;outline:none}
.route-stop circle:not(.route-halo){transition:r .18s,fill .18s}
.route-stop.active circle:not(.route-halo){r:11;fill:var(--paper)}
.route-stop.active .route-num{fill:var(--paper)}
.route-stop:focus-visible .route-halo{stroke:var(--gold);stroke-width:2;fill:rgba(180,154,98,.12)}

.route-readout{display:grid;gap:4px;padding-top:4px;border-top:1px solid rgba(246,244,241,.16)}
.route-readout .mono{color:rgba(246,244,241,.45);font-size:10px}
.route-readout strong{font:600 clamp(20px,2.4vw,28px)/1.2 var(--serif);color:var(--paper)}
.route-readout small{color:rgba(246,244,241,.6);font-size:14px;min-height:1.2em}

.route-legend{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:rgba(246,244,241,.14);
  border:1px solid rgba(246,244,241,.14);
}
.route-legend li{background:#0d0e11}
.route-legend button{
  width:100%;height:100%;text-align:left;
  background:none;border:0;color:rgba(246,244,241,.62);
  padding:12px 14px;display:grid;gap:3px;cursor:pointer;
  transition:background .18s,color .18s;
}
.route-legend .mono{font-size:9px;color:rgba(246,244,241,.4)}
.route-legend b{font:600 14px/1.25 var(--sans);color:inherit}
.route-legend small{font-size:12px;line-height:1.35;color:rgba(246,244,241,.42)}
.route-legend li.active button,.route-legend button:hover{background:rgba(246,244,241,.08);color:var(--paper)}
.route-legend li.active b{color:var(--gold)}

@media(max-width:700px){
  .route-map .route-svg{height:250px}
  .route-legend{grid-template-columns:1fr 1fr}
}

/* Empty states */
.empty-note{
  grid-column:1/-1;
  padding:clamp(36px,5vw,64px) 0;
  color:var(--muted);
  font-size:16px;
  text-align:center;
}