/* Heft homepage. Values from the Heft brand kit (maps/workspace morning-brief/brand/):
   ink on paper, PT Serif for reading, Barlow Condensed for labels, flat fills,
   no gradients or shadows, lifeboat orange once per page (the first button). */

@font-face { font-family: "PT Serif"; src: local("PT Serif"), url(fonts/PTSerif-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: local("PT Serif Bold"), url(fonts/PTSerif-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: local("PT Serif Italic"), url(fonts/PTSerif-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: local("Barlow Condensed Medium"), url(fonts/BarlowCondensed-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: local("Barlow Condensed SemiBold"), url(fonts/BarlowCondensed-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #262a2b;
  --paper: #f5f2ea;
  --slate: #4e5a63;
  --sea: #64796f;
  --lifeboat: #d94f26;
  --olive: #7c7d52;
  --gorse: #d3aa3f;
  --concrete: #d9d3c3;
  --rule: #d8d2c4;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --label: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 2.5rem 1.5rem 4rem;
  background: var(--paper); color: var(--ink);
  font: 18px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
}
.sheet { max-width: 60rem; margin: 0 auto; }

.masthead { display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid var(--ink); padding-bottom: .7rem; }
.tide svg { display: block; width: 30px; height: 30px; }
.wordmark { font: 700 1.6rem/1 var(--serif); letter-spacing: -.01em; }

/* One reading column; figures break out to the full sheet width. */
main > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
.wide { max-width: none; }
.block .wide { width: max(100%, min(48rem, 100vw - 3rem)); position: relative; left: 50%; transform: translateX(-50%); }

.hero { padding: 4.5rem 0 2.5rem; text-align: center; max-width: 46rem; }
.label { font: 600 .85rem/1.5 var(--label); text-transform: uppercase;
  letter-spacing: .12em; color: var(--slate); margin: 0 0 .75rem; }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font: 700 clamp(2rem, 4.8vw, 3.2rem)/1.12 var(--serif); letter-spacing: -.012em;
  margin: 0 0 1.25rem; }
.lede { font-size: 1.15rem; margin: 0 auto 1.9rem; max-width: 38rem; }

.cta { display: inline-block; font: 700 1.2rem/1 var(--serif); text-decoration: none;
  color: var(--paper); background: var(--lifeboat); padding: .95rem 1.4rem; }
.cta--quiet { color: var(--ink); background: none; border: 2px solid var(--ink);
  font-size: 1.05rem; padding: .75rem 1.1rem; margin-right: .9rem; }
.offer { font-size: .98rem; color: var(--slate); max-width: 32rem; margin: 1rem auto 0; }
.map-label--sub { font-size: 12px; }
.address { font: 600 .9rem/1 var(--label); letter-spacing: .06em; color: var(--slate); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.place-strip { margin: 0 auto 1rem; }
.place-strip svg, .map svg, .tide svg { max-width: 100%; }
.place-strip svg { display: block; width: 100%; height: auto; }

.block { padding: 3.5rem 0 0; }
.block > :last-child { margin-bottom: 0; }
.block--close { padding-bottom: 1rem; }
h2 { font: 700 1.5rem/1.25 var(--serif); margin: 0 0 .8rem; }

.steps { margin: 0; padding-left: 1.4rem; }
.steps li { margin: 0 0 .8rem; padding-left: .3rem; }
.steps li::marker { font: 700 1rem var(--serif); color: var(--slate); }

.map { margin: 1.5rem 0 0; }
.map svg { display: block; width: 100%; height: auto; border: 1px solid var(--ink); }
.map .frame[hidden] { display: none; }
.map-label { font: 600 15px var(--label); letter-spacing: .08em; fill: var(--ink); }
.map-label--halo { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
figcaption { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: baseline;
  margin-top: .8rem; font-size: .95rem; color: var(--slate); }
.frames { display: inline-flex; gap: .4rem; }
.frames button { font: 600 .78rem/1 var(--label); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink); background: none; border: 1px solid var(--ink); padding: .45rem .7rem; min-height: 2.6rem; min-width: 5rem; cursor: pointer; }
.frames button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

footer { border-top: 1px solid var(--ink); margin-top: 3.5rem; padding-top: .75rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font: 600 .72rem/1.5 var(--label); text-transform: uppercase; letter-spacing: .12em; color: var(--slate); }
footer a { color: inherit; text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 44rem) {
  .place-strip svg { height: 4.5rem; }
  body { padding: 1.5rem 1.1rem 3rem; }
  .hero { padding: 2.5rem 0 2rem; }
  .block { padding-top: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Case studies: one slide per view, scroll-snapped, with prev/next. */
.cases-head { display: flex; justify-content: space-between; align-items: baseline; }
.cases .count { color: var(--slate); margin-left: .6rem; }
.cases-nav { display: inline-flex; gap: .4rem; }
.cases-nav button { font: 600 1.1rem/1 var(--label); min-width: 2.6rem; min-height: 2.6rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }
.cases-nav button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.cases-nav button:disabled { opacity: .3; cursor: default; }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.slide { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; padding: 0 2px; overflow: hidden; }
.slide > h2, .slide > p { max-width: 40rem; margin-left: auto; margin-right: auto; }
.slide h2 { margin-top: .5rem; }
.key { display: inline-block; width: .8em; height: .8em; border: 1.5px solid var(--ink); vertical-align: -.05em; margin: 0 .3em 0 .6em; }
.key:first-child { margin-left: 0; }
.key--olive { background: var(--olive); }
.key--gorse { background: var(--gorse); }
.key--bar { width: .25em; height: 1em; background: var(--ink); border: 0; }
.key--dot { border-radius: 50%; background: var(--gorse); border-width: 2px; }

/* Place strips fill in as you scroll (script adds .strips-grow; without it, all shows). */
.strips-grow .place-strip .grow { opacity: 0; transition: opacity 1.4s ease; }
.strips-grow .place-strip .grow.on { opacity: 1; }