:root{
  --paper:#F0EEE9;   /* Cloud Dancer — the only light on the site */
  --ink:#131313;
  --muted:#77746F;
  --rule:rgba(19,19,19,.14);
  --dark:#121110;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --gut:14px;
  --pad:34px;

  /* ---- Agency Kilo mark ----
     One angle drives the plate and every wedge on the site.
     --tan must equal tan(angle). Measured off the reference: 40.7deg
     36deg = .7265 | 38deg = .7813 | 40.7deg = .8610 | 43deg = .9325 | 45deg = 1 */
  --cloud:#F0EEE9;          /* Cloud Dancer */
  --tan:.8610;
  --wedge-l:40%;          /* base default; hero and page tops both use --wedge-mh */
  --wedge-mh:clamp(390px,35vw,700px);  /* the page-top mark, hero and interior alike */
  --wedge-stub:clamp(112px,13.2vw,232px);  /* the tail of the shape, kept on screen */
  --ramp:88px;              /* gallery tab: shallow relative of the same diagonal */
  /* mastheads share --wedge-l, so every page top matches the homepage */
  /* Measured off the live site at a 1889px viewport: lockup canvas 118px tall,
     47px in from the window edge, 48px of air above it and 54px below — so it
     sits a little ABOVE centre, which is why the gaps are separate tokens. */
  --logo-h:clamp(60px,6.25vw,135px);    /* header lockup, canvas height */
  --logo-top:clamp(30px,4.13vw,90px);   /* lockup only: air above it */
  --logo-inset:clamp(12px,2.28vw,50px); /* lockup only: in from the page edge */

  /* ---- the lockup below the nav breakpoint, controlled on its own ----
     These four take over at max-width:900px — the same point the nav collapses
     to a burger — and can be changed without touching the desktop values. */
  --m-logo-h:84px;        /* canvas height */
  --m-logo-top:14px;      /* air above it */
  --m-logo-inset:2px;     /* in from the page edge, on top of --pad (18px) */
  --m-bar:128px;          /* the plate below the breakpoint */
  /* plate = lockup + air both sides + the drop, so nothing gets squeezed */
  /* The plate height is now its own token, not derived from the lockup, so
     --logo-top and --logo-inset move the logo without resizing the header.
     Set from the live site: 220px at a 1889px viewport. Keep
     --logo-top + --logo-h under --bar or the lockup spills past the plate. */
  --bar:clamp(106px,11.65vw,252px);
  /* The two lockups are different artwork: the circle fills 79.9% of the GIF's
     canvas but 85.9% of the SVG's. This factor makes the marks read the same
     size on screen rather than merely sharing a height. */
  --mark-ratio:1.0751;
  --footer-mark:.85;        /* closing mark, sized down against the header one */
  --ease:cubic-bezier(.16,1,.3,1);
}

/* the mark: one right triangle dropping out of the plate */
.wedge{position:absolute;top:0;left:0;z-index:3;pointer-events:none;
  background:var(--cloud);aspect-ratio:1/var(--tan);
  width:var(--wedge-l);clip-path:polygon(0 0,100% 0,0 100%);
  transition:width 1.05s var(--ease)}
.wedge.shut{width:230%}      /* closed: the mark covers the frame */

/* The tail of the diagonal, pinned under the plate.
   It shares the big wedge's apex and angle exactly, so at the top of the page
   it sits hidden inside it — then the large shape scrolls away and leaves this
   behind. No fade, no pop: the same shape, just what's left of it. */
#stub{position:fixed;z-index:2;top:var(--bar);left:0;
  width:var(--wedge-stub);aspect-ratio:1/var(--tan);
  background:var(--cloud);clip-path:polygon(0 0,100% 0,0 100%);
  pointer-events:none}
/* The pinned tail is fixed at z-index 2 so it shows over the page-top imagery.
   Body content below the fold has to sit above it, or the tail paints over
   whatever lands in the top-left corner — the sector filters were disappearing
   behind it. Page tops (#hero, .masthead, .entry) stay below it deliberately,
   because showing through them is the whole point. */
main > :where(.filters,.grid,.band,.prose,.services,.svc-list-wrap,.posts,.seeall,
              .cs-facts,.cs-col,.cs-full,.cs-pair,.cs-outcome,.cs-next,
              .entry-nav,.case),
footer{position:relative;z-index:3}

.wedge.r{display:none}       /* retired — the plate does this job now */
/* mirrored into the opposite corner, same angle — used on gallery tiles */
.wedge.br{top:auto;left:auto;bottom:0;right:0;
  clip-path:polygon(100% 0,100% 100%,0 100%)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:var(--bar)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}

/* ---------------- the plate ---------------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--bar);
  background:var(--cloud);color:var(--ink);box-sizing:border-box;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--pad)}
/* The lockup is positioned from the top of the plate by its own offsets, so
   --logo-top and --logo-inset move it alone. The nav stays vertically centred
   in the plate and keeps its distance from the right edge either way. */
#logo{display:flex;align-items:flex-start;align-self:flex-start;color:var(--ink);
  margin-top:var(--logo-top);
  padding-left:var(--logo-inset)}
#logo img{height:var(--logo-h);width:auto;display:block}
nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);font-size:14px;letter-spacing:-.005em}
/* the icons sit tight to each other and are set apart from the word links by a
   hairline, so they read as a pair rather than as two more items in the row */
.socials{display:flex;align-items:center;gap:2px;
  margin-left:clamp(4px,0.6vw,10px);
  padding-left:clamp(14px,1.7vw,26px);
  border-left:1px solid rgba(19,19,19,.22)}
nav a{transition:opacity .2s}
nav a:hover{opacity:.55}
nav a.on{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* real icons rather than letterforms in a circle: the mark is drawn in ink on
   the plate, and the circle fills behind it on hover so the glyph knocks out */
.social{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:transparent;
  transition:background .25s var(--ease),color .25s var(--ease)}
.social svg{width:19px;height:19px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.social svg .dot{fill:currentColor;stroke:none}
.social:hover,.social:focus-visible{background:var(--ink);color:var(--cloud)}
.cta{background:var(--ink);color:var(--cloud);padding:13px 22px;font-size:14px;
  margin-left:8px;transition:opacity .2s}
.cta:hover{opacity:.82}

/* ---------------- hero ---------------- */
/* tuck the page top 1px under the plate: --bar resolves to a fractional pixel
   value, and the rounding leaves a hairline of the dark backdrop at the seam */
#hero,.masthead,.entry{margin-top:-1px}
#hero{height:calc(100svh - var(--bar));position:relative;overflow:hidden;background:#111}
#hero .media{position:absolute;inset:0}
/* .media-in carries the push-in so the scrim below never scales with it, and
   so a <video> is never itself transformed — see the note on .mh-media. */
#hero .media-in{position:absolute;inset:0}
#hero .media img,#hero .media video{width:100%;height:100%;object-fit:cover;
  object-position:center}
#hero .media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.62),rgba(10,10,10,.05) 55%,rgba(10,10,10,.35))}
#hero .type{position:absolute;left:var(--pad);right:var(--pad);bottom:56px;color:var(--cloud);z-index:4}
/* strapline rides the left wedge, in ink on Cloud Dancer */
#hero h1{font-size:clamp(30px,5.9vw,94px);line-height:.94;letter-spacing:-.045em;font-weight:500;
  max-width:none}
#hero .sub{margin-top:24px;display:flex;gap:34px;flex-wrap:wrap;font-size:14px;
  border-top:1px solid rgba(240,238,233,.28);padding-top:16px;max-width:640px}
#hero .sub span{opacity:.8}

.reveal-mask{clip-path:inset(0 0 100% 0)}
.hero-in .reveal-mask{clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.hero-in h1{transition-delay:.1s}
#hero .media-in{transform:scale(1.1);transition:transform 2.4s cubic-bezier(.16,1,.3,1)}
.hero-in #hero .media-in{transform:scale(1)}

/* ---------------- case study panels ---------------- */
.case{position:relative}
.case .pin{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));overflow:hidden}
.case .frame{position:absolute;inset:0;overflow:hidden;display:block;cursor:pointer}
.case .frame:focus-visible{outline:2px solid var(--cloud);outline-offset:-6px}
.case h2 a{color:inherit;text-decoration:none}
.case h2 a:focus-visible{outline:2px solid var(--cloud);outline-offset:4px}
/* The homepage case frames take an optional hero.mp4 alongside hero.jpg.
   The jpg is the video's poster, so with no mp4 uploaded the still shows
   and nothing breaks. */
.case .frame img,.case .frame video{width:100%;height:100%;object-fit:cover;
  transform-origin:center}
.case .plate{position:absolute;left:var(--pad);bottom:52px;right:var(--pad);color:var(--cloud);
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.case .idx{position:absolute;z-index:4;left:var(--pad);top:clamp(66px,10vh,138px);color:var(--cloud);
  font-size:13.5px;line-height:1.55;opacity:0}
.case .plate{z-index:4}
.case h2{font-size:clamp(34px,5.6vw,86px);line-height:.92;letter-spacing:-.045em;font-weight:500}
.case .where{margin-top:14px;font-size:14.5px;opacity:.82;line-height:1.55}
.case .win{font-size:14px;line-height:1.6;max-width:34ch;opacity:.9;
  border-left:1px solid rgba(240,238,233,.4);padding-left:16px}
.case .more{display:inline-block;margin-top:22px;font-size:13.5px;
  border-bottom:1px solid rgba(240,238,233,.5);padding-bottom:3px}
.case .more:hover{border-color:var(--cloud)}
.case .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.7),rgba(10,10,10,0) 58%)}

/* ---------------- sections ---------------- */
.band{padding:96px var(--pad) 30px;display:flex;justify-content:space-between;
  align-items:baseline;gap:24px;flex-wrap:wrap;border-top:1px solid var(--rule);
  margin:0 var(--pad);padding-left:0;padding-right:0}
.band h3{font-size:clamp(24px,3vw,40px);letter-spacing:-.035em;font-weight:500;line-height:1}
.band .note{font-size:14px;color:var(--muted);max-width:38ch;line-height:1.6}

/* work grid */
/* A masonry column layout, not a grid of fixed slots. Every image keeps its
   own proportions and is never cropped, which is the point of a portfolio: a
   tall interior and a wide landscape are different pictures, and forcing both
   into one box throws away part of each. Columns also need no knowledge of the
   image dimensions, so nothing has to be measured at build time. */
.grid{column-count:3;column-gap:var(--gut);padding:26px var(--pad) 0}
.tile{display:block;position:relative;overflow:hidden;background:#E3E1DC;cursor:pointer;
  color:inherit;text-decoration:none;
  break-inside:avoid;margin-bottom:var(--gut);
  opacity:0;transform:translateY(26px)}
.tile.seen{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.tile img,.tile video{width:100%;height:auto;display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.tile:hover img,.tile:hover video{transform:scale(1.035)}
/* tiles carry a small resting mark; hovering opens it and the name arrives on it */
.tile .wedge{display:none}
/* a quieter relative of the mark: shallow angle, rises from the bottom edge */
/* same form as the viewer caption and the footer: a full-bleed diagonal
   rising left to right, with the text in the tall right-hand side.
   aspect-ratio holds the angle as tiles grow; min-height keeps two lines of
   type inside the shape on narrow tiles. */
.tile .lab{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  position:absolute;z-index:4;left:0;right:0;bottom:-3px;width:100%;
  aspect-ratio:14 / 1;min-height:71px;
  background:var(--cloud);color:var(--ink);
  font-size:11.5px;line-height:1.3;text-align:right;
  padding:0 14px 14px 0;
  clip-path:polygon(-2px calc(100% - 51px),calc(100% + 2px) -2px,
    calc(100% + 2px) calc(100% + 2px),-2px calc(100% + 2px));
  transform:translateY(101%);
  transition:transform .5s var(--ease)}
.tile:hover .lab,.tile:focus-within .lab{transform:none}
.tile .lab b{font-weight:500;display:block;font-size:13.5px;letter-spacing:-.02em;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tile .lab span{color:var(--muted);display:block;margin-top:2px}
/* kept so the markup still validates against older builds; a column layout
   ignores grid-column, and no aspect-ratio means no crop */
.s7,.s6,.s5,.s4{grid-column:auto}

/* filters */
.filters{display:flex;gap:22px;flex-wrap:wrap;padding:0 var(--pad);
  margin-top:clamp(44px,6.5vh,86px);font-size:14px}
.filters button{color:var(--muted);padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--ink);border-color:var(--ink)}
.count{margin-left:auto;color:var(--muted);font-size:13px;align-self:center}

/* views */

/* contact */
footer{margin-top:110px;padding:64px var(--pad) 40px;border-top:1px solid var(--rule)}
footer .big{font-size:clamp(30px,5.2vw,74px);letter-spacing:-.045em;line-height:.98;font-weight:500}
footer .big a{border-bottom:2px solid var(--rule)}
footer .big a:hover{border-color:var(--ink)}
footer .row{margin-top:44px;display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);line-height:1.7}

/* ---------------- viewer ---------------- */
#viewer{position:fixed;inset:0;z-index:80;background:var(--dark);
  opacity:0;visibility:hidden;transition:opacity .4s ease;cursor:grab;overscroll-behavior:contain}
#viewer.open{opacity:1;visibility:visible}
#viewer.drag{cursor:grabbing}
#canvasWrap{position:absolute;inset:0;overflow:hidden}
#pic{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#pic video{width:100%;height:100%;object-fit:fill;display:block}
#pic img{width:100%;height:100%;-webkit-user-drag:none;user-select:none}
/* ---- viewer chrome ----
   Both shapes span the full width, so their angled edges run corner to corner.
   Height is set directly rather than derived from the brand angle: at a fixed
   angle a full-width triangle would be taller than the screen on a desktop.
   The consequence is that the edge is much shallower on a wide monitor than on
   a phone, which is the point — it stays a band rather than becoming a wedge.
   Close sits top-left, the caption bottom-right. */
#vtop{position:fixed;z-index:82;left:0;right:0;bottom:0;top:auto;
  width:100%;height:clamp(104px,13.5vh,196px);
  background:var(--cloud);color:var(--ink);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  padding:0 var(--pad) 22px 0;text-align:right;
  pointer-events:none;opacity:0;transition:opacity .4s}
#viewer.open ~ #vtop{opacity:1}
#vtop .who{max-width:62%}
#vtop .who b{font-weight:500;font-size:clamp(16px,1.7vw,25px);letter-spacing:-.03em;display:block}
#vtop .who div{font-size:clamp(12.5px,1vw,14px);color:#3B3833;margin-top:5px;line-height:1.5}

#vtools{position:fixed;z-index:82;left:0;right:0;top:0;bottom:auto;
  width:100%;height:clamp(104px,13.5vh,196px);
  background:var(--cloud);color:var(--ink);
  clip-path:polygon(0 0,100% 0,0 100%);
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:16px 0 0 calc(var(--pad) - 6px);
  pointer-events:none;opacity:0;transition:opacity .4s}
#viewer.open ~ #vtools{opacity:1}
#vtools>*{pointer-events:auto}
/* zoom readout and Fit are gone: pinch, scroll and double-click already do both */
#vtools .z,#vfit{display:none}
#vtools .btns{display:flex}
#vtools #vclose{position:relative;width:62px;height:62px;
  border:0;border-bottom:0;font-size:0;padding:0;min-height:0}
#vtools #vclose:before,#vtools #vclose:after{content:"";position:absolute;
  left:13px;top:30px;width:36px;height:2.5px;background:var(--ink);border-radius:1px}
#vtools #vclose:before{transform:rotate(45deg)}
#vtools #vclose:after{transform:rotate(-45deg)}
#vtools #vclose:hover:before,#vtools #vclose:hover:after{background:#000}

/* The filmstrip is anchored to the bottom edge of the image itself, not to the
   window. At full bleed it sits below the fold; pan the picture up or zoom out
   and it comes into view under it. JS sets the vertical offset in draw(). */
#strip{position:fixed;z-index:81;left:0;right:0;top:0;
  display:flex;gap:8px;justify-content:center;
  overflow-x:auto;overflow-y:hidden;
  padding:16px var(--pad) 20px;
  pointer-events:none;opacity:0;transition:opacity .35s;
  will-change:transform;-webkit-overflow-scrolling:touch}
#viewer.open ~ #strip{opacity:1;pointer-events:auto}
#strip button{flex:0 0 auto;width:96px;height:62px;overflow:hidden;opacity:.45;
  outline:1px solid rgba(240,238,233,.22);outline-offset:-1px;
  transition:opacity .25s,outline-color .25s}
#strip button img,#strip button video{width:100%;height:100%;object-fit:cover;display:block}
#strip button.on,#strip button:hover{opacity:1;outline-color:rgba(240,238,233,.75)}
#varr{position:fixed;z-index:82;top:50%;left:0;right:0;transform:translateY(-50%);
  display:flex;justify-content:space-between;padding:0 18px;pointer-events:none;opacity:0;transition:.35s}
#viewer.open ~ #varr{opacity:1}
#varr button{pointer-events:auto;color:var(--cloud);opacity:.45;font-size:30px;padding:16px;line-height:1}
#varr button:hover{opacity:1}
.vhide{visibility:hidden !important;opacity:0 !important}

/* ---------------- page masthead: the plate, then the mark, on every page ---------------- */
.masthead{position:relative;overflow:hidden;background:#111;
  /* full screen, like the homepage hero */
  height:calc(100svh - var(--bar))}
/* the mark itself is smaller than the hero's, so it reads as an interior page */
/* the hero uses the same mark as every other page top */
#hero .wedge,.masthead .wedge{width:var(--wedge-mh)}
/* The slow push-in scales the WRAPPER, never the img or video inside it.
   Transforming a <video> directly promotes it to its own compositor layer,
   and on iOS that layer stops honouring object-fit — the header then paints
   at the wrong aspect ratio, or not at all against the #111 background. */
.masthead .mh-media{position:absolute;inset:0;
  transform:scale(1.08);transition:transform 1.9s var(--ease)}
.masthead.open .mh-media{transform:scale(1)}
.masthead .mh-media img,.masthead .mh-media video{width:100%;height:100%;object-fit:cover}
.masthead .wedge.shut{width:230%}
/* The page title is hidden visually so nothing competes with the lockup, but
   it stays in the markup: every page still has an h1 for search and for screen
   readers. Journal entry titles are content, not labels, so they stay visible. */
.masthead .mh-type{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  z-index:4;left:var(--pad);top:clamp(52px,8.9vh,118px);color:var(--ink);
  opacity:0;transition:opacity .6s var(--ease) .55s}
.masthead.open .mh-type{opacity:1}
.masthead h1{font-size:clamp(24px,2.55vw,52px);line-height:.96;letter-spacing:-.04em;font-weight:500;
  max-width:9ch}

.seeall{padding:clamp(54px,7vh,110px) var(--pad) 0}
.seeall a{font-size:clamp(15px,1.5vw,19px);letter-spacing:-.02em;
  border-bottom:1px solid var(--rule);padding-bottom:4px;
  transition:border-color .25s var(--ease)}
.seeall a:hover{border-color:var(--ink)}

/* ---------------- interior page body ---------------- */
.prose{padding:64px var(--pad) 0;display:grid;gap:clamp(24px,4vw,64px);
  grid-template-columns:repeat(12,1fr)}
.prose .col{grid-column:span 6;font-size:16.5px;line-height:1.65;max-width:52ch}
.prose .col p+p{margin-top:1.1em}
/* the opening statement: a step up from body copy, not a page heading */
.prose .col h2{font-size:clamp(21px,1.75vw,30px);line-height:1.3;letter-spacing:-.025em;
  font-weight:500;margin-bottom:1.3em;max-width:30ch}
/* the dictionary device in the sidebar */
.prose .side.defs h4{margin-top:0}
.prose .side.defs .sense{margin-top:22px;color:var(--ink)}
.prose .side.defs .sense+p{margin-top:2px}
/* `grid-column:span 5` then `grid-column-start:8` does NOT give five columns:
   the shorthand sets both ends, and the start override then leaves the end at
   auto, i.e. span 1. Stating both ends at once is the fix — 8 / -1 means
   "from line 8 to the last line". Lower the 8 to widen it. */
.prose .side{grid-column:9 / -1;font-size:14px;line-height:1.7;color:var(--muted)}
.prose h4{font-size:14px;font-weight:500;margin-bottom:8px;color:var(--ink)}

.posts{padding:56px var(--pad) 0;display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(38px,4.5vw,64px) clamp(20px,3vw,44px)}
.post{grid-column:span 4;border-top:1px solid var(--rule);padding-top:18px}
.post .thumb{display:block;overflow:hidden;background:#E3E1DC;aspect-ratio:3/2;margin-bottom:16px}
.post .thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.post .thumb:hover img{transform:scale(1.035)}
.post .when{font-size:13px;color:var(--muted)}
.post h5{font-size:21px;letter-spacing:-.03em;font-weight:500;margin-top:8px;line-height:1.16}
.post h5 a{border-bottom:1px solid transparent}
.post h5 a:hover{border-color:var(--ink)}
.post p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:38ch}

/* empty slots, waiting for the next three posts */
.post.draft{border-top-style:dashed;opacity:.6}
.post.draft .thumb{background:none;border:1px dashed var(--rule)}
.post.draft h5{color:var(--muted)}

/* ---------------- a single journal entry ---------------- */
.entry{position:relative;overflow:hidden;background:#111;
  height:calc(100svh - var(--bar))}
.entry .wedge{width:var(--wedge-mh)}
.entry-media{position:absolute;inset:0}
.entry-media img{width:100%;height:100%;object-fit:cover}
.entry-head{position:absolute;z-index:4;left:var(--pad);top:clamp(44px,7.8vh,102px);color:var(--ink);max-width:min(30ch,52vw)}
.entry-head .when{font-size:13px;color:#3B3833;margin-bottom:9px}
.entry h1{font-size:clamp(19px,1.8vw,37px);line-height:1.0;letter-spacing:-.035em;font-weight:500;max-width:13ch}
.lede-para{font-size:19px;line-height:1.55;letter-spacing:-.01em;margin-bottom:1.4em}
.entry-nav{display:flex;gap:24px;padding:64px var(--pad) 0;font-size:14px;
  border-top:1px solid var(--rule);margin:64px var(--pad) 0;padding-left:0;padding-right:0}
.entry-nav a{border-bottom:1px solid var(--rule);padding-bottom:3px}
.entry-nav a:hover{border-color:var(--ink)}

/* Bulleted lists inside journal copy — the Superhome post sets several. */
/* a list and its intro line are one unit: without this the copy's two
   columns break between them, leaving a lone bullet at the foot of a column */
.svc-listbox{break-inside:avoid;margin:0 0 1.05em}
.svc-bullets-intro{margin:0 0 .5em}
.svc-bullets{list-style:none;margin:0;padding:0;break-inside:avoid}
.svc-bullets li{position:relative;padding-left:16px;margin-bottom:.35em;
  font-size:16.5px;line-height:1.55}
.svc-bullets li:before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--ink);border-radius:50%}

/* What we do: the three services run down the page at full width — the lede
   across the top of each, then the body copy and the services list beside one
   another. The copy sets in two text columns at desktop widths; one column
   across 950-odd pixels measured past 110 characters a line, twice a readable
   measure. Below 1150px the block unstacks into a single column. */
.svc-list-wrap{padding:clamp(44px,5.5vh,86px) var(--pad) 0;max-width:1760px}
.svc-block{display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  grid-template-areas:"head head" "lede lede" "copy list";
  column-gap:clamp(40px,6vw,120px);
  padding:clamp(40px,5vh,78px) 0;border-top:1px solid var(--rule)}
.svc-block:first-child{border-top:0;padding-top:0}
.svc-head{grid-area:head;display:flex;align-items:baseline;gap:14px;
  margin:0 0 clamp(18px,2.2vh,30px)}
.svc-block h2{font-size:clamp(30px,4vw,66px);line-height:1.04;letter-spacing:-.03em;margin:0}
.svc-lede{grid-area:lede;font-size:clamp(20px,1.7vw,30px);line-height:1.3;
  letter-spacing:-.025em;max-width:min(50%,47ch);
  margin:0 0 clamp(30px,3.6vh,52px);text-wrap:pretty}
.svc-copy{grid-area:copy;columns:2;column-gap:clamp(30px,3vw,64px)}
.svc-copy p{font-size:16.5px;line-height:1.65;margin:0 0 1.05em;text-wrap:pretty;
  break-inside:avoid}
.svc-copy p:last-child{margin-bottom:0}
.svc-list{grid-area:list}
.svc-list h5{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:.06em;
  margin:0 0 12px}
.svc-list ul{list-style:none;margin:0;padding:0}
.svc-list li{font-size:15px;line-height:1.45;padding:8px 0;
  border-top:1px solid var(--rule)}
.svc-list li:last-child{border-bottom:1px solid var(--rule)}

/* About. Same block grammar as What we do, but it is a single section with
   one subject, so the title carries the page: set at hero scale rather than
   the 66px the service headings use, and with no 01 beside it. The lede runs
   wider here too — there is no second block for the eye to move to. */
.about-wrap .svc-block{padding-top:0;border-top:0}
.about-wrap .svc-head{margin-bottom:clamp(20px,2.6vh,36px)}
.about-wrap .svc-block h2{font-size:clamp(34px,6.4vw,110px);line-height:.92;
  letter-spacing:-.045em}
.about-wrap .svc-lede{font-size:clamp(22px,2.05vw,36px);max-width:min(62%,42ch)}

/* Bold run-in subtitles inside a two-column body — the terms page. break-after
   stops a subtitle being stranded at the foot of the first column with its
   paragraph starting in the second. */
.svc-copy .tc-sub{font-size:16.5px;font-weight:700;line-height:1.4;color:var(--ink);
  letter-spacing:-.012em;margin:1.9em 0 .5em;break-after:avoid;break-inside:avoid}
.svc-copy .tc-sub:first-child{margin-top:0}

/* Case studies. Same block grammar as What we do and About: the project
   title at display scale, the narrative in two text columns, and the right
   column carrying the project facts on the opening section and the pull quote
   where there is one. Images run full width between the sections, so the
   blocks need no rules of their own to separate them. */
.cs-wrap .svc-block{border-top:0;padding:clamp(34px,4.4vh,66px) 0}
.cs-wrap .svc-block h2{font-size:clamp(26px,2.6vw,46px)}
.cs-wrap .svc-block.lead h2{font-size:clamp(34px,6.4vw,110px);line-height:.92;
  letter-spacing:-.045em}
.cs-wrap .svc-block.lead .svc-lede{font-size:clamp(21px,1.9vw,33px);
  max-width:min(62%,42ch)}
.cs-aside li b{display:block;font-weight:500;color:var(--muted);font-size:12px;
  letter-spacing:.05em;margin-bottom:4px}
/* the quote sets in the aside column, so the page-wide cap must not apply */
.cs-aside .cs-quote{margin:0;font-size:clamp(17px,1.3vw,22px);
  line-height:1.35;letter-spacing:-.015em}

.services{padding:56px var(--pad) 0;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px)}
.svc{grid-column:span 4;border-top:1px solid var(--rule);padding-top:18px}
.svc h5{font-size:23px;letter-spacing:-.03em;font-weight:500;line-height:1.1}
.svc p{font-size:14.5px;line-height:1.65;color:var(--muted);margin-top:12px;max-width:34ch}

/* ---------------- footer closes on the mark, inverted ---------------- */
/* the page opened top left; it closes bottom right */
footer{position:relative;overflow:hidden;margin-top:120px;
  padding:78px var(--pad) 88px;
  background:var(--ink);color:var(--cloud);border:0;
  min-height:clamp(400px,46vw,620px)}
footer .wedge{top:auto;left:auto;bottom:0;right:0;width:30%;z-index:1;
  clip-path:polygon(100% 0,100% 100%,0 100%)}
/* the lockup finishes the closing corner — static, ink on Cloud Dancer */
footer .signoff{position:absolute;z-index:2;line-height:0;
  right:calc(var(--pad) + clamp(14px,2vw,34px));
  bottom:clamp(46px,5.5vw,76px);
  color:var(--ink);pointer-events:none}
footer .signoff svg{height:calc(var(--logo-h) / var(--mark-ratio) * var(--footer-mark));
  width:auto;display:block}
footer .big,footer .row{position:relative;z-index:2}
footer .big{font-size:clamp(32px,5.6vw,80px);letter-spacing:-.045em;line-height:.98;font-weight:500;
  max-width:16ch}
footer .big a{border-bottom:2px solid rgba(240,238,233,.35)}
footer .big a:hover{border-color:var(--cloud)}
footer .row{margin-top:54px;display:flex;gap:clamp(24px,4.4vw,68px);flex-wrap:wrap;
  font-size:13.5px;color:rgba(240,238,233,.78);line-height:1.75;max-width:70%}
footer .row a{border-bottom:1px solid rgba(240,238,233,.28);padding-bottom:1px}
footer .row a:hover{border-color:var(--cloud)}

/* between a phone in landscape and a small laptop, three columns gives ~280px
   thumbnails. Two columns here, one below 900. */
@media (max-width:1200px){
  .grid{column-count:2}
}

@media (max-width:900px){
  :root{--pad:18px;--gut:8px}
  /* one image at a time below 900px. Two columns gave 173px thumbnails on a
     phone and ~360px in landscape — too small to read architectural work,
     and too narrow to hold the label without clipping it. */
  .grid{column-count:1}
  .case .plate{flex-direction:column;align-items:flex-start;gap:22px}
  /* a plain stack, rather than overriding grid placement and hoping */
  .prose,.services,.posts{display:block}
  .prose .col,.prose .side,.svc,.post{width:100%;max-width:none;float:none}
  .prose .col{font-size:17px;line-height:1.7}
  .prose .side{margin-top:36px;padding-top:26px;border-top:1px solid var(--rule)}
  .svc,.post{margin-bottom:38px}
  .svc p,.post p{max-width:none}
  .entry{height:calc(58svh - var(--bar))}
  .entry-head{max-width:78vw}
  .masthead{height:calc(100svh - var(--bar))}
  footer .wedge{width:58%}
  footer .signoff{bottom:40px}
  footer .signoff svg{height:auto;width:clamp(120px,34vw,180px)}
  footer .row{max-width:100%}
  nav{gap:16px;font-size:12.5px}
  .socials{margin-left:2px;padding-left:12px}
  #hero h1{font-size:clamp(24px,7.2vw,42px)}
  :root{--wedge-stub:clamp(88px,22vw,144px)}
  nav .hideSm{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
  .tile{opacity:1;transform:none}
}

/* ---------------- legal pages ---------------- */
h4.tc{font-size:15px;font-weight:500;margin:30px 0 8px;letter-spacing:-.01em}
h4.tc:first-of-type{margin-top:4px}
/* Column count follows the measure, not the device: three columns stop being
   readable below about 1300px, two below about 860. These sit AFTER the base
   rule deliberately — the site's 900px block comes earlier in the file and
   would otherwise lose on source order. */
@media (max-width:1150px){
  .svc-block{grid-template-columns:1fr;
    grid-template-areas:"head" "lede" "copy" "list"}
  /* unstacked, the quote has the whole page to run in: 113 characters without
     this cap */
  .cs-aside .cs-quote{max-width:min(70%,42ch) !important}
  .svc-lede{max-width:min(70%,47ch)}
  .svc-list{margin-top:clamp(26px,3vh,44px)}
}
@media (max-width:760px){
  .svc-copy{columns:1}
  .cs-aside .cs-quote{max-width:46ch !important}
  /* 52ch measures at about 69 real characters — ch is the width of a "0",
     wider than the average letter, so it undercounts by roughly a third.
     These caps are set by measuring, not by the unit. One column across a
     tablet otherwise gave the lede 94 characters to run in. */
  .svc-copy p{max-width:52ch}
  /* bullets need the same cap as paragraphs: 87 characters without it */
  .svc-bullets li{max-width:52ch}
  .svc-lede{max-width:48ch}
}
@media (max-width:1300px){
/* one column here, but capped — the prose sits in a 2fr track, so left
     uncapped a single column runs to nearly 100 characters */
}
.prose .col p a{border-bottom:1px solid var(--rule)}
.prose .col p a:hover{border-color:var(--ink)}
.legal-note{background:rgba(19,19,19,.05);border-left:2px solid var(--ink);
  padding:14px 18px;font-size:14.5px;line-height:1.6}

/* ==========================================================================
   MOBILE
   Everything below is inside a media query, so desktop is untouched.

   The core problem this solves: the diagonal is sized as a percentage of
   viewport WIDTH, but the type inside it is positioned from the TOP. On a
   desktop those two agree. On a phone the shape collapses to a sliver while
   the title stays where it was, so ink type lands on the photograph. The
   fix is to widen the mark on narrow screens and bring the type up into it.
   ========================================================================== */

/* ---------- the menu ----------
   A Cloud Dancer sheet that drops from the plate, with its bottom-left corner
   chamfered at the brand angle so the page shows through beneath it. The bars
   of the button don't spin: they step sideways, and the step is sized so their
   left edges land on that same 40.7 degrees. Hidden entirely above 900px. */
/* The header is a fixed element with z-index 50, so it forms its own stacking
   context: nothing inside it — including this button at z-index 60 — can ever
   paint above something outside it with a higher index. The sheet therefore
   sits at 45 and drops from BENEATH the plate, which is the right read anyway. */
#burger{display:none;position:relative;z-index:60;width:48px;height:48px;
  flex:0 0 auto;align-items:flex-end;justify-content:center;flex-direction:column;gap:5px;
  padding-right:11px}
#burger span{display:block;height:2px;background:var(--ink);
  transition:width .42s var(--ease)}
/* Right edges flush, left edges stepping out on the brand angle. Bars sit 7px
   apart, and 7 / tan(40.7deg) = 8.1, so an 8px step per bar draws the diagonal.
   Opening mirrors the staircase: nothing rotates, the lines just slide. */
#burger span:nth-child(1){width:10px}
#burger span:nth-child(2){width:18px}
#burger span:nth-child(3){width:26px}
#burger[aria-expanded="true"] span:nth-child(1){width:26px}
#burger[aria-expanded="true"] span:nth-child(2){width:18px}
#burger[aria-expanded="true"] span:nth-child(3){width:10px}

#menu{position:fixed;inset:0;z-index:45;overflow:hidden;background:none;
  pointer-events:none;visibility:hidden}
#menu[hidden]{display:none}
#menu.in{pointer-events:auto;visibility:visible}

/* the sheet. --chamfer is the width of the cut; its height follows the angle. */
.menu-panel{--chamfer:54vw;
  position:absolute;inset:0;background:var(--cloud);
  clip-path:polygon(0 0, 100% 0, 100% 100%,
                    var(--chamfer) 100%,
                    0 calc(100% - var(--chamfer) * var(--tan)));
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--bar) + 14px) var(--pad)
          calc(var(--chamfer) * var(--tan) + 26px);
  transform:translateY(-101%);
  transition:transform .5s var(--ease)}
#menu.in .menu-panel{transform:none}

#menu nav{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
#menu nav a{position:relative;font-size:clamp(29px,8.2vw,42px);line-height:1.2;
  letter-spacing:-.04em;font-weight:500;padding:5px 0;
  opacity:0;transform:translateX(-14px)}
#menu.in nav a{opacity:1;transform:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
#menu.in nav a:nth-child(1){transition-delay:.22s}
#menu.in nav a:nth-child(2){transition-delay:.27s}
#menu.in nav a:nth-child(3){transition-delay:.32s}
#menu.in nav a:nth-child(4){transition-delay:.37s}
#menu.in nav a:nth-child(5){transition-delay:.42s}
#menu.in nav a:nth-child(6){transition-delay:.47s}
/* the page you're on is marked with the shape, not an underline */
#menu nav a.here:before{content:"";position:absolute;left:-17px;top:.60em;
  width:11px;height:calc(11px * var(--tan));background:var(--ink);
  clip-path:polygon(0 0,100% 0,0 100%)}

#menu .menu-foot{margin-top:auto;padding-top:32px;
  opacity:0;transition:opacity .4s var(--ease) .5s}
#menu.in .menu-foot{opacity:1}
#menu .menu-foot .cta{display:inline-block}
#menu .menu-foot p{margin-top:16px;font-size:13.5px;line-height:1.7;color:var(--muted)}

/* ---------- tablet and below ---------- */
@media (max-width:900px){
  header nav{display:none}
  #burger{display:flex}
  /* the lockup switches to its own tokens at exactly the point the nav becomes
     a burger, so the header changes as one thing rather than in two steps */
  :root{--logo-h:var(--m-logo-h); --logo-top:var(--m-logo-top);
        --logo-inset:var(--m-logo-inset); --bar:var(--m-bar)}

  /* the mark has to grow as the screen narrows, or the type falls off it */
  :root{--wedge-l:62%;--wedge-mh:50vw}

  .masthead .mh-type{top:clamp(34px,5vh,66px)}
  .masthead h1{font-size:clamp(26px,4.4vw,40px);max-width:9ch}

  .entry-head{top:clamp(30px,4.4vh,58px);max-width:70vw}
  .entry h1{font-size:clamp(20px,3.4vw,28px);max-width:13ch}

  /* touch targets */
  .filters{gap:14px 20px;margin-top:clamp(30px,4.5vh,54px)}
  .filters button{padding:10px 0;min-height:44px}
  .count{width:100%;margin-left:0}

  /* the viewer's corners are far too small to hold anything on a phone */
  /* The caption keeps its chamfer but grows taller, and the cut stops short of
     the bottom-left corner rather than tapering to nothing. Measured off the
     mark-up: the edge runs at 16.5deg and leaves roughly a third of the height
     standing at the left, which is the room the wrapped second line needed. */
  #vtop{left:0;right:0;width:100%;max-width:none;
    height:clamp(150px,43vw,200px);
    clip-path:polygon(0 68%,100% 0,100% 100%,0 100%);
    padding:0 var(--pad) 18px 0;text-align:right}
  #vtop .who{max-width:100%}
  #vtools #vclose{width:56px;height:56px}
  #vtools #vclose:before,#vtools #vclose:after{left:12px;top:27px;width:33px}

  #strip{padding:12px var(--pad) 16px}
  #strip button{width:74px;height:48px}
  #varr button{padding:20px 14px;font-size:34px}
}

/* ---------- phones ---------- */
@media (max-width:600px){
  /* A 40.7deg triangle on a narrow screen is tall and thin: it eats the
     image and leaves the title almost no width. On phones the angle opens
     out to about 25deg, so the shapes run across the top and bottom rather
     than down the page. Everything derived from --tan follows automatically. */
  :root{--tan:.4663;          /* 25deg, against 40.7 on desktop */
        --wedge-l:104vw; --wedge-mh:100vw; --ramp:74px}
  /* menu links come down a size so six of them still sit comfortably
     below the deeper plate */
  #menu nav a{font-size:clamp(22px,6.4vw,32px);padding:4px 0}
  #menu .menu-foot{padding-top:24px}
  .menu-panel{--chamfer:60vw}

  .masthead .mh-type{top:clamp(34px,5vh,58px)}
  .masthead h1{font-size:26px;line-height:1.02;max-width:9ch}

  .entry-head{top:clamp(28px,4.2vh,50px);max-width:62vw}
  .entry h1{font-size:18px;max-width:14ch}

  /* labels can't be hover-revealed on a touch screen, so they sit open */
  /* a full triangle has no height at its left end, so on a narrow tile the
     title runs out of shape. Same answer the viewer caption uses on mobile:
     keep the diagonal, but stand the left edge up so there is room. */
  .tile .lab{font-size:10.5px;padding:0 12px 12px 0;min-height:59px;aspect-ratio:auto;bottom:-3px;
    clip-path:polygon(-2px calc(100% - 45px),calc(100% + 2px) -2px,
      calc(100% + 2px) calc(100% + 2px),-2px calc(100% + 2px))}
  .tile .lab b{font-size:12.5px}

  #hero .type{bottom:38px}
  .case .plate{bottom:38px}
  .case h2{font-size:32px}
  .case .win{font-size:13.5px;padding-left:13px}

  footer{padding:56px var(--pad) 150px;min-height:0}
  footer .wedge{width:96vw}
  footer .big{max-width:none;font-size:clamp(25px,7.4vw,36px)}
  footer .row{margin-top:38px;gap:22px 34px}
  footer .signoff{right:var(--pad);bottom:24px}
  footer .signoff svg{width:clamp(110px,30vw,150px)}

  .entry-nav{flex-direction:column;gap:14px;padding-top:34px;margin-top:44px}
  .entry-nav a{margin-left:0 !important;text-align:left !important}
}

/* ---------- touch devices of any size ---------- */
@media (hover:none){
  /* nothing here can be revealed by hovering, so reveal it up front */
  .tile .lab{transform:none}
  .tile:hover img{transform:none}
  .post .thumb:hover img{transform:none}
}

/* ---------- landscape phones: very little height to play with ---------- */
@media (max-width:900px) and (max-height:520px){
  .masthead,.entry{height:auto;min-height:320px}
  .masthead .mh-type,.entry-head{top:clamp(40px,10vh,64px)}
  :root{--logo-h:52px}

  /* a full-size chamfer would leave no room for the links at all, so it
     shrinks, the links run in two columns, and the sheet can scroll */
  .menu-panel{--chamfer:20vw;justify-content:flex-start;overflow-y:auto;
    padding:calc(var(--bar) + 10px) var(--pad) calc(var(--chamfer) * var(--tan) + 12px)}
  #menu nav{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;width:100%}
  #menu nav a{font-size:21px;padding:7px 0}
  #menu .menu-foot{padding-top:16px}
  #menu .menu-foot p{display:none}
}

/* ==========================================================================
   CASE STUDY PAGES   work/<slug>/
   Built as blocks so a new project is data, not markup. The reading column
   is held to one measure and sits in the same place down the whole page;
   images break out of it full width. The mark stays a page-top device, so
   nothing here repeats the diagonal.
   ========================================================================== */

/* the reading column — one position, every text block */
.cs-col{padding:0 var(--pad);display:block}
.cs-col>*{max-width:min(50%,52ch)}
.cs-col p{font-size:16.5px;line-height:1.65}
.cs-col+.cs-col{margin-top:1.1em}
/* let the browser even out the lines instead of stranding a word at a line end */
.cs-col p,.prose .col p,.cs-outcome p{text-wrap:pretty}
.cs-lede,.cs-quote,.cs-head{text-wrap:balance}
/* Each sentence of a lede on its own line. The split that builds these spans
   eats the space after the full stop, so they must be blocks wherever a lede
   is rendered — inline, the sentences run together as "Trust.This". */
.cs-lede .sen,.svc-lede .sen{display:block}
/* air between the opening statement and the body that follows */
.cs-col.lede-block+.cs-col{margin-top:clamp(30px,3.4vh,52px)}

.cs-lede{font-size:clamp(20px,1.95vw,31px) !important;line-height:1.34;
  letter-spacing:-.025em;max-width:min(50%,47ch) !important}
.cs-head{font-size:clamp(17px,1.35vw,21px);font-weight:500;letter-spacing:-.02em;
  margin-top:clamp(44px,5vh,78px)}
.cs-head+.cs-col{margin-top:.9em}

/* the facts strip, straight under the page top */
.cs-facts{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,4vw,64px);
  padding:clamp(40px,5.5vh,76px) var(--pad) clamp(44px,6vh,84px);
  border-bottom:1px solid var(--rule);margin-bottom:clamp(44px,6vh,84px)}
.cs-facts>div{grid-column:span 3}
.cs-facts>div:first-child{grid-column:1 / span 4}
/* four facts (What / Where / Client / Agency) still fit one row */
.cs-facts.four>div{grid-column:span 2}
.cs-facts.four>div:first-child{grid-column:1 / span 4}
.cs-facts h4{font-size:12.5px;font-weight:400;color:var(--muted);margin-bottom:7px}
.cs-facts p{font-size:15px;line-height:1.5;letter-spacing:-.01em}

/* images break the column */
figure{margin:0}
.cs-full{margin:clamp(44px,6vh,86px) var(--pad)}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);
  margin:clamp(44px,6vh,86px) var(--pad)}
.cs-full .tile,.cs-pair .tile{display:block;overflow:hidden;background:#E3E1DC;
  cursor:pointer}
.cs-full .tile{aspect-ratio:16/9}
.cs-pair .tile{aspect-ratio:3/2}
.cs-full img,.cs-pair img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.cs-full .tile:hover img,.cs-pair .tile:hover img{transform:scale(1.02)}
figcaption{margin-top:11px;font-size:13px;line-height:1.5;color:var(--muted)}

/* a line worth stopping on */
.cs-quote{margin:clamp(44px,6vh,86px) 0}
/* The quote sits in the aside column, which already sets its measure, so no
   max-width here. It used to carry min(33.333%,36ch) !important from when it
   ran in the full-width column; left in, a stale copy of this file renders the
   quote 205px wide, 18 characters to a line. */
.cs-quote{font-size:clamp(19px,1.7vw,27px);line-height:1.38;letter-spacing:-.025em;
  border-left:1px solid var(--ink);padding-left:clamp(20px,2vw,34px)}

/* the result, inverted — the one moment of ink in the body */
.cs-outcome{background:var(--ink);color:var(--cloud);
  padding:clamp(54px,7vh,104px) 0;margin-top:clamp(54px,7vh,104px)}
.cs-outcome h4{font-size:12.5px;font-weight:400;color:rgba(240,238,233,.6);margin-bottom:12px}
.cs-outcome p{font-size:clamp(18px,1.6vw,26px);line-height:1.4;letter-spacing:-.025em;
  max-width:min(50%,44ch)}

/* on to the next one */
.cs-next{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;padding:clamp(104px,14vh,200px) var(--pad) 0}
.cs-next a{display:block}
.cs-next span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.cs-next b{font-size:clamp(24px,3.1vw,46px);letter-spacing:-.04em;font-weight:500;
  line-height:1;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.cs-next a:hover b{border-color:var(--ink)}
.cs-next .cs-fwd{text-align:right}
.cs-next .cs-prev,.cs-next .cs-fwd{flex:0 1 auto;min-width:0}

@media (max-width:900px){
  .cs-col{display:block}
  /* full width would give 114-char lines on a tablet: cap the measure instead */
  .cs-col>*{max-width:52ch}
  .cs-lede{max-width:40ch !important}
  .cs-facts{display:block;padding-top:clamp(30px,4.5vh,54px)}
  .cs-facts>div{margin-bottom:20px}
  .cs-facts>div:last-child{margin-bottom:0}
  .cs-pair{grid-template-columns:1fr;gap:clamp(26px,4vh,40px)}
  .cs-outcome p{max-width:none}
  .cs-next{flex-direction:column;align-items:flex-start;gap:20px}
  .cs-next .cs-fwd{text-align:left}
}