/* 06-content: "The Front Page". Newsprint editorial, one light theme (print-emulating, no dark mode). */
:root{
  --paper:    #F2F1EB;
  --paper-2:  #E6E5DD;
  --ink:      #191919;
  --ink-2:    #4A4A45;
  --ink-3:    #6B6A64;
  --teal:     #2F5D50;
  --teal-ink: #24493F;
  --rule:     #191919;
  --hair:     rgba(25,25,25,.22);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1320px;
  --pad: 32px;
  --gap: 32px;
  --section: 96px;
  --header-h: 64px;

  --t-ui: 180ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);

  /* type scale */
  --fs-lead: 64px;
  --fs-h2: 48px;
  --fs-h3: 26px;
  --fs-dek: 23px;
  --fs-body: 19px;
  --fs-fig: 184px;
  --fs-note: 30px;
}
@media (max-width: 899px){
  :root{ --fs-lead: 40px; --fs-h2: 34px; --fs-h3: 21px; --fs-dek: 19px; --fs-body: 17px; --fs-fig: 112px; --fs-note: 19px; --section: 64px; }
}
@media (max-width: 600px){
  :root{ --pad: 16px; --gap: 16px; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video, svg{ display: block; max-width: 100%; }
img, video{ height: auto; }
h1,h2,h3,p,ul,ol,figure{ margin: 0; }
ul[role="list"], ol[role="list"]{ list-style: none; padding: 0; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }

:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }

.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; font: 600 15px/1 var(--sans); text-decoration: none; }
.skip:focus{ top: 12px; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.ico{ flex: none; width: 1em; height: 1em; }
.ico--14{ width: 14px; height: 14px; }
.ico--16{ width: 16px; height: 16px; }
.ico--20{ width: 20px; height: 20px; }

/* ---------- shared type ---------- */
.h2{
  font-family: var(--serif); font-weight: 500; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.015em;
  font-variation-settings: "opsz" 48; max-width: 18ch; text-wrap: balance;
}
.dek{
  font-style: italic; font-weight: 400; font-size: var(--fs-dek); line-height: 1.35; color: var(--ink-2);
  font-variation-settings: "opsz" 20; max-width: 52ch; margin-top: 16px;
}
.body{ font-size: var(--fs-body); line-height: 1.55; max-width: 62ch; font-variation-settings: "opsz" 14; }
.caption{ font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.flag{
  font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  border-top: 3px solid var(--rule); padding-top: 12px; margin-bottom: 20px; display: inline-block; min-width: 160px;
}
.cat{ font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- buttons + links ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: 0;
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.btn--teal{ background: var(--teal); color: var(--paper); }
.btn--teal:hover{ background: var(--teal-ink); }
.btn:active{ transform: translateY(1px); }
.btn__icon{ display: none; }

.textlink{
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 15px/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--hair);
  transition: text-decoration-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
  padding-block: 8px;
}
.textlink:hover, .textlink:focus-visible{ text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.textlink--sm{ font-size: 13px; font-weight: 500; color: var(--ink-2); }

/* ---------- lockup ---------- */
.lockup{ display: inline-flex; align-items: baseline; text-decoration: none; color: var(--ink); white-space: nowrap; }
.lockup__name{ font: 700 22px/1 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -0.01em; }
.lockup__slash{ font: 400 18px/1 var(--sans); color: var(--teal); white-space: pre; }
.lockup__lane{ font: 500 13px/1 var(--sans); color: var(--ink-2); }
.lockup--foot .lockup__name{ font-size: 28px; }

/* ---------- header ---------- */
.masthead{
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--paper); border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) linear;
}
.masthead.is-ruled{ border-bottom-color: var(--rule); }
/* The nameplate already prints the name on first load: the header lockup waits until it scrolls away (JS adds .is-tracked). */
.masthead.is-tracked .lockup{ opacity: 0; pointer-events: none; transition: opacity var(--t-ui) linear; }
.masthead.is-tracked.is-past .lockup, .masthead.is-tracked .lockup:focus-visible{ opacity: 1; pointer-events: auto; }
.masthead__in{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.masthead__nav{ display: flex; align-items: center; gap: 24px; }
.masthead__inside{ text-decoration: none; }
.masthead__inside:hover{ text-decoration: underline; text-decoration-color: var(--teal); }
.masthead__email{ height: 44px; }
@media (max-width: 600px){
  .masthead__nav{ gap: 14px; }
  .masthead__inside{ font-size: 14px; }
  .masthead__email{ width: 44px; padding: 0; }
  .masthead__email .btn__label{ display: none; }
  .masthead__email .btn__icon{ display: block; }
}
@media (max-width: 399px){
  .masthead .lockup__slash, .masthead .lockup__lane{ display: none; }
}

/* ---------- 1. front page ---------- */
.front{ padding-top: 14px; padding-bottom: 72px; }
.folio{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; }
.folio__l{ font: 600 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.folio__r{ font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
.dbl-rule{ height: 7px; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); transform-origin: left center; }
.rule{ height: 0; border-top: 1px solid var(--rule); transform-origin: left center; }

.plate{
  display: grid; grid-template-columns: 160px minmax(0,1fr) 160px; align-items: stretch; gap: 24px;
  padding: 18px 0 16px;
}
.plate .nameplate{ align-self: center; }
.nameplate{
  font-family: var(--serif); font-weight: 700; font-size: clamp(60px, 10.6vw, 156px); line-height: .9;
  letter-spacing: -0.035em; text-align: center; white-space: nowrap;
  font-variation-settings: "opsz" 72; font-feature-settings: "kern","liga","dlig";
  padding-bottom: .06em;
}
.ear{
  display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 160px; padding: 14px;
  background: var(--paper-2); border: 1px solid var(--rule); text-decoration: none; color: var(--ink);
  transition: background-color 150ms var(--ease-out);
}
a.ear:hover{ background: var(--paper); }
.ear__kick{ font: 600 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ear__txt{ font: italic 400 17px/1.3 var(--serif); }
.ear__fig{ font: 600 34px/1 var(--serif); color: var(--teal); font-variant-numeric: lining-nums; letter-spacing: -0.01em; }
.ear__sub{ font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
.plate__tag{
  font: 600 15px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  text-align: center; padding: 0 0 14px;
}

.lead{
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap);
  padding-top: 32px;
}
.lead__copy{ grid-column: 1 / span 7; align-self: start; padding-top: 8px; padding-right: 24px; }
.lead__h{
  font-family: var(--serif); font-weight: 500; font-size: var(--fs-lead); line-height: 1.02; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 60; max-width: 14ch;
}
.lead__dek{
  margin-top: 22px; font-style: italic; font-size: var(--fs-dek); line-height: 1.35; color: var(--ink-2);
  font-variation-settings: "opsz" 20; max-width: 34ch;
}
.lead__cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.lead__photo{ grid-column: 8 / span 5; position: relative; justify-self: end; width: 100%; max-width: calc(58vh * .8); overflow: hidden; }
.lead__photo img{
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 45% 35%;
  max-height: 58vh; position: relative; z-index: 1;
  /* gentle zoom inside the 4:5 frame so she leads the scene; capped at 1.5 so the 1212px source stays sharp on DPR2 screens */
  transform: scale(1.5); transform-origin: 68% 68%;
}
.lead__photo .hero-gray{ position: absolute; inset: 0; z-index: 0; filter: grayscale(1) contrast(1.05); }

@media (max-width: 899px){
  .front{ padding-bottom: 56px; }
  .folio__r{ display: none; }
  .plate{ grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0 16px; align-items: stretch; }
  .nameplate{ grid-column: 1 / -1; grid-row: 1; font-size: clamp(60px, 15.6vw, 120px); }
  .ear{ width: auto; padding: 10px 12px; gap: 4px; }
  .ear--l{ grid-row: 2; }
  .ear--r{ grid-row: 2; }
  .ear__txt{ font-size: 15px; }
  .ear__fig{ font-size: 26px; }
  .ear__sub{ font-size: 12px; }
  .plate__tag{ font-size: 13px; padding-bottom: 12px; }
  .lead{ display: block; padding-top: 22px; }
  .lead__copy{ padding-right: 0; }
  .lead__dek{ margin-top: 14px; }
  .lead__cta{ flex-direction: column; align-items: stretch; gap: 4px; margin-top: 22px; }
  .lead__cta .btn{ width: 100%; }
  .lead__cta .textlink{ align-self: flex-start; }
  .lead__photo{ max-width: none; margin-top: 28px; }
  .lead__photo img{ max-height: none; transform: scale(1.6); transform-origin: 74% 52%; }
}

/* ---------- section scaffolding ---------- */
.inside, .blog, .funny, .style, .video, .classifieds, .letters{ padding-block: var(--section); }
.inside{ padding-top: 0; }
.blog, .carousel, .funny, .style, .video, .classifieds, .letters{ border-top: 1px solid var(--rule); }
.blog > .wrap > .h2, .funny > .wrap > .h2, .classifieds > .wrap > .h2{ margin-top: 0; }

/* ---------- 2. inside + circulation ---------- */
.index{
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.index a{
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; text-decoration: none;
  border-left: 1px solid var(--hair); transition: background-color 150ms var(--ease-out);
}
.index a:first-child{ border-left: 0; padding-left: 0; }
.index a:hover{ background: var(--paper-2); }
.index a:first-child:hover{ padding-left: 12px; }
.index__t{ font: 600 20px/1.15 var(--serif); font-variation-settings: "opsz" 24; }
.index__s{ font: 500 13px/1.35 var(--sans); color: var(--ink-2); }

.circ{
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap);
  padding-top: 72px;
}
.circ__fig{ grid-column: 1 / span 4; }
.bigfig{
  font: 300 var(--fs-fig)/.85 var(--serif); color: var(--teal); letter-spacing: -0.04em;
  font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums; margin-left: -0.04em;
}
.bigfig__label{ font: 500 15px/1.3 var(--sans); margin-top: 18px; }
.circ__story{ grid-column: 5 / span 8; border-left: 1px solid var(--hair); padding-left: var(--gap); }
.circ__story .body{ margin-top: 20px; }
.dropcap__l{
  float: left; font-weight: 600; font-size: 4.2em; line-height: .8; margin: .02em .06em 0 -.04em;
  font-variation-settings: "opsz" 72; color: var(--ink);
}
.circ__strip{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 32px; max-width: 640px; }
.circ__strip img{ width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.circ__strip img:nth-child(2){ object-position: 50% 35%; }
.circ__story .caption{ margin-top: 10px; }
.circ__story .textlink{ margin-top: 10px; }

@media (max-width: 899px){
  .index{ grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
  .index a, .index a:first-child{ background: var(--paper); border: 0; padding: 14px 14px 16px; }
  .index a:last-child{ grid-column: 1 / -1; }
  .index__t{ font-size: 18px; }
  .circ{ display: block; padding-top: 48px; }
  .circ__story{ border-left: 0; padding-left: 0; margin-top: 24px; }
  .bigfig__label{ margin-top: 10px; }
  .circ__strip{ gap: 8px; }
}

/* ---------- 3. the blog ---------- */
.blog .dek{ margin-bottom: 48px; }
.spread{
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap);
  border-top: 1px solid var(--rule); padding-top: 28px;
}
.story-lead{ grid-column: 1 / span 5; padding-right: 8px; }
.story-lead__h{
  margin-top: 12px; font: 600 34px/1.12 var(--serif); letter-spacing: -0.01em; font-variation-settings: "opsz" 36;
  text-wrap: balance;
}
.pen{ overflow: visible; pointer-events: none; }
.pen path{ fill: none; stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; }
.pen--under{ width: min(100%, 520px); height: 14px; margin-top: 8px; }
.pen--under path{ stroke-width: 3; vector-effect: non-scaling-stroke; }
.story-lead__ex{ margin-top: 18px; font: italic 400 21px/1.4 var(--serif); color: var(--ink-2); font-variation-settings: "opsz" 20; max-width: 40ch; }
.story-lead .textlink{ margin-top: 16px; }

.tiles{ grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--hair); }
.tiles li{ border-bottom: 1px solid var(--hair); }
.tiles li:nth-child(even){ border-left: 1px solid var(--hair); }
.tiles li:nth-child(n+3){ border-bottom: 0; }
.tile{
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 168px;
  padding: 4px 28px 28px var(--gap); text-decoration: none; transition: background-color 150ms var(--ease-out);
}
.tiles li:nth-child(n+3) .tile{ padding-top: 24px; }
.tile:hover{ background: var(--paper-2); }
.tile__h{ font: 600 var(--fs-h3)/1.15 var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; }
.tile__ico{ margin-top: auto; color: var(--ink-2); transition: transform var(--t-ui) var(--ease-out); }
.tile:hover .tile__ico{ transform: translate(2px,-2px); color: var(--ink); }
.tile:hover .tile__h{ text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.smallprint{ margin-top: 20px; }

.store{
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); align-items: end;
  margin-top: 72px;
}
.store__frame{ grid-column: 1 / span 8; border: 1px solid var(--rule); background: var(--paper-2); }
.store__bar{ height: 28px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--rule); font: 500 12px/1 var(--sans); color: var(--ink-2); }
.store__frame img{ width: 100%; aspect-ratio: 1440/700; object-fit: cover; object-position: top; }
.store__cap{ grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.store__line{ font: italic 400 21px/1.35 var(--serif); font-variation-settings: "opsz" 20; }

@media (max-width: 899px){
  .blog .dek{ margin-bottom: 32px; }
  .spread{ display: block; }
  .story-lead__h{ font-size: 26px; }
  .story-lead__ex{ font-size: 18px; }
  .tiles{ margin-top: 32px; border-left: 0; border-top: 1px solid var(--hair); }
  .tile, .tiles li:nth-child(n+3) .tile{ padding: 16px 14px 18px 0; min-height: 0; }
  .tiles li:nth-child(even) .tile{ padding-left: 14px; padding-right: 0; }
  .tile__h{ font-size: 17px; }
  .store{ display: block; margin-top: 48px; }
  .store__cap{ margin-top: 16px; }
  .store__line{ font-size: 19px; }
}
@media (max-width: 699px){
  .store__frame{ max-width: 300px; }
  .store__frame img{ aspect-ratio: 780/1300; }
}

/* ---------- 4. the carousel (signature) ---------- */
.carousel{ padding-block: var(--section); }
.carousel__copy .dek{ max-width: 40ch; }
.carousel__stage{ margin-top: 36px; }
.notes{ display: none; }
.serial{
  display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent;
}
.serial__item{ scroll-snap-align: start; }
.slide__media{ position: relative; border: 1px solid var(--rule); background: var(--paper-2); }
.slide__media img{ width: 100%; aspect-ratio: 1195/1600; }
.slide .pen{ position: absolute; inset: 0; width: 100%; height: 100%; }
.slide .pen path{ stroke-width: 12; }
.note{ margin-top: 14px; font: italic 400 var(--fs-note)/1.25 var(--serif); font-variation-settings: "opsz" 20; font-size: 21px; }
@media (max-width: 899px){
  .serial{ grid-auto-columns: 82vw; gap: 16px; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); }
  .note{ font-size: var(--fs-note); }
}

/* pinned layout (class added by JS on desktop, motion allowed) */
.carousel.is-pinned{ height: 100vh; height: 100dvh; padding: calc(var(--header-h) + 24px) 0 24px; }
.carousel.is-pinned .carousel__grid{
  height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); align-items: start;
}
/* columns swapped vs. the base flow: the pile of pages sits left, the editor's notes run in the right margin */
.carousel.is-pinned .carousel__copy{ grid-column: 7 / span 6; grid-row: 1; display: flex; flex-direction: column; height: 100%; padding: 8px 0 0 24px; }
.carousel.is-pinned .notes{
  --fs-note: 28px; display: block; list-style: none; padding: 0; margin: 56px 0 0; counter-reset: n;
  border-top: 1px solid var(--hair); padding-top: 12px;
}
.carousel.is-pinned .notes li{
  counter-increment: n; position: relative; padding-left: 48px;
  font: italic 400 var(--fs-note)/1.22 var(--serif); font-variation-settings: "opsz" 20;
  transform-origin: left top; margin-top: 14px; color: var(--ink-2);
}
.carousel.is-pinned .notes li.is-active{ color: var(--ink); }
.carousel.is-pinned .notes li::before{
  content: counter(n); position: absolute; left: 0; top: 0; width: 32px; height: calc(var(--fs-note) * 1.22);
  display: grid; place-items: center;
  font: 600 14px/1 var(--sans); font-style: normal; color: var(--ink);
}
/* the same teal pen circles the active note number (drawn by JS) */
.notes .pen--num{ position: absolute; left: -5px; top: calc(.61em - 21px); width: 42px; height: 42px; }
.notes .pen--num path{ stroke-width: 2.25; vector-effect: non-scaling-stroke; }
.carousel.is-pinned .carousel__stage{
  grid-column: 1 / span 6; grid-row: 1; margin-top: 0; justify-self: center;
  height: min(calc(100dvh - var(--header-h) - 96px), 760px);
  aspect-ratio: 1195/1600; position: relative;
}
/* folio under the pile (Work Sans 12px), number set by JS */
.stage__folio{ display: none; }
.carousel.is-pinned .stage__folio{
  display: block; position: absolute; left: 0; right: 0; bottom: -30px; text-align: center;
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.carousel.is-pinned .serial{ display: block; position: relative; overflow: visible; height: 100%; padding: 0; }
.carousel.is-pinned .serial__item{ position: absolute; inset: 0; transform-origin: 50% 60%; }
.carousel.is-pinned .slide, .carousel.is-pinned .slide__media{ height: 100%; }
.carousel.is-pinned .slide__media img{ height: 100%; width: 100%; object-fit: cover; }
.carousel.is-pinned .note{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- 5. the funny pages ---------- */
.comics{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px 12px; margin-top: 48px; }
.comic figcaption{ font: 500 13px/1.4 var(--sans); color: var(--ink-2); margin-top: 10px; }
.comic__panel{ border: 2px solid var(--ink); aspect-ratio: 3/4; overflow: hidden; background: var(--paper); transition: transform var(--t-ui) var(--ease-out); }
.comic__panel img{ width: 100%; height: 100%; object-fit: cover; }
/* square art sits on paper inside the 3:4 panel */
.comic__panel--contain img{ width: 100%; height: 100%; object-fit: contain; }
.comic__panel .pos-30{ object-position: 50% 30%; }
.comic:hover .comic__panel, .comic:focus-within .comic__panel{ transform: rotate(-0.6deg) translateY(-2px); }
@media (max-width: 899px){
  .comics{ grid-template-columns: 1fr 1fr; gap: 24px 10px; margin-top: 32px; }
  .comic figcaption{ font-size: 12px; }
}

/* ---------- 6. the style section ---------- */
.style__grid{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); margin-top: 48px; align-items: start; }
.style__cover{ grid-column: 1 / span 6; border: 1px solid var(--rule); }
.style__cover img{ width: 100%; aspect-ratio: 1; object-fit: cover; }
.style__four{ grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.style__four img{ width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--hair); }
.style__four figcaption{ font: 500 13px/1.4 var(--sans); color: var(--ink-2); margin-top: 8px; }
@media (max-width: 899px){
  .style__grid{ display: block; margin-top: 32px; }
  .style__four{ margin-top: 20px; gap: 20px 12px; }
}

/* ---------- 7. on screen ---------- */
.video__grid{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); align-items: start; }
.video__copy{ grid-column: 1 / span 5; }
.video__h{ max-width: 9ch; }
.video__copy .textlink{ margin-top: 20px; }
.reel{ grid-column: 7 / span 4; max-width: 340px; }
.reel__frame{ position: relative; border: 1px solid var(--rule); background: var(--ink); }
.reel__frame video{ width: 100%; aspect-ratio: 9/16; object-fit: cover; cursor: pointer; }
.reel__item .caption{ margin-top: 10px; }
.sound{
  position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; cursor: pointer; padding: 0;
  transition: background-color var(--t-ui) var(--ease-out);
}
.sound:hover{ background: var(--paper-2); }
.sound__on{ display: none; }
.sound[aria-pressed="true"] .sound__on{ display: block; }
.sound[aria-pressed="true"] .sound__off{ display: none; }
@media (max-width: 899px){
  .video__grid{ display: block; }
  .video__h{ max-width: 14ch; }
  .reel{ margin-top: 28px; max-width: min(78vw, 320px); }
}

/* ---------- 8. classifieds ---------- */
.ads{ columns: 3; column-gap: 16px; margin-top: 40px; }
.ad{
  break-inside: avoid; border: 1px solid var(--rule); padding: 16px; margin-bottom: 16px;
  font-size: 17px; line-height: 1.45; font-variation-settings: "opsz" 14; display: flow-root;
}
.ad--wanted{ background: var(--paper-2); }
.ad__h{ font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--hair); }
.ad .textlink{ margin-top: 6px; }
.ad__list{ display: grid; gap: 10px; }
.ad__list strong{ font-weight: 600; }
.ad__proof{ display: block; margin-top: 12px; border: 1px solid var(--hair); }
.ad__proof:hover{ border-color: var(--teal); }
@media (max-width: 1000px){ .ads{ columns: 2; } }
@media (max-width: 600px){ .ads{ columns: 1; margin-top: 28px; } }

/* ---------- 9. letters ---------- */
.letters__col{ max-width: 760px; text-align: center; }
.letters__pre{ font: italic 400 21px/1.3 var(--serif); color: var(--ink-2); }
.letters__h{
  margin-top: 14px; font: 500 var(--fs-lead)/1.08 var(--serif); letter-spacing: -0.02em; font-variation-settings: "opsz" 60;
  text-wrap: balance;
}
.pen-target{ position: relative; display: inline-block; white-space: nowrap; }
.pen--ring{ position: absolute; left: -8%; top: -26%; width: 116%; height: 152%; max-width: none; }
.pen--ring path{ stroke-width: 3; vector-effect: non-scaling-stroke; }
.letters__body{ margin: 24px auto 0; max-width: 44ch; }
.letters__addr{
  display: inline-block; margin-top: 28px; font: 500 30px/1.2 var(--serif); font-variation-settings: "opsz" 30;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--hair);
  overflow-wrap: anywhere;
}
.letters__addr:hover{ text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.letters__cta{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 32px; }
@media (max-width: 899px){
  .letters__pre{ font-size: 18px; }
  .letters__addr{ font-size: 22px; }
  .pen-target{ white-space: normal; margin: 0; }
}

/* ---------- footer ---------- */
.foot{ padding: 0 0 40px; }
.dbl-rule--heavy{ height: 8px; border-top-width: 4px; }
.foot__h{ font: 600 24px/1.2 var(--serif); font-variation-settings: "opsz" 24; margin-top: 40px; }
.sites{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); margin-top: 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sites a{ display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; text-decoration: none; border-left: 1px solid var(--hair); transition: background-color 150ms var(--ease-out); }
.sites a:first-child{ border-left: 0; padding-left: 0; }
.sites a:hover{ background: var(--paper-2); }
.sites a:first-child:hover{ padding-left: 12px; }
.sites__t{ font: 500 22px/1.15 var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; }
.sites__s{ display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.3 var(--sans); color: var(--ink-2); margin-top: auto; }
.foot__row{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-top: 32px; font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
@media (max-width: 899px){
  .sites{ grid-template-columns: 1fr; border-bottom: 0; }
  .sites a, .sites a:first-child{ border-left: 0; padding: 14px 0; border-bottom: 1px solid var(--hair); flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }
  .sites a:first-child:hover, .sites a:hover{ padding-left: 0; }
  .sites__t{ font-size: 19px; }
  .sites__s{ flex: none; }
  .foot__row{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px){
  .sites__s{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: 0ms !important; scroll-behavior: auto !important; }
}