/* ==========================================================================
   ISLAMONT
   Dark hero, light body. Two families: Cormorant Garamond for display in
   mixed case, Jost for labels and running text. One ember accent.
   ========================================================================== */

/* ---------- tokens ---------- */

:root{
  --ink:#0A1118;
  --ink-2:#121B24;
  --ink-3:#1B242E;

  --paper:#F5F2EB;
  --paper-2:#EAE5DB;

  --type:#15181C;
  --type-70:#4A5058;
  --type-50:#6E757E;
  --type-30:#9AA0A8;

  --on-ink:#FFFFFF;
  --on-ink-75:rgba(255,255,255,.76);
  --on-ink-50:rgba(255,255,255,.52);
  --on-ink-30:rgba(255,255,255,.30);

  --rule-dark:rgba(255,255,255,.14);
  --rule-light:rgba(21,24,28,.14);
  --rule-light-2:rgba(21,24,28,.08);

  --ember:#B0702F;
  --ember-light:#C8823F;

  --serif:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;
  --sans:"Jost",Futura,"Century Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* `--shell` is the OUTER width of the page, gutters included, so the layout
     fills whatever screen it is on instead of sitting in a column. Image
     HEIGHT is capped separately, further down, which is what actually stops a
     short laptop screen being swallowed by one photograph. An earlier pass
     narrowed the whole shell to solve that and the result was a thin strip. */
  --shell:1760px;
  --gutter:clamp(20px,4.2vw,84px);
  --mark-h:clamp(30px,3vw,48px);

  --track-label:.24em;
  --track-nav:.2em;

  --step:clamp(64px,10.5vh,148px);  /* vertical rhythm between sections */
}

/* ---------- reset ---------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--type);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(16px,0.95vw,20px);
  line-height:1.7;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ember-light);outline-offset:3px}

/* ---------- type primitives ---------- */

.label{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(11px,.72vw,13.5px);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  line-height:1.5;
}

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.005em;
  text-wrap:balance;
}

.d-xl{font-size:clamp(34px,5vw,84px)}
.d-lg{font-size:clamp(30px,3.5vw,62px)}
.d-md{font-size:clamp(24px,2.3vw,40px)}
.d-sm{font-size:clamp(21px,1.7vw,31px);line-height:1.22}

/* Measures for display type, in the element's own ems rather than `ch`,
   which resolves against the body size and wraps headings far too tight. */
.m-wide{max-width:14em}
.m-mid{max-width:11em}
.m-tight{max-width:9em}

.lede{
  font-size:clamp(17px,1.3vw,25px);
  line-height:1.6;
  max-width:44ch;
  color:var(--type-70);
}

.body{max-width:54ch;color:var(--type-70)}
.body + .body{margin-top:1.1em}

.num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---------- layout ---------- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--step)}
.section--tight{padding-block:calc(var(--step) * .62)}

.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink-2{background:var(--ink-2);color:var(--on-ink)}
.on-paper-2{background:var(--paper-2)}

.on-ink .body,.on-ink .lede,.on-ink-2 .body,.on-ink-2 .lede{color:var(--on-ink-75)}
.on-ink .stance__lede,.on-ink-2 .stance__lede{color:var(--on-ink)}
.on-ink .label,.on-ink-2 .label{color:var(--on-ink-50)}

.rule{border:0;height:1px;background:var(--rule-light);margin:0}
.on-ink .rule,.on-ink-2 .rule{background:var(--rule-dark)}

.ember{color:var(--ember)}
.on-ink .ember,.on-ink-2 .ember{color:var(--ember-light)}

/* A single grain layer over everything. It gives the bone paper some tooth
   and keeps the large dark fields from banding. Kept very low: felt, not seen. */
body::after{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  opacity:.024;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* A faint light off the top of each dark band, so a tall ink section has a
   little depth instead of reading as a flat rectangle. The hero, page headers
   and footer carry their own treatments and are left alone. */
.on-ink,.on-ink-2{
  background-image:radial-gradient(130% 88% at 50% 0%,rgba(255,255,255,.038) 0%,rgba(255,255,255,0) 60%);
}

/* ==========================================================================
   masthead
   ========================================================================== */

.masthead{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:clamp(20px,3.2vh,34px);
}

.brand{display:inline-flex;align-items:center;gap:calc(var(--mark-h) * .40)}
.brand__mark{width:calc(var(--mark-h) * 1.076);height:var(--mark-h);flex:none}
.brand__word{
  font-family:var(--serif);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.355em;
  font-size:calc(var(--mark-h) * .48);
  padding-left:.355em;
  white-space:nowrap;
}

.nav{display:flex;gap:clamp(18px,2.4vw,42px)}
.nav a{position:relative;padding-block:4px}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* dark masthead (over the hero, and on ink pages) */
.masthead--ink .brand{color:var(--on-ink)}
.masthead--ink .nav a{color:var(--on-ink-75)}
.masthead--ink .nav a:hover,.masthead--ink .nav a[aria-current="page"]{color:var(--on-ink)}

/* light masthead */
.masthead--paper{border-bottom:1px solid var(--rule-light-2)}
.masthead--paper .brand{color:var(--type)}
.masthead--paper .nav a{color:var(--type-70)}
.masthead--paper .nav a:hover,.masthead--paper .nav a[aria-current="page"]{color:var(--type)}

.menu-btn{display:none;letter-spacing:var(--track-nav)}

.overlay{
  position:fixed;inset:0;z-index:60;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,3.2vh,30px);
  opacity:0;pointer-events:none;transition:opacity .34s ease;
}
.overlay.open{opacity:1;pointer-events:auto}
.overlay a{
  font-family:var(--serif);font-weight:500;text-transform:uppercase;
  letter-spacing:.3em;font-size:clamp(19px,5vw,30px);
  color:var(--on-ink-75);padding-left:.3em;
}
.overlay a:hover{color:var(--on-ink)}
.overlay__close{position:absolute;top:26px;right:var(--gutter);color:var(--on-ink-50)}

/* ==========================================================================
   hero, home
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--ink);
  color:var(--on-ink);
  overflow:hidden;
  isolation:isolate;
}

.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:50% 56%;
}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(6,9,13,.42) 0%,rgba(6,9,13,.06) 26%,rgba(6,9,13,0) 42%),
    linear-gradient(to top,rgba(6,9,13,.34) 0%,rgba(6,9,13,0) 30%);
}

.hero__inner{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--gutter);
  padding-bottom:clamp(26px,4.4vh,52px);
}

.hero__statement{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(40px,10vh,110px);
}

.hero__head{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,4.2vw,76px);
  line-height:1.14;letter-spacing:-.01em;
  color:var(--on-ink);
  max-width:12.5em;      /* measured in display ems, not body ems */
}
/* Each .l is an authored line. Let it break only when the viewport is too
   narrow to hold it, rather than re-wrapping the whole headline. */
.hero__head .l{display:block}
@media (min-width:600px){.hero__head .l{white-space:nowrap}}

.hero__rule{width:clamp(48px,4.4vw,74px);height:2px;border:0;background:var(--ember-light);margin:clamp(20px,3.2vh,34px) 0 0}

.hero__sub{
  margin-top:clamp(16px,2.4vh,26px);
  color:var(--on-ink-75);
  max-width:34ch;
  font-size:clamp(16px,1.15vw,23px);
  line-height:1.6;
}

.disciplines{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,1.8vw,30px);
  color:var(--on-ink-50);
  border-top:1px solid var(--rule-dark);
  padding-top:clamp(16px,2.4vh,24px);
}
.disciplines__sep{color:var(--on-ink-30)}

/* ==========================================================================
   page header (inner pages)
   ========================================================================== */

.pagehead{position:relative;background:var(--ink);color:var(--on-ink);isolation:isolate}
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover}
.pagehead__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(6,9,13,.82) 0%,rgba(6,9,13,.52) 46%,rgba(6,9,13,.26) 100%),
             linear-gradient(to bottom,rgba(6,9,13,.54) 0%,rgba(6,9,13,0) 34%);
}
.pagehead__inner{position:relative;z-index:1}
.pagehead__body{padding-block:clamp(56px,11vh,170px) clamp(36px,6vh,96px)}
/* Display measures are set in the heading's own ems. A `ch` here would be
   computed against the 16px body size and crush the headline into a column. */
.pagehead__body h1{max-width:11em}
.pagehead__eyebrow{color:var(--on-ink-50);margin-bottom:clamp(14px,2vh,22px)}
.pagehead__sub{margin-top:clamp(14px,2vh,22px);color:var(--on-ink-75);max-width:40ch}
.pagehead__credit{
  position:absolute;right:var(--gutter);bottom:clamp(14px,2.4vh,22px);z-index:1;
  color:var(--on-ink-50);text-align:right;
}

/* type-only header. With no photograph the headline carries the band, so it
   steps up a size rather than sitting small in a large dark rectangle. */
.pagehead--plain{background:var(--ink)}
.pagehead--plain .pagehead__body{padding-block:clamp(60px,12vh,168px) clamp(44px,7vh,104px)}
.pagehead--plain .pagehead__body h1{font-size:clamp(34px,5.2vw,72px);max-width:10em}

/* ==========================================================================
   home, the firm block
   ========================================================================== */

.stance{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,72px)}
@media (min-width:900px){
  .stance{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:start}
}
.stance__lede{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(23px,2.35vw,42px);
  line-height:1.24;letter-spacing:-.005em;
  color:var(--type);
  margin-top:clamp(14px,2vh,20px);
  max-width:16em;
  text-wrap:balance;
}
.stance__body{padding-top:clamp(4px,1.4vh,14px)}

/* figures row */
/* Three figures. Stacked on a phone, three across from 640 up, which gives
   each label a wide enough column that none of them wrap awkwardly. */
.figures{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--rule-dark);
}
@media (min-width:640px){.figures{grid-template-columns:repeat(3,minmax(0,1fr))}}

.figure{
  padding:clamp(20px,2.8vh,30px) clamp(18px,2.2vw,40px) clamp(20px,2.8vh,30px) 0;
  border-bottom:1px solid var(--rule-dark);
}
@media (min-width:640px){
  .figure{border-bottom:0;border-right:1px solid var(--rule-dark)}
  .figure:last-child{border-right:0;padding-right:0}
}
.figure__n{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,3.2vw,60px);line-height:1;
  color:var(--on-ink);
}
.figure__n sup{font-size:.46em;vertical-align:super;color:var(--ember-light);margin-left:.06em}
.figure__n .pre{font-size:.5em;vertical-align:super;margin-right:.04em;color:var(--on-ink-50)}
.figure__l{margin-top:10px;color:var(--on-ink-50);max-width:24ch}

/* method and people, firm page */

.method{margin-top:clamp(20px,3vh,36px);border-top:1px solid var(--rule-light)}

/* leadership portraits */
.people{
  display:grid;gap:clamp(26px,3vw,52px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(26px,3.6vh,48px);
}
@media (min-width:640px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person{margin:0}
/* A headshot stays a portrait. Capping the WIDTH is right here, unlike the
   property frames: a face does not need to fill its column, and a fixed
   height would crop three portraits into three landscapes. */
.person__frame{
  display:block;position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/5;
  max-width:min(100%,clamp(240px,23vw,360px));
}
.person__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.person__name{margin-top:clamp(14px,1.8vh,20px)}
.person__role{margin-top:7px;color:var(--type-50)}

.method__step{
  display:grid;gap:4px clamp(24px,4vw,64px);
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(18px,2.6vh,26px);
  border-bottom:1px solid var(--rule-light-2);
}
@media (min-width:760px){
  .method__step{grid-template-columns:minmax(0,3fr) minmax(0,8fr);align-items:baseline}
}
.method__note{max-width:52ch}

/* ==========================================================================
   snapshots, the small index on the home page
   ========================================================================== */

/* Four small tiles. Landscape rather than portrait, because an aerial cropped
   into a narrow portrait loses the sweep that makes it worth showing, but kept
   modest: this is an index into the portfolio, not the portfolio. */
.snaps{display:grid;gap:clamp(18px,2vw,30px);grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.snaps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.snaps{grid-template-columns:repeat(4,minmax(0,1fr))}}

.snap{display:block;position:relative}
.snap__frame{
  display:block;
  position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:3/2;
}
@media (min-width:560px){
  .snap__frame{aspect-ratio:auto;height:clamp(165px,24vh,320px)}
}
.snap__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1),filter .5s ease;
}
.snap:hover .snap__frame img{transform:scale(1.035)}
/* The tiles are small, so the name steps down from .d-sm to match them. */
.snap__name{margin-top:clamp(11px,1.4vh,15px);font-size:clamp(18px,1.42vw,21px)}
.snap__meta{margin-top:5px;color:var(--type-50)}
.on-ink .snap__meta,.on-ink-2 .snap__meta{color:var(--on-ink-50)}
.snap__frame--tall{aspect-ratio:3/4}

/* ==========================================================================
   portfolio
   ========================================================================== */

.group{padding-top:clamp(48px,7.4vh,96px)}
.group__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:clamp(14px,2vh,20px);
  border-bottom:1px solid var(--rule-light);
}
.group__place{color:var(--type)}

/* a property with a photograph worth showing */
.prop{
  display:grid;gap:clamp(20px,2.6vw,52px);
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(36px,5.6vh,76px);
  border-bottom:1px solid var(--rule-light-2);
  width:100%;text-align:left;
}
@media (min-width:880px){
  .prop{grid-template-columns:minmax(0,13fr) minmax(0,7fr);align-items:start}
  /* Alternating rows put the text first. The column ratio has to invert with
     them, or the photograph lands in the narrow column and shrinks. */
  .prop--flip{grid-template-columns:minmax(0,7fr) minmax(0,13fr)}
  .prop--flip .prop__text{order:1}
  .prop--flip .prop__frame{order:2}
}

/* On a phone the frame is sized by ratio, because width is what is scarce.
   From tablet up it takes an explicit height instead, so it fills its column
   and the photograph crops to fit a short screen. `aspect-ratio` with a
   `max-height` cannot be used here: the ratio transfers the height cap back
   into the width and the layout narrows, which is the exact needle it was
   meant to solve. Every card resolving to one height is also why they align. */
.prop__frame{
  display:block;
  position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:16/10;
}
@media (min-width:880px){
  .prop__frame{aspect-ratio:auto;height:clamp(300px,46vh,660px)}
}
.prop__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.prop:hover .prop__frame img{transform:scale(1.03)}


.prop__text{display:block;padding-top:clamp(2px,1vh,10px)}
.prop__addr{margin-top:10px;color:var(--type-50)}
/* Stats are read, not scanned, so they run at reading size rather than as
   another line of tracked micro caps. */
.prop__stats{
  margin-top:clamp(16px,2.2vh,22px);
  padding-top:clamp(14px,2vh,18px);
  border-top:1px solid var(--rule-light-2);
  color:var(--type);
  font-size:clamp(14px,1.02vw,16px);
  letter-spacing:0;
  text-transform:none;
}
.prop__note{margin-top:clamp(12px,1.8vh,18px);color:var(--type-70);max-width:42ch}

/* a property with no photograph worth enlarging */
.row{
  display:grid;gap:8px clamp(18px,2.4vw,44px);
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(20px,2.8vh,30px);
  border-bottom:1px solid var(--rule-light-2);
  width:100%;text-align:left;
}
@media (min-width:760px){
  .row{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,4fr);align-items:baseline}
}
.row__name{display:block;color:var(--type)}
.row__addr{display:block;color:var(--type-50)}
.row__stats{display:block;color:var(--type-70);text-transform:none;letter-spacing:0;font-size:clamp(14px,1.02vw,16px)}
.row[data-gallery]:hover .row__name{color:var(--ember)}

/* ==========================================================================
   projects
   ========================================================================== */

.project{padding-block:clamp(40px,6.4vh,86px);border-bottom:1px solid var(--rule-light)}
.project:last-of-type{border-bottom:0}

.project__frame{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:16/9}
@media (min-width:760px){
  .project__frame{aspect-ratio:auto;height:clamp(300px,52vh,780px)}
}
.project__frame img{width:100%;height:100%;object-fit:cover}
.project__tag{
  position:absolute;left:0;bottom:0;
  background:rgba(10,17,24,.74);color:var(--on-ink-75);padding:8px 14px;
}

.project__body{
  display:grid;gap:clamp(18px,2.6vw,56px);grid-template-columns:minmax(0,1fr);
  margin-top:clamp(22px,3.2vh,38px);
}
@media (min-width:880px){
  .project__body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
}

.facts{border-top:1px solid var(--rule-light);margin-top:clamp(18px,2.6vh,26px)}
.facts div{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;
  padding-block:11px;border-bottom:1px solid var(--rule-light-2);
}
.facts dt{color:var(--type-50)}
.facts dd{margin:0;color:var(--type)}

.strip{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(20px,3vh,32px)}
@media (min-width:760px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.strip button{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:3/2;width:100%}
@media (min-width:760px){
  .strip button{aspect-ratio:auto;height:clamp(150px,21vh,290px)}
}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.strip button:hover img{transform:scale(1.04)}

.pending{
  border:1px dashed var(--rule-light);
  padding:clamp(22px,3.4vh,34px);
  color:var(--type-50);
}

/* ==========================================================================
   contact
   ========================================================================== */

.contact{display:grid;gap:clamp(28px,4vw,72px);grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.contact{grid-template-columns:repeat(2,minmax(0,1fr))}}

.office{border-top:1px solid var(--rule-dark);padding-top:clamp(16px,2.4vh,22px)}
.office__name{color:var(--on-ink)}
.office__lines{margin-top:10px;color:var(--on-ink-75);font-style:normal}

/* ==========================================================================
   footer
   ========================================================================== */

.foot{background:var(--ink);color:var(--on-ink-75)}
.foot__top{
  display:flex;flex-wrap:wrap;gap:24px clamp(24px,4vw,64px);
  align-items:center;justify-content:space-between;
  padding-block:clamp(30px,4.6vh,54px);
  border-bottom:1px solid var(--rule-dark);
}
.foot__nav{display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,34px)}
.foot__nav a{color:var(--on-ink-50)}
.foot__nav a:hover{color:var(--on-ink)}
.foot__bottom{
  display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;
  padding-block:clamp(20px,3vh,30px);
  color:var(--on-ink-30);
}
.foot__disclaim{max-width:62ch}

/* ==========================================================================
   lightbox
   ========================================================================== */

.lb{
  position:fixed;inset:0;z-index:80;background:rgba(6,9,13,.97);
  display:none;flex-direction:column;
}
.lb.open{display:flex}
.lb__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,2.4vh,22px) var(--gutter);
  color:var(--on-ink-50);
}
.lb__stage{
  flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(12px,5vw,86px);min-height:0;
}
.lb__stage img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}
.lb__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:clamp(40px,4.4vw,56px);height:clamp(40px,4.4vw,56px);
  display:flex;align-items:center;justify-content:center;
  color:var(--on-ink-75);font-size:26px;line-height:1;
  background:rgba(10,17,24,.55);
}
.lb__btn:hover{color:var(--on-ink)}
.lb__prev{left:clamp(6px,1.4vw,22px)}
.lb__next{right:clamp(6px,1.4vw,22px)}
.lb__cap{
  padding:clamp(14px,2.4vh,22px) var(--gutter) clamp(20px,3.4vh,32px);
  border-top:1px solid var(--rule-dark);
  display:grid;gap:6px clamp(24px,4vw,64px);
}
@media (min-width:880px){.lb__cap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.lb__name{color:var(--on-ink)}
.lb__meta{color:var(--on-ink-50);margin-top:6px}
.lb__desc{color:var(--on-ink-75);max-width:62ch}

/* ==========================================================================
   motion and responsive
   ========================================================================== */

.rise{opacity:0;transform:translateY(14px)}
.rise.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rise.in.d1{transition-delay:.08s}
.rise.in.d2{transition-delay:.16s}
.rise.in.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}

@media (max-width:760px){
  .nav{display:none}
  .menu-btn{display:inline-block}
  .masthead--ink .menu-btn{color:var(--on-ink-75)}
  .hero__statement{max-width:none}
  .pagehead__body,.pagehead__credit{max-width:none}
  .pagehead__credit{position:static;text-align:left;padding-bottom:clamp(16px,3vh,24px)}
}

/* ==========================================================================
   partner portal sign in
   Its own surface: no masthead, no nav, no footer. One card on ink.
   ========================================================================== */

.portal{
  min-height:100svh;
  display:grid;place-items:center;
  background:var(--ink);color:var(--on-ink);
  padding:clamp(24px,6vw,72px);
  background-image:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 62%);
}
.portal__card{width:100%;max-width:clamp(300px,34rem,480px)}
.portal__brand{display:inline-flex;color:var(--on-ink);margin-bottom:clamp(26px,4vh,44px)}
.portal__brand .brand__mark{width:calc(var(--mark-h) * 1.076);height:var(--mark-h)}
.portal__title{color:var(--on-ink)}
.portal__lede{color:var(--on-ink-75);margin-top:clamp(10px,1.4vh,14px);max-width:34ch}

.portal__form{
  margin-top:clamp(26px,4vh,40px);
  border-top:1px solid var(--rule-dark);
  padding-top:clamp(22px,3vh,32px);
  display:grid;gap:10px;
}
.portal__form label{color:var(--on-ink-50)}
.portal__form input{
  width:100%;
  font:inherit;color:var(--on-ink);
  background:rgba(255,255,255,.04);
  border:1px solid var(--rule-dark);
  padding:14px 16px;
}
.portal__form input:focus-visible{outline:2px solid var(--ember-light);outline-offset:2px}
.portal__btn{
  justify-content:center;margin-top:8px;
  border-color:var(--ember-soft);color:var(--on-ink);
  padding:14px 22px;
}
.portal__btn:hover{border-color:var(--ember-light)}
.portal__help{color:var(--on-ink-30);margin-top:4px}
.portal__notice{
  color:var(--ember-light);
  border-left:2px solid var(--ember-soft);
  padding-left:12px;margin-top:10px;
  max-width:40ch;line-height:1.6;
}
.portal__back{margin-top:clamp(26px,4vh,40px);color:var(--on-ink-50)}
.portal__back a{border-bottom:1px solid currentColor;padding-bottom:3px}
.portal__back a:hover{color:var(--on-ink)}