/* Direction A — Broadsheet */
:root{
  --paper:#FFFFFF; --ink:#0B1A33; --slate:#5A6880; --rule:#E6EAF2; --accent:#0B43E8;
  --serif:"Newsreader",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --max:82.5rem;            /* 1320px */
  --gap:2rem;               /* 32px, one gutter */
  --pad:clamp(1.5rem,4vw,4rem);
  /* one vertical scale, everything spaces off it */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem; --s7:10rem;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:1.3125rem;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}

.label{font-family:var(--sans);font-size:.8125rem;letter-spacing:.09em;color:var(--slate);
  font-weight:500;margin:0 0 var(--s3)}

/* masthead */
.masthead{padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.masthead .grid{align-items:center}
.mark{grid-column:1/2}
.mark img{width:26px;height:auto}
.mast-right{grid-column:9/13;text-align:right;font-family:var(--sans);font-size:.875rem;color:var(--slate)}
.mast-right a{border:0}

/* hero */
.hero{padding:var(--s7) 0 var(--s6)}
.hero .grid{align-items:end}
.hero-type{grid-column:1/7}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(3.75rem,8.4vw,8rem);
  line-height:.94;letter-spacing:-.035em;margin:0 0 var(--s4)}
.hero .lede{font-size:clamp(1.375rem,2.1vw,1.75rem);line-height:1.42;font-weight:300;
  margin:0 0 var(--s3);max-width:26ch}
.hero .role{font-family:var(--sans);font-size:1rem;color:var(--slate);margin:0}
.hero-plate{grid-column:8/13}          /* exact 4 column plate, intrinsic 2:3, never cropped */

/* sections */
.section{padding:var(--s7) 0;border-top:1px solid var(--rule)}
.section:last-of-type{padding-bottom:var(--s5)}
.section-head{grid-column:1/6}
.section-body{grid-column:7/13}
.section-body p{margin:0 0 var(--s3)}
.section-body p:last-child{margin-bottom:0}

/* full bleed plate, aligned to the page edges not floated */
.bleed{margin:0;padding:0}
.bleed img{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}

/* work list */
.work dl{margin:0;display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gap)}
.work dt{grid-column:1/5;font-family:var(--serif);font-weight:400;font-size:1.5rem;
  line-height:1.3;padding:var(--s4) 0 0;border-top:1px solid var(--rule)}
.work dd{grid-column:5/11;margin:0;color:var(--slate);font-size:1.25rem;
  padding:var(--s4) 0 var(--s4);border-top:1px solid var(--rule)}
.work dt{padding-bottom:var(--s4)}

/* plate inside a section */
.head-plate{margin:var(--s4) 0 0}

/* contact */
.contact dl{margin:0;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s2) var(--gap)}
.contact dt{grid-column:1/4;font-family:var(--sans);font-size:.8125rem;letter-spacing:.09em;
  color:var(--slate);align-self:baseline;padding-top:.45rem}
.contact dd{grid-column:5/11;margin:0;font-size:1.5rem;font-weight:300}

.foot{padding:var(--s5) 0;border-top:1px solid var(--rule);font-family:var(--sans);
  font-size:.8125rem;color:var(--slate)}
.foot .grid{align-items:center}
.foot p{margin:0;grid-column:1/8}
.foot .fmark{grid-column:12/13;justify-self:end}
.foot .fmark img{width:22px}

@media(max-width:60rem){
  :root{--gap:1.25rem;--s7:5.5rem;--s6:4rem}
  body{font-size:1.25rem}
  .hero{padding:var(--s6) 0 var(--s5)}
  .hero .grid{align-items:start}
  .hero-plate{grid-column:1/13;order:-1;margin-bottom:var(--s5);max-width:22rem}
  .hero-type{grid-column:1/13}
  .section-head{grid-column:1/13;margin-bottom:var(--s3)}
  .section-body{grid-column:1/13}
  .head-plate{margin-top:var(--s4);max-width:20rem}
  .work dt{grid-column:1/13;padding-bottom:var(--s1);font-size:1.375rem}
  .work dd{grid-column:1/13;border-top:0;padding-top:var(--s1)}
  .contact dt{grid-column:1/13;padding-top:0}
  .contact dd{grid-column:1/13;margin-bottom:var(--s3)}
  .mast-right{grid-column:6/13}
  .foot p{grid-column:1/11}
}
@media(max-width:26rem){
  :root{--pad:1.25rem}
  .hero h1{font-size:3.25rem}
}

/* ---- multi page additions, same grid and scale ---- */

.masthead{position:relative;z-index:2}
.mark{grid-column:1/3;border:0}
.mark img{width:26px;height:auto}
.mast-nav{grid-column:5/13;justify-self:end;display:flex;gap:clamp(1.25rem,2.4vw,2.25rem);
  font-family:var(--sans);font-size:.9375rem}
.mast-nav a{border:0;color:var(--slate);padding-bottom:2px;border-bottom:1px solid transparent}
.mast-nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.mast-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* inner page hero: same columns, smaller display size */
.hero-inner{padding:var(--s6) 0 var(--s6)}
.hero-inner h1{font-size:clamp(2.75rem,5.6vw,5rem);line-height:1.02;margin-bottom:var(--s3)}
.hero-inner .eyebrow{font-family:var(--sans);font-size:.8125rem;letter-spacing:.09em;
  color:var(--slate);font-weight:500;margin:0 0 var(--s3)}

/* work page: each service keeps the label column rhythm */
.service h2{font-family:var(--serif);font-weight:400;font-size:1.625rem;line-height:1.25;
  letter-spacing:-.01em;margin:0}
.service .section-body p{margin:0 0 var(--s3)}
.service .section-body p:last-child{margin-bottom:0}

/* press stub */
.stub-line{grid-column:5/11;font-size:clamp(1.375rem,2.1vw,1.75rem);line-height:1.42;
  font-weight:300;margin:0 0 var(--s3)}
.stub-more{grid-column:5/11;margin:0;color:var(--slate)}

.more{margin:var(--s4) 0 0;font-family:var(--sans);font-size:1rem}

/* footer navigation */
.foot-nav{grid-column:1/8;margin:0 0 var(--s2);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.foot-nav a{border:0;color:var(--slate)}
.foot-nav a:hover{color:var(--accent)}
.foot .fline{grid-column:1/8;margin:0}

@media(max-width:60rem){
  .mark{grid-column:1/4}
  .mast-nav{grid-column:4/13;gap:1.1rem;font-size:.875rem}
  .hero-inner{padding:var(--s5) 0 var(--s5)}
  .stub-line,.stub-more{grid-column:1/13}
  .foot-nav{grid-column:1/13;gap:.5rem 1.25rem}
  .foot .fline{grid-column:1/11}
}
@media(max-width:26rem){
  .mast-nav{gap:.85rem;font-size:.8125rem}
  .foot-nav{gap:.5rem 1rem}
}

/* press: hero carries the page, nothing below it */
.hero-only{padding-bottom:var(--s7)}

/* ---- block types added so an empty label column can never happen ---- */

/* plain: no image, so the label sits directly above the text instead of
   beside it in a column that would otherwise sit empty */
.section-plain .plain-inner{grid-column:1/8}
.section-plain .plain-inner p{margin:0 0 var(--s3);max-width:34rem}
.section-plain .plain-inner p:last-child{margin-bottom:0}
.section-plain .label{margin-bottom:var(--s3)}

/* the single rhythm break: one pullquote at large scale, full measure */
.quote{padding:var(--s6) 0;border-top:1px solid var(--rule)}
.quote blockquote{grid-column:1/11;margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.75rem,4.2vw,3.25rem);line-height:1.16;letter-spacing:-.025em;color:var(--ink)}

/* plates fill their column now rather than sitting in it */
.head-plate img,.hero-plate img{width:100%}

@media(max-width:60rem){
  .section-plain .plain-inner{grid-column:1/13}
  .quote blockquote{grid-column:1/13}
  .hero-plate{max-width:26rem}
  .head-plate{max-width:26rem}
}