:root{
  --ink:#292824; --ink-soft:#5f564d; --muted:#6b6456;
  --canvas:#f7f3ea; --surface:#fffcf7; --surface-2:#f3ebdd;
  --line:#eee4d6; --primary:#205b4a; --primary-hover:#1a4a3c;
  --terracotta:#d9893d; --terracotta-ink:#9e5218; --sand:#d6b26f; --teal:#087e8b;
  --font:"Inter","Inter Fallback","Segoe UI",sans-serif;
  --serif:"Playfair Display","Playfair Display Fallback",Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(20px,4.2vw,84px);
  --rule:1px solid var(--line);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* The one photographic treatment used everywhere — warm, slightly desaturated,
   so photographs from many contributors read as one publication. */
.lut{filter:brightness(.99) contrast(.96) saturate(.92) sepia(.06) hue-rotate(-3deg)}

/* ============================ masthead ============================ */
.masthead{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:saturate(1.1) blur(9px);
  border-bottom:var(--rule);
}
.masthead__inner{
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:13px var(--gutter);
}
.brand{
  flex:0 0 auto; font-family:var(--serif); font-weight:700;
  font-size:clamp(19px,1.6vw,23px); letter-spacing:-.02em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.brand .sun{color:var(--terracotta);font-style:normal;margin:0 .12em}
/* Category navigation — real links, deliberately not a filter toolbar: no pills,
   no boxes, just a line of small caps that recedes until you look for it. */
.catnav{
  flex:1 1 auto; display:flex; align-items:center; gap:clamp(14px,2vw,30px);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  /* The fade is the "there is more this way" hint, and it is driven by explore.js rather
     than pinned to the right edge: a permanent right-hand fade is a lie once you have
     scrolled to the end, and says nothing about the entries now hidden behind the left
     edge. Both widths are 0 until the script says otherwise, so a run that fits has no
     fade at all and JS-off gets a plain, fully legible row. */
  --fade-l:0px; --fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
                     #000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
                     #000 calc(100% - var(--fade-r)),transparent 100%);
}
.catnav.has-before{--fade-l:44px}
.catnav.has-after{--fade-r:44px}
.catnav::-webkit-scrollbar{display:none}
.catnav a{
  flex:0 0 auto; text-decoration:none; white-space:nowrap;
  font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); padding:5px 0; border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.catnav a:hover{color:var(--ink);border-bottom-color:var(--sand)}
.catnav a[aria-current]{color:var(--ink);border-bottom-color:var(--primary)}

/* Utility cluster — language and Info, held to the right edge. Set in the catnav's
   own small caps rather than the pill buttons the landings use: on this page the
   masthead is one typographic line, and a button in it would read as the primary
   action when neither of these is. */
.masthead__utility{
  flex:0 0 auto; display:flex; align-items:center; gap:clamp(12px,1.5vw,22px);
}
.utility-link{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap;
  font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); padding:5px 0; border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.utility-link svg{flex:0 0 auto}
.utility-link:hover{color:var(--ink);border-bottom-color:var(--sand)}
.utility-link:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}

/* Language switcher — a <details> disclosure holding three real <a href> links.
   See templates/fragments/lang-switcher.html for why it is anchors and not a
   <select>, and why it carries no JavaScript. The menu opens from the right edge
   because the switcher is the last thing in the masthead. */
.lang-switcher{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.lang-switcher__toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px 5px 0; list-style:none; cursor:pointer;
  font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b6456' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.lang-switcher__toggle::-webkit-details-marker{display:none}
.lang-switcher__toggle:hover,
.lang-switcher[open] .lang-switcher__toggle{color:var(--ink);border-bottom-color:var(--sand)}
.lang-switcher__toggle:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}
.lang-switcher__menu{
  position:absolute; top:calc(100% + 10px); right:0; left:auto; z-index:70;
  display:flex; flex-direction:column; gap:2px; min-width:150px; padding:6px;
  border:var(--rule); background:var(--surface);
  box-shadow:0 14px 40px rgba(52,39,24,.09);
}
.lang-switcher__menu .lang-switcher__link{
  display:block; padding:8px 12px; white-space:nowrap; text-decoration:none;
  font-size:13px; color:var(--ink-soft);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.lang-switcher__menu .lang-switcher__link:hover{background:var(--canvas);color:var(--ink)}
.lang-switcher__menu .lang-switcher__link:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.lang-switcher__menu .lang-switcher__link.is-current{color:var(--primary);font-weight:600}

/* ============================ cover ============================ */
.cover{padding:0 0 clamp(26px,3.6vh,50px)}
.cover__hero{position:relative}
.cover__frame{
  position:relative; margin:0;
  height:clamp(380px,68vh,760px); overflow:hidden; background:var(--surface-2);
}
.cover__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
/* Two layers, because the word moved to the middle of the frame. The radial pool
   carries the word's legibility wherever the photograph happens to be pale; the
   linear pass still weights the foot of the frame so the cover ends on a colour
   rather than on whatever the photo's bottom edge is. */
.cover__frame::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 50%,
      rgba(41,40,36,.44) 0%, rgba(41,40,36,.24) 52%, rgba(41,40,36,0) 80%),
    linear-gradient(to bottom,
      rgba(41,40,36,.26) 0%, rgba(41,40,36,0) 40%, rgba(41,40,36,.48) 100%);
}
/* Centred in the frame, the way a destination cover sets a place name. */
.cover__title{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  padding:0 var(--gutter); color:#fff; text-align:center;
}
/* Set the way a destination cover sets a place name: uppercase, tracked out, and
   restrained rather than filling the frame.

   The reference sets this in FreightBig Pro, which is licensed through Adobe Fonts
   and cannot be shipped here. Playfair Display is the page's own display serif, is
   already self-hosted and preloaded, and is the same species — a high-contrast
   display face — so the cover gets the reference's lettering with no second font
   request in front of the LCP image.

   text-indent cancels the trailing letter-space, which otherwise pushes the word a
   half-track left of true centre. */
.cover__word{
  display:block; margin:0; font-family:var(--serif); font-weight:700; color:#fff;
  font-size:clamp(34px,5.6vw,84px); line-height:1.04;
  text-transform:uppercase; letter-spacing:.06em; text-indent:.06em;
  text-shadow:0 2px 34px rgba(20,18,14,.42);
}
/* The heading is the word. Its own box carries no type of its own — everything
   visible comes from .cover__word inside it, and the full sentence sits offscreen
   beside it. */
.cover__h1{margin:0;font:inherit;letter-spacing:inherit}
.cover__credit{
  position:absolute; right:var(--gutter); top:clamp(14px,2vh,22px); z-index:2;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.cover__lede{
  max-width:none; margin:clamp(20px,3vh,36px) 0 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  /* Row gap 0: the lede is one row, and the only thing that ever lands on a second one is
     the cross-link, whose own margin sets the distance it wants from the copy above it. */
  gap:0 clamp(20px,4vw,72px); align-items:start;
}
.cover__standfirst{
  margin:0; font-family:var(--serif); font-weight:700;
  font-size:clamp(20px,2.3vw,32px); line-height:1.18; letter-spacing:-.02em;
}
.cover__body{margin:0;font-size:clamp(16px,1.15vw,18.5px);line-height:1.68;color:var(--ink-soft)}
.cover__body strong{font-weight:500;color:var(--ink)}
/* The sibling hub, offered on its own line under the intro. It sits in the lede's second
   column so it hangs off the body copy rather than under the standfirst, and is set a step
   down from the intro so it reads as an aside rather than a third paragraph of it. */
.cover__cross{
  grid-column:2; margin:clamp(12px,1.6vh,20px) 0 0;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  font-size:clamp(14.5px,1vw,16px); line-height:1.6; color:var(--muted);
}
/* Secondary, deliberately light: an outline pill on the page's own surface, no fill and no
   bold. It is an offer to leave for the other hub, and it must not outrank the chapter
   headings or the rails' Explore links, which are the page's real actions. */
.cover__crosslink{
  display:inline-flex; align-items:center; flex:0 0 auto;
  padding:8px 16px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink-soft);
  font-size:13.5px; font-weight:500; line-height:1; white-space:nowrap; text-decoration:none;
  transition:border-color .28s var(--ease),color .28s var(--ease),background-color .28s var(--ease);
}
.cover__crosslink:hover{border-color:var(--primary);color:var(--ink);background:var(--canvas)}
.cover__crosslink:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ============================ chapter ============================ */
.chapter{padding:clamp(34px,4.6vh,64px) 0 0;border-top:var(--rule)}
.chapter:first-of-type{border-top:0}
.chapter__kicker{
  margin:0 0 10px; padding:0 var(--gutter);
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terracotta-ink);
}
.chapter__kicker .num{color:var(--terracotta-ink);font-variant-numeric:tabular-nums}
.chapter__title{
  margin:0; padding:0 var(--gutter);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(38px,6vw,86px); line-height:.98; letter-spacing:-.032em;
}
.chapter__dek{
  margin:clamp(10px,1.6vh,18px) 0 0; padding:0 var(--gutter);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(18px,1.9vw,27px); line-height:1.3; letter-spacing:-.012em;
  color:var(--ink-soft); max-width:none; text-wrap:balance;
}
.chapter__body{margin:0;font-size:clamp(16px,1.1vw,18px);line-height:1.72;color:var(--ink-soft)}
.chapter__body p{margin:0 0 .85em}
.chapter__body p:last-child{margin:0}
.chapter__figure{position:relative;margin:0;overflow:hidden;background:var(--surface-2)}
.chapter__figure img{width:100%;height:100%;object-fit:cover}
.chapter__figure figcaption{
  margin-top:9px; font-size:11.5px; letter-spacing:.06em; color:var(--muted);
}

/* ===================== chapter layouts =====================
   Six compositions, one per zone. The point is that no two chapters resolve the
   same way: text and image swap sides, the image changes proportion, and one runs
   full-bleed. Repetition is what makes a page read as a template. */

.chapter__spread{padding:clamp(18px,2.6vh,34px) var(--gutter) 0}

/* Clearance for the sticky masthead when a jump link lands on a chapter. */
.chapter{scroll-margin-top:74px}

/* A — copy left, tall portrait plate right */
.lay-a .chapter__spread{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(24px,4.5vw,76px); align-items:start;
}
.lay-a .chapter__figure{aspect-ratio:4/5;border-radius:2px}
.lay-a .chapter__body{max-width:46ch}

/* B — D's move mirrored: full-bleed plate with the copy on a cream slab breaking into
   it from the right. The slab is the same object in both, but it enters from the
   opposite edge over a wider plate, so the two do not read as one composition
   repeated. B used to set the copy in a column beneath the plate, which left the
   lower-left of the chapter empty at desktop widths. */
.lay-b .chapter__spread{padding:0;position:relative}
.lay-b .chapter__figure{aspect-ratio:21/9;min-height:300px}
.lay-b .chapter__copy{
  position:relative; z-index:2;
  width:min(560px,86vw); margin:clamp(-120px,-9vw,-60px) var(--gutter) 0 auto;
  background:var(--canvas); padding:clamp(22px,3vw,38px) clamp(22px,3vw,40px) clamp(20px,2.5vw,30px);
}
.lay-b .chapter__copy .chapter__body{max-width:none}

/* C — landscape plate left, copy right (mirror of A) */
.lay-c .chapter__spread{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4.5vw,76px); align-items:start;
}
.lay-c .chapter__figure{aspect-ratio:5/4}
.lay-c .chapter__body{max-width:44ch}

/* D — full-bleed plate with the copy on a cream slab breaking into it */
.lay-d .chapter__spread{padding:0;position:relative}
.lay-d .chapter__figure{aspect-ratio:16/8;min-height:300px}
.lay-d .chapter__copy{
  position:relative; z-index:2;
  width:min(560px,86vw); margin:clamp(-120px,-9vw,-60px) 0 0 var(--gutter);
  background:var(--canvas); padding:clamp(22px,3vw,38px) clamp(22px,3vw,40px) clamp(20px,2.5vw,30px);
}
.lay-d .chapter__body{max-width:none}

/* E — a single plate bled off the left edge, copy to its right */
.lay-e .chapter__spread{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4.5vw,64px); align-items:start;
  padding-left:0;
}
.lay-e .chapter__figure{aspect-ratio:4/3}
.lay-e .chapter__body{max-width:42ch}

/* F — compact: a short wide band, copy beneath in two columns */
.lay-f .chapter__spread{padding-left:0;padding-right:0}
.lay-f .chapter__figure{aspect-ratio:24/7;min-height:190px}
.lay-f .chapter__copy{padding:clamp(16px,2.2vh,26px) var(--gutter) 0}
.lay-f .chapter__body{columns:2;column-gap:clamp(28px,4vw,64px);max-width:none}
@media (max-width:860px){.lay-f .chapter__body{columns:1}}

/* ===================== back to top =====================
   A real <a href="#top">, so it works before explore.js runs and with JS off; the
   script only decides when it is worth showing. visibility (not display) in the off
   state so it leaves the tab order and the accessibility tree while hidden, and can
   still transition on the way in. */
.to-top{
  position:fixed; z-index:70;
  right:clamp(16px,2.4vw,34px); bottom:clamp(16px,2.4vw,34px);
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  box-shadow:0 10px 30px rgba(52,39,24,.13);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s var(--ease),
             border-color .28s var(--ease),color .28s var(--ease);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--primary);color:var(--primary)}
.to-top:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.to-top svg{width:17px;height:17px;fill:none;stroke-width:1.8}

/* ===================== place collection ===================== */
.collection{margin-top:clamp(20px,3vh,36px)}
.collection__head{
  display:flex; align-items:baseline; gap:20px;
  padding:0 var(--gutter) 16px;
}
/* Carousel dots under the rail, one per rail-width of scrolling. The strip always
   occupies its height — .is-single hides it with visibility, never display — so a rail
   with nothing to page through leaves the same gap as one that pages, and filling the
   strip in after load cannot move the section below it. */
.rail-dots{
  display:flex; justify-content:center; align-items:center; gap:2px;
  min-height:26px; padding:0 var(--gutter);
}
.rail-dots.is-single{visibility:hidden}
/* The button is the touch target; the dot is what you see. */
.rail-dot{
  width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.rail-dot::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--line);
  transition:background-color .28s var(--ease),width .28s var(--ease),height .28s var(--ease);
}
.rail-dot:hover::before{background:var(--sand)}
.rail-dot[aria-current="true"]::before{width:9px;height:9px;background:var(--primary)}
.rail-dot:focus-visible{outline:2px solid var(--primary);outline-offset:-3px;border-radius:50%}

.rail{
  display:flex; gap:clamp(14px,1.8vw,26px);
  /* Vertical room for the card's lift on hover and for its drop shadow — the rail
     scrolls on x, and overflow-x:auto clips on y too, so a tight padding would
     shave both off. */
  padding:8px var(--gutter) 22px;
  overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-padding-left:var(--gutter);
}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.is-dragging a{pointer-events:none}

/* ===================== place card =====================
   The card from the explore overlay-card work: a full-bleed photograph over a
   solid dark ground that the type sits on, rather than bare type under a loose
   photo. Two things carried over from that design deliberately:

   1. THE PHOTO KEEPS A 4:3 WINDOW. It was 4:5 here, which is the shape almost
      none of the catalog was shot in — `cover` into it throws away 40% of a 4:3
      source and 55% of a 16:9 one, so Kandaya lost its pool and half its
      building and the framing the editor chose stopped being the framing a
      visitor saw. At 4:3 a 4:3 source is uncropped and a 16:9 one loses 25%.
      The template also passes each photo's own `object-position`
      (Place#imageFocalPoints) inline, so where an editor has set a crop it wins
      over the 50% 50% default below.
   2. THE PHOTO DISSOLVES INTO THE GROUND. The gradient on the frame's foot means
      the seam between photograph and card is never a visible edge, whatever the
      photo ends on.

   The ground is a warm charcoal rather than that card's slate-950: every photo
   on this page already carries the warm `.lut` grade, and a blue-black card under
   a warm photograph on a cream page reads as two palettes. It is the same card,
   toned to this page.

   Cards stretch to the tallest in their rail (the rail is a flex row), so the
   height is uniform without being hardcoded — nothing can overflow at a width
   the clamps were not measured at. */
.teaser{
  --card-ground:26,24,21;
  flex:0 0 clamp(210px,21vw,292px); scroll-snap-align:start; display:flex;
}
.teaser article{display:flex;width:100%}
.teaser a{
  text-decoration:none; display:flex; flex-direction:column; width:100%;
  position:relative; isolation:isolate; overflow:hidden; border-radius:10px;
  background:rgb(var(--card-ground));
  box-shadow:0 1px 2px rgba(41,40,36,.06),0 12px 28px -16px rgba(41,40,36,.5);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.teaser a:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 5px rgba(41,40,36,.08),0 22px 40px -18px rgba(41,40,36,.6);
}
/* display:block matters — a <span> is inline by default and would ignore
   aspect-ratio, letting each photograph size itself and leaving the row ragged. */
.teaser__frame{
  display:block; position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--surface-2); flex:0 0 auto;
}
.teaser__frame img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .9s var(--ease);
}
.teaser__frame::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:30%; pointer-events:none;
  background:linear-gradient(to top,
    rgb(var(--card-ground)) 0%,
    rgba(var(--card-ground),.55) 44%,
    rgba(var(--card-ground),0) 100%);
}
.teaser a:hover .teaser__frame img{transform:scale(1.045)}
.teaser__body{
  flex:1 1 auto; display:flex; flex-direction:column;
  padding:13px clamp(14px,1.2vw,18px) 17px;
}
.teaser__name{
  margin:0 0 4px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:calc(2 * 1.22em);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(17px,1.35vw,20px); line-height:1.22; letter-spacing:-.014em;
  color:#fffdf9;
}
.teaser a:hover .teaser__name{text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:4px;text-decoration-thickness:1.5px}
/* Sand, not the terracotta ink used on cream — that tone is chosen for contrast
   against a light page and goes muddy on a dark ground. */
.teaser__meta{
  margin:0; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sand);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.teaser__teaser{
  margin:7px 0 0; font-size:13.5px; line-height:1.5; color:#cfc9bd;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:calc(2 * 1.5em);
}

/* ===================== area link =====================
   Heads the rail it belongs to, in the slot the "Places in ..." label used to hold:
   the reader meets the area's own landing before the cards, not after them. */
.more-link{
  display:inline-flex; align-items:baseline; gap:10px; text-decoration:none;
  font-family:var(--serif); font-weight:700; font-size:clamp(16px,1.35vw,21px);
  letter-spacing:-.012em; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:color .28s var(--ease),border-color .28s var(--ease),gap .28s var(--ease);
}
.more-link:hover{color:var(--primary);border-bottom-color:var(--primary);gap:15px}

/* ===================== guide interludes =====================
   Eight guides sit between the chapters, all in one form: a rule across the page
   with a thumbnail, kicker, title, description and a Read link. */
.interlude{position:relative}
.interlude__kicker{
  margin:0 0 9px; font-size:10.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--primary);
}
.interlude__title{
  margin:0; font-family:var(--serif); font-weight:700; letter-spacing:-.022em;
  line-height:1.1;
}
.interlude__title a{
  text-decoration:none; color:inherit;
  background-image:linear-gradient(var(--sand),var(--sand));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .34s var(--ease);
}
.interlude__title a:hover{background-size:100% 2px}
.interlude__desc{margin:10px 0 0;color:var(--ink-soft);line-height:1.66}
.interlude__go{
  display:inline-flex; align-items:baseline; gap:9px; margin-top:14px;
  text-decoration:none; font-size:12px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--primary);
  border-bottom:1px solid rgba(32,91,74,.3); padding-bottom:3px;
  transition:border-color .28s var(--ease),gap .28s var(--ease);
}
.interlude__go:hover{border-bottom-color:var(--primary);gap:14px}
.interlude__frame{margin:0;overflow:hidden;background:var(--surface-2)}
.interlude__frame img{width:100%;height:100%;object-fit:cover}

/* --- B: note. A single rule across the page — the smallest possible way to say
       "there is a guide about this" without building a card. --- */
.interlude{
  margin:clamp(20px,2.8vh,34px) 0; padding:0 var(--gutter);
}
.interlude .interlude__inner{
  display:flex; align-items:center; gap:clamp(14px,2vw,24px);
  border-bottom:var(--rule);
  padding:clamp(11px,1.5vh,15px) 0; text-decoration:none;
}
/* Only the first row carries the heavy rule, so two stacked guides read as one
   block rather than two boxes with a doubled edge between them. */
.interlude .interlude__inner:first-child{border-top:1px solid var(--ink)}
.interlude .interlude__frame{
  flex:0 0 auto; width:clamp(56px,6vw,82px); aspect-ratio:1/1; border-radius:2px;
}
.interlude .interlude__text{flex:1;min-width:0}
.interlude .interlude__kicker{display:block;margin-bottom:4px}
.interlude .interlude__title{display:block;font-size:clamp(17px,1.5vw,23px)}
.interlude .interlude__desc{
  display:block; margin-top:5px; font-size:14px; line-height:1.55; max-width:64ch;
}
.interlude .interlude__arrow{
  flex:0 0 auto; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--primary); white-space:nowrap;
}
.interlude .interlude__arrow span{display:inline-block;transition:transform .28s var(--ease)}
.interlude .interlude__inner:hover .interlude__arrow span{transform:translateX(5px)}

@media (max-width:860px){
  .interlude .interlude__arrow{display:none}
}

/* ===================== colophon ===================== */
.colophon{padding:clamp(32px,4.6vh,58px) var(--gutter) clamp(36px,5.2vh,66px)}
.colophon__inner{max-width:1400px;margin:0 auto}
.colophon h2{
  margin:0 0 clamp(18px,2.5vh,28px); font-family:var(--serif); font-weight:700;
  font-size:clamp(20px,2vw,28px); letter-spacing:-.02em;
}
.colophon__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,48px)}
.colophon__col h3{
  margin:0 0 11px; font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.colophon__col ul{list-style:none;margin:0;padding:0}
.colophon__col li{margin:0 0 7px}
.colophon__col a{
  text-decoration:none; font-size:15px; color:var(--ink-soft);
  border-bottom:1px solid transparent; transition:color .28s var(--ease),border-color .28s var(--ease);
}
.colophon__col a:hover{color:var(--ink);border-bottom-color:var(--sand)}

/* ===================== legal footer =====================
   fragments/legal-footer is shared chrome that carries no styling of its own — its
   rules live in map.css, which this page deliberately does not load, so the block
   was rendering as raw markup: no gutter, links running together inline. Rather
   than pulling in a 6,000-line sheet for one element, the fragment is dressed here
   in this page's own idiom. These selectors mirror that fragment's class names, so
   they have to move with it. */
.site-legal-footer{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(22px,4vw,64px);
  padding:clamp(24px,3.4vh,40px) var(--gutter) clamp(34px,5vh,60px);
  border-top:var(--rule);
}
.site-legal-footer__wordmark{margin:0 0 9px;line-height:1}
.brand-lockup{position:relative;display:inline-flex;align-items:center;line-height:1}
.brand-wordmark{
  display:inline-flex; align-items:flex-end;
  font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:-.02em;
  line-height:1; text-transform:lowercase; white-space:nowrap;
}
.brand-cebu,.brand-zone{color:var(--ink)}
.brand-joiner{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-end;
  width:.55em; margin:0 .08em; padding-bottom:.02em; flex:0 0 auto; line-height:0;
}
.brand-sun{display:block;width:14px;height:12px;margin:0 0 .12em;color:var(--terracotta);flex:0 0 auto}
.site-legal-footer__tagline{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.site-legal-footer__disclaimer{
  margin:13px 0 0; font-size:12.5px; line-height:1.6; color:var(--muted); max-width:62ch;
}
.site-legal-footer__disclaimer a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.site-legal-footer__disclaimer a:hover{color:var(--primary)}
.site-legal-footer__heading{
  margin:0 0 11px; font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
/* The fragment lists these as bare anchors with no wrapper, so the column itself
   has to be the flex context — otherwise they set as one run of inline text. */
.site-legal-footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.site-legal-footer__col a{
  font-size:15px; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .28s var(--ease),border-color .28s var(--ease);
}
.site-legal-footer__col a:hover{color:var(--ink);border-bottom-color:var(--sand)}
.site-legal-footer__col a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}

/* ===================== mobile =====================
   Rebuilt, not shrunk: every chapter collapses to one column, the plates keep real
   presence, and the rails stay the horizontal gesture they are on desktop. */
@media (max-width:860px){
  :root{--gutter:18px}
  body{font-size:16px}

  /* Two rows, not three: brand and the utility cluster share the first, the category
     run wraps below. Ordered with flex rather than by moving the markup, so the
     document order stays brand -> categories -> utility at every width. */
  .masthead__inner{padding:11px 0 0;flex-flow:row wrap;align-items:center;gap:0}
  .brand{order:0;padding:0 var(--gutter) 9px}
  .masthead__utility{order:1;margin-left:auto;padding:0 var(--gutter) 9px 0;gap:16px}
  .catnav{order:2;flex-basis:100%;padding:0 var(--gutter) 9px;gap:18px}

  /* Wide, not tall. A viewport-height cover reads as a portrait plate on a phone and
     pushes the standfirst most of a screen down; an aspect ratio keeps the landscape
     proportion the cover is composed for and costs a fraction of the vertical space. */
  .cover__frame{height:auto;aspect-ratio:16/9;min-height:190px}
  .cover__word{font-size:clamp(30px,8.4vw,44px);letter-spacing:.05em;text-indent:.05em}
  .cover__lede{grid-template-columns:1fr;gap:14px;margin-top:26px}
  /* One column here, so the second-column placement would push it off the grid. */
  .cover__cross{grid-column:1;margin-top:2px}

  .chapter{scroll-margin-top:104px}
  .chapter__title{font-size:clamp(36px,11vw,58px)}
  .chapter__dek{font-size:clamp(17px,4.6vw,22px);text-wrap:pretty}

  .lay-a .chapter__spread,
  .lay-c .chapter__spread,
  .lay-e .chapter__spread{grid-template-columns:1fr;gap:20px}
  .lay-a .chapter__figure{aspect-ratio:3/2}
  .lay-c .chapter__spread{display:flex;flex-direction:column-reverse;gap:20px}
  .lay-c .chapter__figure{aspect-ratio:3/2}
  .lay-b .chapter__figure{aspect-ratio:3/2;min-height:0}
  .lay-b .chapter__copy{width:auto;margin:-46px var(--gutter) 0;padding:20px}
  .lay-d .chapter__figure{aspect-ratio:3/2;min-height:0}
  .lay-d .chapter__copy{width:auto;margin:-46px var(--gutter) 0;padding:20px}
  .lay-e .chapter__spread{padding-left:var(--gutter)}
  .lay-e .chapter__figure{aspect-ratio:3/2}
  .lay-f .chapter__figure{aspect-ratio:16/7;min-height:0}

  .teaser{flex:0 0 68vw}

  .site-legal-footer{grid-template-columns:1fr;gap:26px}

}
@media (max-width:420px){
  .teaser{flex:0 0 74vw}
}