@charset "UTF-8";
/* ==========================================================================
   Pakdis — single news item
   --------------------------------------------------------------------------
   A standalone sheet for news-single.html. It introduces no colour, font,
   radius or easing of its own — everything resolves to the tokens in
   css/style.css, and the header, footer, .plate, .gallery, .section-head and
   .link-arrow components are used exactly as that sheet defines them.

   Section 1 is what makes this page a different template from article.html.
   An article is a text with pictures in it; a news report is a set of
   pictures with a text between them, and the two cannot open the same way.
   So where article.html hands its opening to one full-bleed photograph, this
   page hands it to an *arrangement*: a purple band carrying the title, and a
   composed mosaic lapping over the band's lower edge.

   Three rules govern every photo block in this file, and they are the reason
   the page holds together rather than becoming a scrapbook:

   1. NO TWO NEIGHBOURING FRAMES SHARE A SILHOUETTE. Every grid here is
      asymmetric on purpose. Equal tiles read as a contact sheet — nothing is
      the subject, so the eye has no entry point.
   2. ONE DOMINANT FRAME PER BLOCK, at roughly 1.6× its neighbours. That is
      the design system's "exactly one focal point per section" rule applied
      to pictures instead of type.
   3. THE CORNER LANGUAGE ROTATES. .card's `12px 12px 35px 12px` is the
      identity's signature; each tile in a set carries the same radius set
      turned a quarter, so the block reads as one family seen from four
      sides rather than four copies.

   Sections 6 onward are the components this page shares with article.html —
   prose, subheads, rail, brands, prev/next, comments — carried over
   unchanged so a reader moving between the two never notices a seam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening band + lede
   The pictures come first on this page, so the band above them carries only
   the trail — everything else moved below the mosaic into `.nlede`.

   `.page-hero` is required on the section as a *behaviour* hook, not a style:
   js/app.js keys the sticky header's transparent→solid switch off
   `.hero, .page-hero`. Without it the white nav labels land on white content
   further down the page. Don't "clean it up".
   -------------------------------------------------------------------------- */

.nhero {
  position: relative;
  overflow: hidden;
  /* Deep enough to clear the fixed header and give the trail air, plus the
     lap depth the mosaic is pulled back up into. The band is now a coloured
     ground for the photographs rather than a place that holds text, so it is
     sized by that lap and nothing else. */
  /* Clearance is measured from the header's *bottom* edge, and that edge is
     at --header-drop + --header-h — the bar is fixed 44px down the page, not
     at the top of it. Padding by --header-h alone left the trail 12–18px
     inside the bar rather than below it. */
  padding-block: var(--hero-top) 172px;
  background: var(--purple-flood);     /* fallback where color-mix is missing */
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--purple-flood) 88%, #fff) 0%,
    var(--purple-flood) 42%,
    #3b256b 78%,
    #34205f 100%);
  isolation: isolate;
}

/* The identity's own sheet, full bleed, at the strength .plate uses it —
   this band carries no line work of its own to compete with, so it can take
   more ink than the calendar band on news.html could. Masked away entirely
   across the top: the transparent nav sits over this area, and pattern
   strokes running under menu labels is the one thing the artwork must never
   be allowed to do. */
/* Measured off the sheet (4955×1254): its first 16.6% of width carries 1.5%
   and 4.1% ink against a steady ~9.7% across the whole remainder. That sparse
   edge is real artwork, not a bug — but on a band this wide it lands as a
   visibly empty corner.

   `object-position` cannot fix it. The band's box is wider in aspect (~4.5:1)
   than the sheet (3.95:1), so `cover` scales by width and there is *no*
   horizontal slack to reposition within: the full width is on screen either
   way. The slack has to be manufactured, so the element itself is drawn 121%
   of the band and pinned to the reading-start edge. The visible area then
   shows the sheet's inked 82.6%, and the thin end runs off past the far edge
   where `.nhero`'s own `overflow: hidden` clips it. */
.nhero__pattern {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 121%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Physical 100%, deliberately: the sparse edge is at the sheet's left in the
     file's own coordinates, whatever the page direction. Below ~1440 the band
     is taller in aspect than the sheet, so cover scales by height and real
     horizontal slack appears — this anchors that slack away from the thin end
     too, instead of centring and letting some of it back in. */
  object-position: 100% 38%;
  opacity: .13;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 99%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 99%);
}

/* One warm light at the end corner so the band has an axis instead of
   reading as a flat rectangle of colour. Gold, at the strength the home
   page's hero glow uses — no new hue enters the palette. */
.nhero__glow {
  position: absolute;
  inset-inline-end: -220px;
  top: -180px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 167, 96, .26) 0%, rgba(187, 167, 96, 0) 70%);
  pointer-events: none;
}

.nhero__inner { position: relative; z-index: 1; }
/* The one page that opts out of the shared rhythm: this band holds nothing but
   the trail, so there is nothing below it for a gap to separate it from — the
   band's own padding does that job. */
.nhero .breadcrumb { margin-bottom: 0; }

/* -- the lede, below the pictures ----------------------------------------- */
/* This block is `article.html`'s opening, component for component: tag pill,
   headline, gold stroke, then the white fact card. The only change is order —
   on the article page the headline sits on the photograph, here it follows
   the mosaic — and colour, because that page's headline is white on a picture
   and this one is purple on paper.

   Three arrangements were tried before this and all failed the same way: each
   invented a layout for the block instead of using the one the site already
   owns. A lone narrow column left the headline nothing to be large against; a
   bottom-aligned pair left a hole above the shorter half; a two-column footer
   scattered four related facts into two clusters. The site's own answer is a
   single axis with a card under it, and it works here for the reason it works
   there — nothing is competing for the same edge.
   -------------------------------------------------------------------------- */

.nlede { padding-block: 52px 0; }

/* The category as a pill with the identity's one broken corner. On the
   article page this sits over a photograph and can carry raw --gold; on white
   that measures 2.4:1, so the text takes the darkened value while the pill
   keeps the brand gold in its border and fill. */
.nlede__tag {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgb(187 167 96 / .55);
  border-radius: 999px 999px 999px 5px;
  background: rgb(187 167 96 / .14);
  font-size: 13.5px;
  font-weight: 500;
  color: #7d6b2e;                      /* 5.0:1 over the pill's own fill */
}

/* Size, weight and line-height come from `.ptitle` in css/style.css. Two
   things stay here: the measure — `ch` is not usable, it sizes on the "0"
   glyph which is far narrower than Persian letterforms — and the colour.

   The colour is the one place this page must depart from the component. The
   shared title is gold, which on the purple pages measures 3.4:1 and passes as
   large text. This page's headline is on white, where gold is 2.4:1 and fails
   even that threshold. Purple reads 11.1:1 and is what the identity uses for
   type on paper anyway. */
.nlede__title {
  max-width: min(100%, 880px);
  margin-top: 20px;
  color: var(--purple);
}



/* --------------------------------------------------------------------------
   1b. Fact bar
   Lifted from css/article.css unchanged. There it laps the photograph's foot;
   here the pictures are further up the page, so it sits on its own — but it
   is the same card, the same divider rules and the same 44px share buttons,
   because a reader who has seen the article page has already learnt it.
   -------------------------------------------------------------------------- */

.factbar { margin-top: 40px; }

.factbar__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 22px 34px;
  border: 1px solid #ece8f2;
  border-radius: 14px 14px 40px 14px;
  background: #fff;
  box-shadow: 0 30px 60px -34px rgba(30, 16, 60, .32);
}

.byline { display: flex; align-items: center; gap: 14px; flex: none; }

.byline__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 12px;     /* the broken corner at avatar scale */
  background: var(--purple);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
}

.byline__who { display: flex; flex-direction: column; }
.byline__who em {
  order: -1;                           /* label above the name */
  font-size: 11.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--grey-600);
}
.byline__who b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--purple);
}

/* A description list, not a row of chips: each value has a label, and the
   pairing is what makes "۱۳ قاب" mean anything on its own. */
.factlist {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  margin-inline-start: auto;
}
.factlist__item {
  position: relative;
  padding-inline-start: 34px;
}
.factlist__item:first-child { padding-inline-start: 0; }
.factlist__item:first-child::before { display: none; }
.factlist__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #ece8f2;
}
.factlist dt {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--grey-600);
}
.factlist dd {
  margin: 3px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--purple);
  white-space: nowrap;
}

.byline__share {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding-inline-start: 32px;
}
.byline__share::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #ece8f2;
}
.byline__share-label {
  margin-inline-end: 6px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--grey-600);
}

/* --------------------------------------------------------------------------
   2. Photo primitives
   Every photograph on this page — mosaic tile, in-text figure, report tile —
   is the same object: a real <button> wrapping a real <img>. One class does
   the framing, the crop, the hover and the focus ring, so a new photo block
   anywhere on the site is a matter of choosing a grid, not restyling a photo.
   -------------------------------------------------------------------------- */

.photo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  /* The identity's card radius. Individual blocks rotate it; this is the
     base orientation, matching .card in css/style.css exactly. */
  border-radius: 12px 12px 35px 12px;
  background: rgb(68 47 114 / .12);    /* holds the shape while the file loads */
  cursor: zoom-in;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

/* Hover: the frame lifts, the picture inside grows slightly more than the
   frame does. That difference is what makes it read as looking *into* the
   photo rather than as the whole tile scaling. Same numbers as .card. */
.photo:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -24px rgb(68 47 114 / .55); }
.photo:hover img { transform: scale(1.045); }

.photo:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* The zoom affordance. Hidden until hover on a pointer device, but always
   present for keyboard users the moment the button takes focus — otherwise
   the only people who cannot see what the control does are the ones who
   cannot see the cursor change either. */
.photo__zoom {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgb(17 7 53 / .58);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.photo__zoom svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.9;
  stroke-linecap: round;
}
.photo:hover .photo__zoom,
.photo:focus-visible .photo__zoom { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------------------------
   3. Lead mosaic
   The featured image, as an arrangement. 1.618fr against 1fr is the golden
   section — it is the widest the supporting column can be while the main tile
   still unambiguously leads. At equal widths the block loses its subject.
   -------------------------------------------------------------------------- */

.leadmosaic {
  position: relative;
  z-index: 2;
  /* Pulls the block up into .nhero's over-padded foot. The mosaic therefore
     belongs to neither the purple nor the white and hands the reader from one
     to the other — which is the whole reason the band is padded that way. */
  margin: -148px 0 8px;
}

/* The photographs, and nothing else. `aspect-ratio` here gives the grid a
   definite height, which is what lets the two `1fr` rows resolve — and that
   in turn is what makes the main tile (spanning both rows plus the gap)
   bottom out on exactly the same line as the tile beside it. With the
   caption inside this box the height stopped being definite and the
   baselines drifted apart. */
.leadmosaic__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 18px;
  aspect-ratio: 16 / 8.6;
}

.leadmosaic__tile { position: relative; min-width: 0; min-height: 0; }

.leadmosaic__tile--main { grid-row: 1 / span 2; }

/* The corner language, rotated a quarter per tile. Read together the three
   tiles state the identity's radius from three sides. */
.leadmosaic__tile--main .photo { border-radius: 14px 14px 46px 14px; }
.leadmosaic__tile--b    .photo { border-radius: 14px 14px 14px 38px; }
.leadmosaic__tile--c    .photo { border-radius: 38px 14px 14px 14px; }

/* Three views of one event, not one file printed three times: each tile takes
   its crop from a different part of the frame. */
.leadmosaic__tile--main img { object-position: 50% 42%; }
.leadmosaic__tile--b    img { object-position: 62% 38%; }
.leadmosaic__tile--c    img { object-position: 38% 60%; }

/* A row of its own beneath all three frames, so it belongs to the set rather
   than to one tile. */
.leadmosaic__cap {
  margin-top: 14px;
  padding-inline-start: 15px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--grey-600);
  border-inline-start: 2px solid var(--gold);
}

/* Not a label — the way in. A reader who came for the pictures gets to all of
   them without reading a word first. */
.leadmosaic__all {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--purple);
  background: #fff;
  border: 0;
  border-radius: 8px 8px 22px 8px;
  cursor: pointer;
  box-shadow: 0 14px 28px -16px rgb(17 7 53 / .7);
  transition: background .25s var(--ease), color .25s var(--ease), gap .25s var(--ease);
}
.leadmosaic__all svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.leadmosaic__all:hover { gap: 15px; background: var(--purple); color: #fff; }
.leadmosaic__all:hover svg { transform: translate(2px, -2px); }
.leadmosaic__all:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* --------------------------------------------------------------------------
   4. In-text photo modules
   Three shapes, each earning its place: a full-measure frame for a single
   subject, an unequal pair for a comparison, and a portrait lapped against a
   quote where the picture and the words only work together.
   -------------------------------------------------------------------------- */

/* -- single -------------------------------------------------------------- */
.pfig { margin: 42px 0; }
.pfig .photo { aspect-ratio: 16 / 9; height: auto; }
.pfig__cap,
.pduo__cap {
  margin-top: 14px;
  padding-inline-start: 15px;
  font-size: 13.6px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--grey-600);
  border-inline-start: 2px solid var(--gold);
}

/* -- unequal pair --------------------------------------------------------- */
/* 58/42, not 50/50. Equal halves force the reader to decide which frame is
   the subject; this decides for them, and the caption then only has to name
   the two rather than rank them. */
.pduo {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  gap: 14px;
  margin: 42px 0;
}
.pduo__cell { display: block; min-width: 0; aspect-ratio: 4 / 3; }
.pduo__cap { grid-column: 1 / -1; margin-top: 0; }
.pduo__cell:first-child .photo { border-radius: 12px 12px 12px 34px; }
.pduo__cell:last-child  .photo { border-radius: 12px 12px 34px 12px; }
.pduo__cell:first-child img { object-position: 45% 45%; }
.pduo__cell:last-child  img { object-position: 58% 50%; }

/* -- portrait + quote ----------------------------------------------------- */
.pquote {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
  margin: 46px 0;
}
.pquote__media { min-width: 0; }
/* Taller than wide — the one portrait crop on the page. Against a run of
   landscape frames it is what makes this block stop the scroll. */
.pquote__media .photo { aspect-ratio: 3 / 3.9; height: auto; border-radius: 34px 12px 12px 12px; }
.pquote__media img { object-position: 50% 32%; }

.pquote__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 34px 36px;
  border-radius: 12px 12px 12px 34px;
  background: var(--purple-flood);
  isolation: isolate;
}
/* The pattern is cropped from the sheet's denser end. Its first quarter is
   roughly half the ink of the rest, and a block this small showed that
   emptiness as an unfinished corner — the same fault the article page's
   pullquote had. Over-height plus an end-weighted crop guarantees the box is
   filled edge to edge whatever its measure resolves to. */
.pquote__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 240%;
  max-width: none;
  top: 50%;
  translate: 0 -50%;
  object-fit: cover;
  object-position: 100% 50%;
  opacity: .17;
  pointer-events: none;
}
.pquote__text p {
  margin: 0 0 20px;
  font-size: 20.5px;
  font-weight: 500;
  line-height: 1.92;
  color: #fff;
}
.pquote__text cite {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: color-mix(in srgb, var(--gold) 62%, #fff);
}
.pquote__text cite::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   5. Photo report
   The centrepiece, and the reason this template exists separately from
   article.html. Six frames in a 4×3 mosaic laid out by name rather than by
   auto-placement, so the shape is a decision and not an accident of source
   order. Areas: one 2×2 lead, two singles, a 2×1 pair, a 3×1 panorama and a
   final single — no tile shares an edge with a tile its own shape.

   On .plate rather than on white because a run of photographs needs a ground
   darker than the pictures; on white the block reads as holes cut in the page.
   -------------------------------------------------------------------------- */

.report { padding-block: 86px 96px; }
.report .container { position: relative; z-index: 1; }

.report__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b c"
    "a a d d"
    "e e e f";
  grid-auto-rows: clamp(132px, 12.4vw, 208px);
  gap: 16px;
  margin-top: 34px;
}

.report__tile { position: relative; min-width: 0; min-height: 0; }
.report__tile--a { grid-area: a; }
.report__tile--b { grid-area: b; }
.report__tile--c { grid-area: c; }
.report__tile--d { grid-area: d; }
.report__tile--e { grid-area: e; }
.report__tile--f { grid-area: f; }

/* The rotation again, one quarter-turn per tile around the set. */
.report__tile--a .photo { border-radius: 16px 16px 52px 16px; }
.report__tile--b .photo { border-radius: 16px 16px 16px 40px; }
.report__tile--c .photo { border-radius: 40px 16px 16px 16px; }
.report__tile--d .photo { border-radius: 16px 40px 16px 16px; }
.report__tile--e .photo { border-radius: 16px 16px 52px 16px; }
.report__tile--f .photo { border-radius: 16px 16px 16px 40px; }

/* Six different crops of two files. Without this the mosaic would be one
   photograph tiled, which is exactly the failure the shape is meant to avoid. */
.report__tile--a img { object-position: 50% 44%; }
.report__tile--b img { object-position: 30% 40%; }
.report__tile--c img { object-position: 70% 55%; }
.report__tile--d img { object-position: 50% 68%; }
.report__tile--e img { object-position: 44% 36%; }
.report__tile--f img { object-position: 64% 46%; }

/* Only two of the six carry a caption. Captioning all six turns a mosaic into
   a table; the two that are captioned are the two the text does not already
   describe. */
.report__tile figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 40px 18px 16px;
  font-size: 13.4px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  /* A scrim, not a bar — it has to darken the picture enough to carry white
     text (measured 5.1:1 over the plate's own value) without cutting the
     frame in two. */
  background: linear-gradient(to top, rgb(17 7 53 / .82) 0%, rgb(17 7 53 / .5) 45%, rgb(17 7 53 / 0) 100%);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Lightbox
   Progressive enhancement, strictly. Every trigger is a real button around a
   real <img> with real alt text, so with no JavaScript a reader loses the
   zoom — never the pictures.
   -------------------------------------------------------------------------- */

.lbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgb(11 5 32 / .93);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lbox[hidden] { display: none; }
.lbox.is-open { opacity: 1; }

.lbox__stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
  margin: 0;
}
.lbox__img {
  display: block;
  max-width: min(100%, 1180px);
  max-height: 74vh;
  width: auto;
  height: auto;
  margin-inline: auto;
  border-radius: 14px 14px 46px 14px;
  background: rgb(68 47 114 / .3);
  box-shadow: 0 50px 90px -40px #000;
}
.lbox__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  font-size: 14.4px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
  text-align: center;
}
.lbox__count {
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--gold) 62%, #fff);
}

.lbox__close,
.lbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lbox__close:hover,
.lbox__nav:hover { background: rgb(255 255 255 / .2); }
.lbox__close:focus-visible,
.lbox__nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.lbox__close {
  inset-block-start: 24px;
  inset-inline-end: 24px;
  width: 48px;
  height: 48px;
}
.lbox__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.lbox__nav {
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 54px;
  height: 54px;
}
.lbox__nav svg { width: 13px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Physical inset, deliberately: prev/next here mean "towards the start of the
   set" and "towards the end", and the chevrons are drawn pointing at fixed
   screen edges. Logical properties would flip the button away from the arrow
   it contains. */
.lbox__nav--prev { right: 24px; }
.lbox__nav--next { left: 24px; }
.lbox__nav--prev:hover { transform: translateX(3px); }
.lbox__nav--next:hover { transform: translateX(-3px); }

/* Scroll lock, set by js/news-single.js while the dialog is open. */
body.is-lboxed { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Body + rail layout
   -------------------------------------------------------------------------- */

.nbody { padding-block: 76px 92px; }

.nbody__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 64px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   8. Responsive — the project's existing breakpoints only.
   -------------------------------------------------------------------------- */

@media (max-width: 1500px) {
  .nbody__grid { grid-template-columns: minmax(0, 1fr) 336px; gap: 52px; }
  .leadmosaic { margin-top: -132px; }
  .nhero { padding-block: var(--hero-top) 158px; }
  .nlede { padding-block: 48px 0; }
}

@media (max-width: 1200px) {
  .nbody__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 42px; }
  .nbody { padding-block: 62px 76px; }
  .leadmosaic { margin-top: -118px; }
  .leadmosaic__grid { gap: 14px; aspect-ratio: 16 / 9.4; }
  .nhero { padding-block: var(--hero-top) 142px; }
  .nlede { padding-block: 42px 0; }
  .factbar { margin-top: 34px; }
  .factbar__inner { gap: 24px; padding: 20px 26px; }
  .factlist { gap: 24px; }
  .factlist__item { padding-inline-start: 24px; }
  .report { padding-block: 68px 78px; }
  .report__grid { gap: 13px; }
  .pquote { gap: 16px; }
  .pquote__text { padding: 28px 28px; }
  .pquote__text p { font-size: 18.6px; }
}

@media (max-width: 1024px) {
  /* Single column: a rail has nowhere to sit, and the mosaic's two-column
     hierarchy stops being legible once the supporting tiles fall under
     ~200px wide — below that they are thumbnails, not frames. */
  .nbody__grid { grid-template-columns: 1fr; gap: 48px; }

  .leadmosaic { margin-top: -104px; }
  .leadmosaic__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }

  /* One column: the summary and the facts each get the full measure, and the
     rule that divided them becomes a rule above the facts instead. */
  /* The lead keeps its dominance by spanning the full width and carrying its
     own ratio; the two supporting frames sit under it as a pair. The block is
     still 1 : 2, just stacked instead of side by side. */
  .leadmosaic__tile--main { grid-row: auto; grid-column: 1 / -1; }
  .leadmosaic__tile--main .photo { aspect-ratio: 16 / 8.4; }
  .leadmosaic__tile--b .photo,
  .leadmosaic__tile--c .photo { aspect-ratio: 4 / 3; }

  .nhero { padding-block: var(--hero-top) 128px; }
  /* Single column from here down, so the px measure that shaped the headline
     against a wide column stops being useful — the container is the measure. */
  .nlede__title { max-width: none; }

  /* The report keeps a mosaic — just a shorter one. Flattening it to a plain
     grid here would throw away the only thing that makes the section worth
     scrolling to on a tablet. */
  .report__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b c"
      "d d"
      "e f";
    grid-auto-rows: clamp(128px, 21vw, 210px);
  }

  .pquote { grid-template-columns: 1fr; }
  .pquote__media .photo { aspect-ratio: 16 / 9; border-radius: 34px 12px 12px 12px; }
  .pquote__media img { object-position: 50% 40%; }

  .lbox__nav { width: 48px; height: 48px; }
  .lbox__nav--prev { right: 14px; }
  .lbox__nav--next { left: 14px; }
}

@media (max-width: 620px) {
  .nhero { padding-block: var(--hero-top) 96px; }
  .nlede { padding-block: 34px 0; }
  .nlede__title { margin-top: 16px; }
  .factbar { margin-top: 28px; }
  /* The row breaks up: three groups side by side inside a 350px card
     leaves each of them about 100px, which is narrower than the words
     they hold. Stacked, each keeps its own line and the divider rules
     that separated them horizontally turn off. */
  .factbar__inner { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px 22px; }
  .factlist { flex-wrap: wrap; gap: 16px 26px; margin-inline-start: 0; }
  .factlist__item { padding-inline-start: 0; }
  .factlist__item::before { display: none; }
  .byline__share { padding-inline-start: 0; padding-top: 18px; }
  .byline__share::before { top: 0; bottom: auto; inset-inline: 0; width: auto; height: 1px; }
  /* Back into the flow: an auto margin on a wrapped flex line would push the
     share row alone onto its own line, hard against the far edge. */
  .nlede__head { margin-bottom: 16px; }

  /* The share row stops being a right-hand column and becomes the last item
     in the flow — `margin-inline-start: auto` on a wrapped flex line would
     otherwise push it alone onto its own row, hard against the edge. */

  .leadmosaic { margin-top: -78px; }
  .leadmosaic__grid {
    /* Two frames side by side under 620px are 150px wide — a contact sheet,
       not photography. The set becomes a single column and the supporting
       frames take a wider crop so they still read as separate views. */
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .leadmosaic__tile--main .photo { aspect-ratio: 4 / 3; }
  .leadmosaic__tile--b .photo,
  .leadmosaic__tile--c .photo { aspect-ratio: 16 / 9; }
  .leadmosaic__cap { font-size: 13px; }
  .leadmosaic__all {
    inset-block-end: 12px;
    inset-inline-end: 12px;
    /* 44px minimum tap target: 12+12 padding plus a 20px line box. */
    padding: 12px 16px;
    font-size: 12.6px;
  }

  .nbody { padding-block: 44px 56px; }
  .nbody__grid { gap: 38px; }

  .pfig, .pduo, .pquote { margin: 30px 0; }
  /* An unequal pair at phone width makes the smaller frame unreadable, so the
     comparison stacks and stays a comparison. */
  .pduo { grid-template-columns: 1fr; gap: 12px; }
  .pduo__cell { aspect-ratio: 16 / 10; }
  .pquote__text { padding: 24px 22px; }
  .pquote__text p { font-size: 16.6px; line-height: 1.86; }

  .report { padding-block: 48px 56px; }
  .report__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f";
    grid-auto-rows: clamp(180px, 54vw, 260px);
    gap: 12px;
    margin-top: 22px;
  }
  .report__tile figcaption { padding: 34px 14px 13px; font-size: 12.6px; }

  .lbox { padding: 16px; }
  .lbox__img { max-height: 62vh; border-radius: 12px 12px 34px 12px; }
  .lbox__close { inset-block-start: 14px; inset-inline-end: 14px; width: 44px; height: 44px; }
  .lbox__nav { inset-block-start: auto; inset-block-end: 18px; translate: none; width: 44px; height: 44px; }
  .lbox__nav--prev { right: calc(50% + 10px); }
  .lbox__nav--next { left: calc(50% + 10px); }
}

/* --------------------------------------------------------------------------
   9. Motion preferences
   Extends the block at the end of css/style.css to the components this sheet
   adds. Every one of them still communicates its state through colour or
   shadow, so nothing is lost by holding it still.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .photo,
  .photo img,
  .photo__zoom,
  .leadmosaic__all,
  .leadmosaic__all svg,
  .lbox,
  .lbox__close,
  .lbox__nav { transition: none; }

  .photo:hover { transform: none; }
  .photo:hover img { transform: none; }
  .lbox__nav--prev:hover,
  .lbox__nav--next:hover { transform: none; }
  .lbox__nav { translate: 0 -50%; }
}

/* ==========================================================================
   10. Shared components — carried over from css/article.css unchanged.
   Prose, subheads, rail, popular list, brand list, prev/next, comments and
   the comment form are the same objects on both templates. They are copied
   rather than imported so this sheet stays the single file to edit for this
   page: nothing here can be broken by a change made to the article page.
   ========================================================================== */

.breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .7);
}
.breadcrumb a { color: rgba(255, 255, 255, .7); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: #fff; }
.breadcrumb__sep {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  rotate: 180deg;                      /* RTL: chevron points start-ward */
}

/* --------------------------------------------------------------------------
   1. Reading progress
   Fixed above the header (z 60 clears the header's 50) so it survives the
   sticky bar's own state change. aria-hidden in the markup: a screen reader
   already knows where it is in the document.
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  width: 0;                            /* js/article.js drives this */
  height: 100%;
  background: linear-gradient(to left, var(--gold), #d8c98c);
  /* No transition: the bar reports scroll position, and easing it would make
     it lag behind the thing it reports. */
}

/* --------------------------------------------------------------------------
   2. Fact bar
   The article's own data, after the image. Lapped over the photograph's foot
   so the two read as one opening — the lift is what stops it looking like an
   unrelated strip that happens to follow a banner.
   -------------------------------------------------------------------------- */


/* -- the facts ------------------------------------------------------------ */
/* A description list, not a row of chips: each value has a label, and the
   label/value pairing is what makes "۹ دقیقه" mean anything on its own. */


/* -- share ---------------------------------------------------------------- */


/* 44px box, 40px artwork: the two icon assets are footer rasters at 65×70,
   and at that size they read as footer furniture rather than as buttons. */
.share-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.share-btn img { width: 38px; height: 41px; }
.share-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--purple);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share-btn:hover { background: #f5f2f9; transform: translateY(-2px); }

/* Set by js/article.js once the address is on the clipboard — the button has
   to say it worked, or nothing appears to have happened. */
.share-btn--copy.is-copied { background: rgb(187 167 96 / .2); }
.share-btn--copy.is-copied svg { stroke: var(--gold); }

/* --------------------------------------------------------------------------
   4. Body + rail
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   5. Reading typography
   The one genuinely new system on this page. Body copy is set in --purple
   rather than a grey: the design system's rule is "text on white is purple
   or --ink", and at weight 300 the brand purple measures 9.7:1 on white —
   far past AA — so the page can stay in brand colour without costing
   legibility. --ink would be harsher than a long read wants.

   Measure is capped in `ch` rather than px so it tracks the font size
   through the breakpoints instead of needing a new number at each one.
   -------------------------------------------------------------------------- */
.prose {
  /* No measure cap. The 68ch limit left roughly a third of the column empty
     on a wide screen, which is the one thing a reader notices before they
     notice the type. The column itself now sets the line length, and the
     size goes up a step so the character count per line stays as close to a
     comfortable measure as a full-width column allows. */
  font-size: 18px;
  font-weight: 300;
  line-height: 2.05;
  color: var(--purple);
}
.prose p { margin-bottom: 26px; }
.prose > p:last-child { margin-bottom: 0; }

/* The opening paragraph is set larger and a shade heavier — it's the ramp
   from the headline down to body size, not a separate voice. It carries the
   whole opening on its own now that the lede's summary line is gone. */
.prose__lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.95;
  margin-bottom: 34px;
}

/* -- subheads: the 2×2 dot mark -------------------------------------------
   The four-dot cluster is lifted straight from the brand pattern, where it
   punctuates the line-work at intervals. Reusing it here as the subhead mark
   is the closest this page gets to quoting the identity directly. The rule
   that runs off the end of the heading is the same hairline motif the about
   block and the hero use, fading towards the reading end so it has a
   direction rather than reading as a symmetrical dash. */
.sub {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 56px 0 22px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--purple);
  scroll-margin-top: calc(var(--header-h) + 24px);  /* in-page links clear the fixed bar */
}
.sub__mark {
  flex: none;
  width: 22px;
  height: 22px;
  fill: var(--gold);
}
.sub > span { flex: none; max-width: calc(100% - 36px); }
.sub::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: 24px;
  background: linear-gradient(to left, rgb(187 167 96 / .6), rgb(187 167 96 / 0));
}

/* -- key points ----------------------------------------------------------- */
/* A summary box earns its place on a long read: it lets someone decide
   whether to commit before paragraph three. Built on the card's tint, at
   the lightest alpha the palette allows. */


/* Square bullets, not round: the pattern's own geometry is built from
   squares and quarter-circles, and a round dot here would be the one shape
   on the page that isn't from the system. */


/* -- lists ---------------------------------------------------------------- */
.prose__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 30px;
  padding-inline-start: 4px;
}
.prose__list li {
  position: relative;
  padding-inline-start: 26px;
}
.prose__list li::before {
  content: "";
  position: absolute;
  top: .88em;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px 2px 2px 0;
  border: 1.6px solid var(--gold);
}

/* -- pull quote ----------------------------------------------------------- */
/* Purple flood + pattern, i.e. the plate's own material, dropped into the
   column. It's the page's single loudest moment, so there is exactly one. */

/* The asset is 4955×1254 — nearly 4:1 — and its leftmost quarter is drawn far
   sparser than the rest (measured: ~5% ink against ~10% across the other
   three). Fitted with `cover` to a box this wide the scale is set by width,
   which leaves zero horizontal slack, so that thin quarter always landed in
   the frame and read as a corner where the pattern had simply stopped.

   Over-tall on purpose: at 260% the scale is set by height instead, the
   render comes out roughly twice the box's width, and `object-position:100%`
   spends that slack on the dense three-quarters. The element is clipped by
   the quote's own overflow, so the extra height costs nothing. */


/* A short gold rule instead of a quotation glyph: the mark belongs to the
   system, a typographic quote mark doesn't. */


/* -- in-body figure -------------------------------------------------------- */


/* -- tags ------------------------------------------------------------------ */


/* --------------------------------------------------------------------------
   6. Rail — most-read
   -------------------------------------------------------------------------- */
.rail { position: relative; }

/* Both blocks live inside one sticky container, so they travel together and
   both stay on screen — two siblings each given `position: sticky` with the
   same `top` would simply stack on the same line and overlap.

   The max-height is the load-bearing part. Sticky silently stops working the
   moment its element is taller than the space between `top` and the viewport
   floor: the box just scrolls away like static content. Capping the rail to
   the viewport it has left, and letting it scroll internally past that,
   keeps it pinned no matter how many items either list grows to — otherwise
   adding one more news item could quietly un-stick the whole column. */
/* Both blocks live inside one sticky container so they travel together —
   two siblings each given `position: sticky` with the same `top` would just
   stack on the same line and overlap.

   No height cap and no inner scroll: a scrollbar inside a sidebar is a second
   scroll surface competing with the page's own, and it was solving a problem
   that only appeared when the rail carried three blocks. With two it fits the
   viewport on ordinary desktops; where it doesn't, it simply scrolls away
   with the page, which is the normal, undistracting fallback. */
.rail__inner {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  padding: 28px 26px 26px;
  border: 1px solid #ece8f2;
  border-radius: 16px 16px 40px 16px;
  background: linear-gradient(180deg, #fbfafd 0%, #fff 55%);
}
/* The two lists are separated by a rule rather than by a gap alone — in a
   single bordered card, whitespace on its own reads as a paragraph break,
   not as the end of one section and the start of another. */
.rail__block + .rail__block {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #ece8f2;
}

.rail__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--purple);
}
.rail__title .sub__mark { width: 18px; height: 18px; }
.rail__title > span { flex: none; }
.rail__title::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: 16px;
  background: linear-gradient(to left, rgb(187 167 96 / .6), rgb(187 167 96 / 0));
}

.popular { display: flex; flex-direction: column; }
.popular__item + .popular__item { border-top: 1px solid #f1eef6; }

.popular__link {
  display: grid;
  grid-template-columns: auto 68px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  transition: transform .25s var(--ease);
}
.popular__item:first-child .popular__link { padding-top: 0; }
.popular__item:last-child  .popular__link { padding-bottom: 0; }
.popular__link:hover { transform: translateX(4px); }   /* RTL: nudges start-ward */

/* The rank is the list's only ornament, so it carries the gold and steps
   back to a hairline outline rather than a filled chip — five filled gold
   badges in a column would out-shout the titles they're numbering. */
.popular__rank {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: rgb(187 167 96 / .85);
}

.popular__thumb {
  display: block;
  overflow: hidden;
  width: 68px;
  height: 52px;
  border-radius: 8px 8px 18px 8px;
}
.popular__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.popular__link:hover .popular__thumb img { transform: scale(1.06); }

.popular__body { display: block; min-width: 0; }
.popular__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.popular__link:hover .popular__title { color: var(--purple); }
/* --grey-600 rather than the --grey-400 the card dates use: at 12px on white
   that token measures 2.85:1, and this line carries the date and length a
   reader is choosing between. Same reasoning as .comment__date. */
.popular__meta {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 300;
  color: var(--grey-600);
}

.rail__more {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1eef6;
  font-size: 15px;
}
.rail__more:hover { color: var(--purple); }

/* -- latest news ----------------------------------------------------------
   Same materials as the list above, arranged differently on purpose: a wider
   image, no rank, and the date promoted above the title. Two lists with an
   identical silhouette stacked in one card would read as one list with a
   stray heading dropped into the middle of it. */

          /* long titles clip, not stretch the card */


   /* RTL: nudges start-ward */


/* Gold, and set above the title rather than beneath it: for news the date is
   the point — it's what makes "latest" mean anything. */


/* -- latest news list ----------------------------------------------------- */
/* Lifted from css/article.css unchanged, class for class, because the rail
   markup on this page is that page's rail markup — only the block order
   differs. */
.news { display: flex; flex-direction: column; gap: 16px; }
.news__item { min-width: 0; }
.news__link {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  transition: transform .25s var(--ease);
}
.news__link:hover { transform: translateX(4px); }
.news__thumb {
  display: block;
  overflow: hidden;
  width: 76px;
  height: 58px;
  /* The card silhouette at its smallest — the one broken corner survives even
     at thumbnail size, which is what keeps it part of the system. */
  border-radius: 8px 8px 20px 8px;
}
.news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.news__link:hover .news__thumb img { transform: scale(1.06); }
.news__body { display: block; min-width: 0; }
.news__date {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  /* The brand gold reads 2.4:1 on white — nowhere near usable for 11.5px
     type. Same hue, darkened only as far as it takes to clear 4.5:1. */
  color: #847132;
}
.news__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.news__link:hover .news__title { color: var(--purple); }
@media (max-width: 620px) {
  .news { gap: 14px; }
.news__link { grid-template-columns: 66px minmax(0, 1fr); gap: 11px; }
.news__thumb { width: 66px; height: 52px; }
}

/* --------------------------------------------------------------------------
   7. Brands, in the rail
   A list, not a grid of marks: each brand carries a line saying what it
   actually sells. A logo alone assumes the reader already recognises it,
   which on an article page — where they arrived for the writing, not the
   catalogue — is the wrong assumption.

   The silhouette deliberately matches the two lists above it: artwork on the
   reading edge, text beside it, hairline between rows. Three lists that
   behave the same way read as one considered column; three that each invent
   a layout read as three widgets stacked.
   -------------------------------------------------------------------------- */
.brandlist { display: flex; flex-direction: column; }

.brandlist__item + .brandlist__item { border-top: 1px solid #f1eef6; }

.brandlist__link {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding-block: 13px;
  transition: transform .25s var(--ease);
}
.brandlist__item:first-child .brandlist__link { padding-top: 0; }
.brandlist__item:last-child  .brandlist__link { padding-bottom: 0; }
.brandlist__link:hover { transform: translateX(4px); }   /* RTL: nudges start-ward */

/* Fixed box + contain rather than a width: these five marks run from 1.08 to
   1.52 in aspect, so sizing on width alone would leave the squarer ones
   towering over the wider ones. A shared height is what lines them up down
   the column — the thing the eye actually reads as alignment. */
/* A step up from the other two lists' artwork on purpose: these are the
   company's own marks, and at 60×38 they were reading as thumbnails beside
   the news photos rather than as logos. Held to 74×48 — enough to be
   recognised, not enough to outweigh the article the rail sits beside. */
.brandlist__logo {
  display: block;
  overflow: hidden;                    /* contains the hover scale */
  width: 74px;
  height: 48px;
}
/* Sized to the box outright rather than capped with `max-height: 100%`.
   That cap resolves against the grid *row*, which is an implicit auto track
   — indefinite as far as percentage resolution goes — so it was being
   dropped, and the tallest marks (Barleta at 1.08, Sundis at 1.16) rendered
   at intrinsic size and spilled across the row rule beneath them. Giving the
   image the box and letting `contain` letterbox inside it cannot overflow,
   whatever aspect the next logo arrives in. */
.brandlist__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.brandlist__link:hover .brandlist__logo img { transform: scale(1.06); }

.brandlist__body { display: block; min-width: 0; }

.brandlist__name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--purple);
  transition: color .25s var(--ease);
}
.brandlist__link:hover .brandlist__name { color: var(--gold); }

/* One line, clamped. The descriptions are short enough to fit, but a longer
   one added later would otherwise push its row out of step with the rest and
   break the alignment the fixed logo box was set up to hold. */
.brandlist__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--grey-600);
}

/* --------------------------------------------------------------------------
   8. Previous / next
   -------------------------------------------------------------------------- */
.adjacent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  /* The photo report above this ends on the purple plate. Without a top pad
     the two cards butt straight against that edge and read as part of the
     report rather than as navigation away from it. */
  padding-top: 84px;
  padding-bottom: 96px;
}

.adjacent__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 28px;
  border: 1px solid #ece8f2;
  border-radius: 14px 14px 35px 14px;
  background: #fff;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.adjacent__card:hover {
  border-color: rgb(187 167 96 / .6);
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -24px rgba(68, 47, 114, .35);
}

/* "Next" is aligned to the opposite edge so the pair reads outward from the
   centre — the arrows then point the way the reader is actually going. */
.adjacent__card--next { text-align: start; }
.adjacent__card--next .adjacent__label { margin-inline-start: auto; }

.adjacent__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
}
.adjacent__label svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.adjacent__card--prev:hover .adjacent__label svg { transform: translateX(3px); }
.adjacent__card--next:hover .adjacent__label svg { transform: translateX(-3px); }

.adjacent__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--purple);
}

/* --------------------------------------------------------------------------
   9. Comments
   -------------------------------------------------------------------------- */
.comments { padding-bottom: 110px; }

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 56px;
}

.comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 24px 26px;
  border: 1px solid #ece8f2;
  border-radius: 14px 14px 32px 14px;
  background: #fff;
}

.comment__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 10px;
  background: rgb(187 167 96 / .14);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
}
/* The brand's own replies invert to purple, so an official answer is
   distinguishable at a glance without reading the badge. */
.comment__avatar--brand { background: var(--purple); color: #fff; }

/* A grid item defaults to min-width:auto, so one long unbroken string — a
   pasted URL in a comment — would push the column wider than its track and
   take the card with it. min-width:0 lets the track hold its size. */
.comment__body { min-width: 0; }

.comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.comment__name { font-size: 15.5px; font-weight: 700; color: var(--purple); }
.comment__badge {
  padding: 3px 10px;
  border-radius: 999px 999px 999px 4px;
  background: rgb(187 167 96 / .16);
  font-size: 11.5px;
  font-weight: 500;
  color: #7a6a2f;                      /* gold, darkened to clear 4.5:1 on its own tint */
}
/* --grey-400 is the system's metadata grey, but it measures 2.85:1 on white
   and this is 12.5px type — below the 4.5:1 the design system itself sets.
   --grey-600 is the next token up at 5.74:1, so the step down from the name
   is carried by size and weight instead of by a colour that can't be read. */
.comment__date { font-size: 12.5px; font-weight: 300; color: var(--grey-600); }

.comment__text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.95;
  color: var(--grey-600);
}

.comment__reply {
  margin-top: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold);
  transition: color .2s var(--ease);
}
.comment__reply:hover { color: var(--purple); }

/* The reply thread hangs off the parent's second column so it lines up under
   the comment it answers, not under the avatar. */
.comment__replies {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.comment--reply {
  padding: 20px 22px;
  border-color: transparent;
  border-radius: 12px 12px 26px 12px;
  background: #faf9fc;
}

/* -- comment form ---------------------------------------------------------- */
.comment-form {
  padding: 40px 42px 38px;
  border: 1px solid #ece8f2;
  border-radius: 16px 16px 44px 16px;
  background: #fff;
  box-shadow: 0 30px 70px -46px rgba(30, 16, 60, .28);
}
.comment-form__title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--purple);
}
.comment-form__lead {
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--grey-600);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}
.field { display: block; }
.field + .field { margin-top: 20px; }
.field-grid .field { margin-top: 0; }

.field__label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--purple);
}
.field__label em { color: var(--gold); font-style: normal; }

.field__input {
  width: 100%;
  padding: 13px 16px;
  border: 1.4px solid #e5e0eb;
  border-radius: 10px;
  background: #fbfafd;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input::placeholder { color: var(--grey-400); }
.field__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(187 167 96 / .18);
}
/* The ring above is enough for a pointer, but a keyboard user needs a real
   outline — the global :focus-visible rule in style.css is restored here
   because the :focus rule above would otherwise have removed it. */
.field__input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.field__textarea { resize: vertical; min-height: 138px; }

.comment-form__submit {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 15px 30px;
  border-radius: 999px 999px 999px 10px;
  background: var(--gold);
  color: var(--purple);
  font-size: 16px;
  font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.comment-form__submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.comment-form__submit:hover { background: var(--purple); color: #fff; }
.comment-form__submit:hover svg { transform: translate(2px, -2px); }
.comment-form__submit:active { transform: scale(.97); }

.comment-form__note {
  margin-top: 16px;
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 500;
  color: var(--purple);
}
.comment-form__note.is-error { color: #b0304a; }

/* --------------------------------------------------------------------------
   10. Footer row
   .site-footer__inner is markup this page shares with the others but which
   style.css never gives a layout — the footer there relies on its children's
   own margins. Stated here so the row is explicit rather than incidental.
   -------------------------------------------------------------------------- */
.site-footer__inner { display: block; }

/* --------------------------------------------------------------------------
   11. Responsive
   Same breakpoints as style.css — no new ones introduced.
   -------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  /* The headline needs no step here: clamp(28px, 3.3vw, 52px) is already
     tracking the viewport, so it comes down on its own. */
  
}


@media (max-width: 1200px) {
  
  
  
  .prose { font-size: 16.5px; }
  .sub { font-size: 24px; }
  
}


@media (max-width: 1024px) {
  /* Matches the home hero's pattern at this breakpoint (style.css ≤1024:
     170px / .55) so every page reads as one system. */
  
  
  
  
  
  
  /* Nothing sits opposite the headline at this width for the credit to
     balance against, and over a narrow photo it crowds the corner. */
  

  /* The fact bar stops fitting on one line: the author keeps the top row and
     the facts wrap beneath, which is the order they'd be read in anyway. */
  
  
  
  
  
  

  /* One column: a 288px rail alongside a 16px measure leaves neither enough.
     The most-read list drops under the article, where it reads as a proper
     "what to read next" block — and it stops being sticky, because there is
     nothing left for it to stick beside. */
  
  
  .prose { max-width: none; }
  /* Nothing left to stick beside once the column is gone. */
  .rail__inner { position: static; }

  /* The rail is full width once the column stacks, so the five rows can run
     two abreast instead of down a single narrow strip. */
  .brandlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .brandlist__item + .brandlist__item { border-top: 0; }
  .brandlist__item { border-top: 1px solid #f1eef6; }
  .brandlist__item:nth-child(-n+2) { border-top: 0; }
  .brandlist__link,
  .brandlist__item:first-child .brandlist__link,
  .brandlist__item:last-child .brandlist__link { padding-block: 12px; }

  .adjacent { padding-top: 64px; padding-bottom: 72px; }
  .comments { padding-bottom: 80px; }
  .comment-form { padding: 32px 30px 30px; }
}


@media (max-width: 620px) {
  /* Same pattern size as the home hero on mobile (style.css ≤620: 100px / .4).
     The hero is measured in vh here rather than px: on a phone the photograph
     has to leave room for the headline over it, and 62vh does that on a tall
     screen and a short one alike. */
  
  
  /* Weighted harder at the foot: on a narrow crop the headline covers much
     more of the frame, so it needs more ground under it. */
  

  .breadcrumb { font-size: 12.5px; gap: 5px; }
  .breadcrumb__sep { width: 13px; height: 13px; }
  
  
  
  
  

  /* Stacked, each row on the reading edge. The dividers go with the row
     layout — a vertical rule between things sitting one above the other
     divides nothing. */
  
  
  
  
  
  
  
  
  

  
  

  /* Long-form on a phone: the size comes down but the leading stays open —
     a narrow measure needs the line spacing more, not less. */
  .prose { font-size: 16px; line-height: 2; }
  .prose__lead { font-size: 17.5px; }
  .prose p { margin-bottom: 22px; }

  .sub { font-size: 20px; margin: 40px 0 18px; gap: 10px; }
  .sub__mark { width: 18px; height: 18px; }
  /* The trailing rule is dropped: on a narrow column the heading uses the
     whole width, so the rule would be a 24px stub rather than a run. */
  .sub::after { display: none; }
  .sub > span { max-width: none; }

  
  

  
  

  
  
  

  .rail__inner { padding: 22px 18px 20px; border-radius: 14px 14px 32px 14px; }
  .rail__title { font-size: 16.5px; margin-bottom: 18px; }
  .popular__link { grid-template-columns: auto 58px minmax(0, 1fr); gap: 10px; padding-block: 12px; }
  .popular__thumb { width: 58px; height: 46px; }
  .popular__title { font-size: 13.5px; }

  .rail__block + .rail__block { margin-top: 24px; padding-top: 22px; }
  
  
  

  /* Stacked rather than side by side: two cards at ~140px each would clip
     both titles to a single line and lose the point of showing them. */
  .adjacent { grid-template-columns: 1fr; gap: 14px; padding-top: 44px; padding-bottom: 52px; }
  .adjacent__card { padding: 20px 20px 22px; }
  .adjacent__title { font-size: 15.5px; }

  /* Back to a single column on a phone: two abreast leaves the description
     about 90px, which is narrower than the line needs to be worth printing. */
  .brandlist { display: flex; }
  .brandlist__item:nth-child(-n+2) { border-top: 1px solid #f1eef6; }
  .brandlist__item:first-child { border-top: 0; }
  .brandlist__link { grid-template-columns: 66px minmax(0, 1fr); gap: 13px; }
  .brandlist__logo { width: 66px; height: 42px; }

  .comments { padding-bottom: 64px; }
  .comment { padding: 20px 18px; gap: 12px; grid-template-columns: auto minmax(0, 1fr); }
  .comment__avatar { width: 40px; height: 40px; font-size: 16px; }
  .comment__text { font-size: 14.5px; }
  /* At this width the indent costs more than the nesting communicates, so
     the reply lines up with its parent and the avatar carries the relation. */
  .comment__replies { grid-column: 1 / -1; margin-top: 16px; }
  .comment--reply { padding: 16px 16px; }

  .comment-form { padding: 26px 20px 24px; border-radius: 14px 14px 34px 14px; }
  .comment-form__title { font-size: 19px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  /* 16px is the threshold below which iOS Safari auto-zooms a focused field —
     the one size here that is not a visual choice. */
  .field__input { font-size: 16px; }
  .comment-form__submit { width: 100%; justify-content: center; }
}