@charset "utf-8";

/* =========================================================
   Florica Column — shared stylesheet
   Desktop metrics follow the measured FigJam page 5 renders
   (node 217:200 and 217:293, 1441 px wide).
   ========================================================= */

:root {
  --cream: #fffdf8;
  --white: #ffffff;
  --blue-gray: #7e869b;
  --dark-blue-gray: #596273;
  --grad-blue: #75c1dc;
  --grad-peach: #e97d45;
  /* Axis and stops read off the baseline pill by projecting each sampled pixel
     onto the gradient axis: the reference ramp runs 117deg (down-right), holds
     peach to 47% and keeps deepening into a saturated blue at the far
     corner rather than fading out. */
  --accent-gradient: linear-gradient(117deg, #f8905a 0%, #f8905a 47%, #f3ae88 57.8%, #edc4ab 66.5%, #d4cac0 73.7%, #b5d0d6 81%, #a1d3e6 87.5%, #8ccae1 93%, #80c5df 100%);
  /* Stops copied from the Figma rule vectors (article-icon-01/04.svg): the ramp
     passes through a pale wash near 40 % instead of the muddy mid-grey a plain
     two-stop blue-to-peach gradient produces. */
  --rule-gradient: linear-gradient(180deg, #75c1dc 0%, #a1d4e7 23.5%, #cde9f0 40.2%, #efc5ac 66.8%, #f8915b 100%);
  --rule-gradient-soft: linear-gradient(180deg, #64d5ff 0%, #64d5ff 45%, #f5b597 95%);

  /* The reference renders every text run at rgb(112,120,138), which is only
     4.43:1 on white. #6c7488 is the closest tone that still clears WCAG AA
     for body copy (4.68:1 on white, 4.62:1 on the cream page). */
  --ink: #6c7488;
  --ink-strong: #6c7488;
  --ink-muted: #6c7488;
  --hairline: #e8e3d9;
  --box-line: #ececea;
  --card-shadow: 0 12px 26px -18px rgba(84, 95, 122, 0.5);
  --card-shadow-hover: 0 20px 38px -20px rgba(84, 95, 122, 0.6);
  /* Warm, wide glow under the article panels (TOC, product, inquiry): the
     cream around them drops by about (3, 5, 8) levels and fades over 30 px. */
  --panel-shadow: 0 10px 30px -4px rgba(150, 110, 50, 0.085);

  /* Height of the sticky site header from site-shell.css, border included. */
  --header-h: 68px;
  --container: 1274px;
  --radius: 6px;

  --font-jp: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Jost", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}

@media (max-width: 768px) { :root { --header-h: 61px; } }
@media (max-width: 650px) { :root { --header-h: 66px; } }

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* site.js filters cards and shows messages with the hidden attribute; the
   display rules below (.card is flex, .card-grid is grid) must not undo it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 1024px) { body { font-size: 17px; } }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid #ebe9e4; }

:focus-visible {
  outline: 2px solid var(--grad-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.phrase { display: inline-block; }

/* The reference render applies full Japanese kinsoku, so characters such as
   「ー」 and the small kana never begin a line. */
body { line-break: strict; }

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  padding: 12px 20px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--card-shadow);
  font-size: 13px;
}
.skip-link:focus { transform: translateY(0); }

/* =========================================================
   Landing hero
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

/* The pastel field, the flowing waves and the line-art silhouette are one
   exported Figma layer (index-07.png), so they are placed as a single image
   instead of being rebuilt in CSS. */
.hero__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__art img {
  width: 100%;
  /* The export includes transparent canvas below the wave. Fit the painted
     portion to the hero so it does not end halfway through the mobile copy. */
  height: 148%;
  object-fit: cover;
  object-position: 50% 0;
}
.hero::after {
  /* The source already provides the curved transparent edge. */
  display: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-block: 58px 74px;
  /* At the wide end of tablet layout the image is width-constrained. Keep
     enough room for its painted lower edge as well as for the copy. */
  min-height: 49vw;
}
.hero__copy {
  position: relative;
  max-width: 680px;
  text-align: center;
}
.hero__eyebrow {
  font-family: var(--font-en);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.hero__title {
  margin-top: 26px;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.11em;
  color: #6b7486;
}
.hero__lead {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
}

@media (max-width: 767px) {
  /* Use the clear right-hand field on phones; a centred crop leaves a
     disconnected fragment of the line-art dress behind the paragraph. */
  .hero__art img { object-position: 100% 0; }
}

@media (min-width: 768px) {
  .hero__inner { padding-block: 84px 110px; }
  .hero__eyebrow { font-size: 22px; }
  .hero__title { font-size: 34px; margin-top: 40px; }
  .hero__lead { font-size: 17px; margin-top: 22px; }
}

@media (min-width: 1024px) {
  /* Measured against artifacts/baseline/figma-index-1441.png: the artwork is
     drawn at 1540 px for a 1441 px viewport, with its origin at (-101, -135)
     relative to the top of the hero band. Percentage margins resolve against
     the container width, so the placement stays proportional. */
  .hero__art img {
    position: absolute;
    left: -7.009%;
    top: 0;
    width: 106.8%;
    max-width: none;
    height: auto;
    margin-top: -9.299%;
    object-fit: fill;
  }
  .hero::after { display: none; }
  /* Thin keyline dropping from the header into the hero, 2 px wide and 88 px
     long, 21.5 px right of the page centre (x 742–743 in the reference). */
  .hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: calc(50% + 21.5px);
    width: 2px;
    height: 88px;
    background: rgba(126, 134, 155, 0.3);
    pointer-events: none;
  }
  .hero__inner {
    padding-block: 120px 172px;
    /* Keep the approved 1441px composition, including the lower wave, when
       the artwork grows. A fixed-height frame cuts it off on wide screens. */
    min-height: max(592.046875px, 41.085835vw);
  }
  /* The three copy blocks are placed individually on the FigJam board, so
     their optical centres do not share one axis. The padding values below are
     the measured offsets from the centre of the copy column. */
  .hero__copy { margin-left: 60px; }
  .hero__eyebrow { font-size: 27px; letter-spacing: 0.19em; padding-right: 13px; }
  .hero__title { font-size: 40px; margin-top: 51px; padding-left: 16px; }
  .hero__lead { font-size: 20px; margin-top: 26px; letter-spacing: 0.1em; padding-right: 13px; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  /* Follow the artwork's height below the reference width too. The copy
     keeps its readable size while its surrounding padding contracts. */
  .hero__inner {
    min-height: 41.085835vw;
    padding-top: 8.32755vw;
    padding-bottom: 32px;
  }
  .hero::before { height: 6.10687vw; }
}

/* =========================================================
   Category box
   ========================================================= */
.category-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Gradient keyline with rounded corners: border-image cannot follow a
     radius, so the ramp is painted on the border box under a white fill. */
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(90deg, #64d5fe 0%, #ffb392 100%) border-box;
}

.category-box__label {
  padding: 14px 20px 0;
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.chip-list {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
}
.chip-list::-webkit-scrollbar { display: none; }

/* Phone widths keep the horizontal strip, so the right edge needs to say that
   more tabs exist. The hint disappears once the strip is scrolled to its end. */
.category-box { position: relative; }
.category-box__hint {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 76px;
  height: 48px;
  pointer-events: none;
  border-radius: 0 0 7px 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 62%);
  opacity: 1;
  transition: opacity 0.2s ease;
}
.category-box__hint::after {
  content: "SCROLL  ›";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #8d94a2;
  white-space: nowrap;
}
.category-box[data-scroll="end"] .category-box__hint,
.category-box[data-scroll="none"] .category-box__hint { opacity: 0; }

.chip {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  color: var(--dark-blue-gray);
  font-size: 14px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color 0.2s ease;
}
.chip:hover { color: var(--grad-peach); }
.chip + .chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: #b7bbc4;
}
.chip[aria-pressed="true"] { color: var(--grad-peach); }
.chip[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--grad-peach) 0%, var(--grad-blue) 100%);
}

@media (min-width: 1024px) {
  .category-box__hint { display: none; }
  /* Reference band: x 116–1035, y 725–816, 8 px corners, and a soft drop
     shadow read off the cream around it (≈19 levels darker at the bottom
     edge, fading out 35 px below, ≈3 levels above). */
  .category-box {
    flex-direction: row;
    align-items: stretch;
    height: 92px;
    margin-inline: 3px 7px;
    box-shadow: 3px 16px 36px rgba(0, 0, 0, 0.092);
  }
  .category-box__label {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 168.4px;
    padding: 0 0 0 41px;
    font-size: 19px;
    font-weight: 400;
    transform: translateY(2px);
  }
  /* Tab labels sit 4.5 px below the band's centre line and the 33 px
     separators 6.5 px below it. */
  .chip { min-height: 100%; padding: 9px 30.5px 0; font-size: 14px; }
  .chip + .chip::before { top: calc(50% + 6px); height: 33px; }
  /* The reference marks the active tab with a short 37px swatch centred under
     the label, not a full-width rule. */
  .chip[aria-pressed="true"]::after {
    left: 50%;
    right: auto;
    width: 37px;
    margin-left: 6px;
    transform: translateX(-50%);
    bottom: -1px;
    height: 6px;
    /* Same Figma ramp as the rules, blue on the left, running slightly
       downhill so the top row reads paler. */
    background: linear-gradient(105deg, #75c1dc 0%, #a1d4e7 15%, #b9cfd2 32%, #d8c4b4 48%, #eaa982 62%, #f39a6a 85%, #ee9a6c 100%);
  }
}

/* =========================================================
   Column layout
   ========================================================= */
.page-main { display: block; }

.column-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-block: 40px 64px;
}
.column-main { min-width: 0; }
.column-main .card-grid,
.column-main .empty-state { margin-top: 28px; }

@media (min-width: 1024px) {
  /* The reference renders are not centred: the content band runs 113..1342 on
     the list page and 122..1342 on the article page. */
  .column-layout {
    grid-template-columns: minmax(0, 1fr) 257px;
    gap: 42px;
    padding-block: 54px 178px;
    padding-left: 29px;
    padding-right: 16px;
  }
  .column-layout--list { padding-block: 64px 180px; }
  /* Reference article column: panels run x 122–1051 (930 px), 32.5 px clear
     of the sidebar frame. */
  .column-layout--article { padding-block: 88px 262px; padding-left: 38.5px; gap: 32.5px; }
  .column-main .card-grid,
  .column-main .empty-state { margin-top: 54px; }
}

/* ---------- card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 15px; } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  /* Reference cards cast a broad neutral shadow: ≈26 levels darker right
     under the bottom edge, still ≈6 at 30 px, ≈3 above the top edge, and
     heavier on the right side than the left. */
  box-shadow: 6px 16px 24px -4px rgba(0, 0, 0, 0.155);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(0, 0, 0, 0.15); }
.card:focus-within { box-shadow: 0 22px 40px rgba(0, 0, 0, 0.15); }

.card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #f5f2ec;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card:hover .card__media img { transform: scale(1.04); }
/* The FigJam artboard softens every photograph. A least-squares fit of the
   reference render against the raw source gives out = 0.70*in + 68, which is a
   30% veil of #e3e3e3 over the frame. */
.card__media::after,
.rank-item__media::after,
.article-hero__media::after,
.product-rec__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(227, 227, 227, 0.3);
  pointer-events: none;
}
.rank-item__media,
.article-body figure,
.product-rec__media { position: relative; }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 26px;
}
.card__title {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 0.03em;
  color: var(--ink-strong);
  min-height: calc(1.66em * 3);
}
.card__title a { display: block; min-height: 44px; }
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 16px;
}

@media (min-width: 1024px) {
  /* The reference centres the title + meta group in the leftover card
     height, so a two-line title rides up rather than sitting flush. */
  .card__body { padding: 19px 33px 32px; justify-content: center; }
  .card__title {
    font-size: 16px;
    line-height: 28px;
    /* The reference lets a two-line title sit directly above its meta row
       instead of reserving a third line, so the pill rides up with it. */
    min-height: 0;
    letter-spacing: 0.07em;
    /* The reference sets each wrapped line flush to both edges of the card. */
    text-align: justify;
    /* auto spreads the space between kana and kanji only; inter-character
       would also pull apart the Latin letters of "COSMOS". */
    text-justify: auto;
    font-weight: 500;
  }
  /* The Figma cards wrap on the natural line-break opportunities. The phrase
     units only exist to protect narrow phones from orphaned characters. */
  .card__title .phrase { display: inline; }
  .card__meta { margin-top: 0; padding-top: 29px; gap: 8px 11px; }
  /* The reference sets the card date a size up from the sidebar dates. */
  .card__meta .date { font-size: 15px; letter-spacing: 0; line-height: 25px; }
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  min-height: 24px;
  /* 13 px bold labels with 14 px side padding: 「インタビュー」 grows the
     chip to 103 px while two-character labels keep the 90 px minimum. */
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.date {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.empty-state {
  padding: 56px 24px;
  border: 1px dashed #ded8cc;
  border-radius: var(--radius);
  text-align: center;
  font-size: 14px;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.6);
}

/* ---------- sidebar ---------- */
.sidebar__box {
  border: 1px solid transparent;
  /* The reference draws the sidebar frame with a vertical blue-to-peach rule. */
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(180deg, #addbeb 0%, #a6d7e9 23%, #aedae9 49%, #ded5cb 75%, #f9d2bd 95%, #fed9c6 100%) border-box;
  padding: 26px 22px 34px;
}
@media (min-width: 1024px) {
  /* Frame runs x 1085–1341, y 725–1490 in the reference. The grid puts the
     column at x 1084.5, which smears both 1 px edges; nudge it onto the
     pixel grid. */
  .sidebar { position: relative; left: 0.5px; }
  .sidebar__box { padding: 26px 22px 98px 30px; }
}

.sidebar__section + .sidebar__section { margin-top: 34px; }
@media (min-width: 1024px) {
  /* Measured from the dashed rule that closes the ranking list. */
  .sidebar__section + .sidebar__section { margin-top: 26px; }
}

.sidebar__title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 21px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-strong);
}
.sidebar__title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 20px;
  background: var(--rule-gradient-soft);
}
/* Reference heading: 18.2 px glyph pitch at 16 px, with the gradient bar
   hanging 2 px outside the text column. */
@media (min-width: 1024px) {
  .sidebar__title { font-size: 16px; letter-spacing: 0.1475em; margin-left: -2px; }
  /* 「カテゴリー」 runs 3 px wider than the ranking heading's tracking gives. */
  #tag-title { letter-spacing: 0.185em; }
}

.rank-list { display: block; }
/* Every ranked story, the last one included, closes with a dashed grey rule
   (2.3 px dashes on a 7.33 px period, rgb(180,180,180)). */
.rank-item {
  padding-bottom: 16px;
  background: repeating-linear-gradient(90deg, #b4b4b4 0 2.3px, transparent 2.3px 7.33px) left bottom / 100% 1px no-repeat;
}
.rank-item + .rank-item { margin-top: 20px; }
.rank-item a {
  position: relative;
  display: grid;
  grid-template-columns: 77px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  min-height: 44px;
  transition: opacity 0.2s ease;
}
.rank-item a:hover { opacity: 0.75; }
.rank-item__media {
  aspect-ratio: 77 / 82;
  overflow: hidden;
  background: #f5f2ec;
}
.rank-item__media img { width: 100%; height: 100%; object-fit: cover; }
.rank-item__body { display: block; line-height: 1; }
.rank-item__title {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink-strong);
}
.pill-outline {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 1px 10px;
  /* The reference outlines this chip with the same peach-to-blue ramp used by
     the rules, not a flat peach keyline. */
  border: 1px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(118deg, #f8905a 0%, #f8905a 50%, #f59d6f 55%, #b3cfd6 76%, #9bd1e5 86%, #84c7df 95%) border-box;
  /* Measured from the baseline chip: 73px of advance for the seven-character
     label inside a 95px frame, i.e. 10.43px type with no tracking. */
  font-size: 10.43px;
  line-height: 16px;
  letter-spacing: 0;
  color: #f39462;
  font-weight: 500;
  white-space: nowrap;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 11px 10px; }
.tag-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  /* The reference tags are neutral grey, not the blue-grey used elsewhere. */
  border: 1px solid #b4b4b4;
  border-radius: 4px;
  background: var(--white);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #717171;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.tag-list a:hover { border-color: var(--grad-peach); color: var(--ink-strong); }
@media (min-width: 1024px) {
  /* Measured tag chips in the reference: 46 px for 「商品」 and 106 px for
     「会社の取り組み」, i.e. 12 px type with a 10 px inline padding. */
  /* The reference wraps 「イベントレポート」 onto a row of its own, so the tag
     rail is narrower than the ranked-story column beside it. */
  /* Collapses against the heading's 21px, so the reference's extra five
     pixels of air above the tag rail have to be named here. */
  .tag-list { margin-top: 25.5px; gap: 10px; max-width: 196px; }
  .tag-list a { min-height: 35px; padding: 0 9px; font-size: 12.5px; letter-spacing: -0.01em; color: #666666; }
}

/* =========================================================
   Article page
   ========================================================= */
.article-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--white);
}
.article-hero__text {
  position: relative;
  padding: 44px 24px 44px 40px;
  /* Exported Figma layer: the pale bokeh field behind the article title. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.62) 100%),
    url("../images/figma-source/article-15.jpg") 75% 100% / cover no-repeat,
    #f6f6f8;
}
.article-hero__text::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 44px;
  bottom: 44px;
  width: 8px;
  background: var(--rule-gradient);
}
.article-hero__title {
  max-width: 430px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.578;
  letter-spacing: 0.02em;
  color: #6b7486;
}
.article-hero__meta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.badge-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 30px;
  padding: 0 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(90deg, #9ad0e5 0%, #b5ddec 8%, #c5e5f0 16%, #d9eef3 24%, #e6e8e5 33%, #f1ded0 41%, #eed6c9 49%, #e2cfc4 57%, #eac6b2 65%, #f5b999 74%, #f8b592 97%, #f7a577 100%) border-box;
  font-size: 13px;
  letter-spacing: 0.08em;
  /* Reference label colour. At 2.3:1 on white it is below WCAG AA; kept to
     match the board and flagged in the QA report for a decision. */
  color: #f89a68;
}
.article-hero__media { position: relative; overflow: hidden; background: #f4f1ea; }
.article-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
  .article-hero {
    position: relative;
    isolation: isolate;
    grid-template-columns: 40.7fr 59.3fr;
    align-items: stretch;
    background: var(--white);
  }
  /* One continuous background behind both columns. The approved reference
     uses the source mirrored horizontally: its bright diagonal runs from
     upper left toward lower right. Fit the crop against unobscured reference
     pixels, then scale its position and size together on wide screens. */
  .article-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(270deg, transparent 40%, #fff 70%),
      linear-gradient(rgba(255, 255, 255, 0.517), rgba(255, 255, 255, 0.517)),
      url("../images/figma-source/article-15.jpg") right min(-162px, -11.2422vw) top min(-100px, -6.9396vw) / max(1245px, 86.3983vw) auto no-repeat,
      var(--white);
    transform: scaleX(-1);
  }
  .article-hero__text,
  .article-hero__media {
    z-index: 1;
  }
  .article-hero__text {
    padding: 293px 40px 0 133px;
    /* The hero owns the background; a second crop here creates a seam. */
    background: transparent;
  }
  .article-hero__text::before {
    left: 90px;
    top: 294px;
    bottom: auto;
    height: 223px;
  }
  /* Reference glyphs are 30 px on a 32.86 px advance and a 50 px line. */
  .article-hero__title { max-width: 400px; font-size: 30px; line-height: 50px; font-weight: 500; letter-spacing: 0.095em; position: relative; left: 1px; top: 1px; }
  /* Desktop has room to wrap on natural character boundaries, as the
     reference does; the phrase units only protect narrow phones. */
  .article-hero__title .phrase { display: inline; }
  .article-hero__meta { margin-top: 41px; gap: 30px; }
  /* Reference badge: 147 × 30 with 3 px corners, keyline sampled along its
     top edge, label sitting 2.5 px left of centre. */
  .article-hero__meta .badge-outline {
    min-width: 147px;
    margin-left: 1px;
    padding: 0 21px 0 11px;
    border-radius: 3px;
    /* The board's keyline is strongest on rows 555 and 584 and column 134. */
    position: relative;
    top: 2px;
  }
  .article-hero__meta .date { font-size: 12.5px; letter-spacing: 0; }
  /* Measured frame in the reference render: x587..1374, y115..735, with
     article-06.png drawn at 995x649 from (-104, -28). */
  .article-hero__media {
    align-self: start;
    background: transparent;
    margin: 46px 67px 46px 1px;
    padding: 0;
    height: 621px;
  }
  .article-hero__media img {
    position: absolute;
    left: -104px;
    top: -28px;
    /* Keep the measured 1441px crop, then grow with wider frames so the
       source never ends before the media viewport's right edge. */
    width: max(995px, calc(100% + 104px));
    max-width: none;
    height: 649px;
    object-fit: cover;
    object-position: left center;
  }
}

@media (min-width: 1442px) {
  .article-hero {
    --hero-height-increase-half: calc((59.3vw - 854.513px) * 0.394785);
  }
  .article-hero__text {
    padding-top: calc(293px + var(--hero-height-increase-half));
  }
  .article-hero__text::before {
    top: calc(294px + var(--hero-height-increase-half));
  }
  /* Scale the complete reference crop with the frame, including its height
     and offsets. Growing only image width makes object-fit cut off products. */
  .article-hero__media {
    height: auto;
    aspect-ratio: 786.513 / 621;
  }
  .article-hero__media img {
    width: 126.5078%;
    height: auto;
    left: -13.223%;
    top: -4.5089%;
  }
}

/* ---------- "this article covers" box ---------- */
.toc {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 24px;
  /* The reference panel has no drawn frame: a white fill whose edge reads as
     a 1 px rgb(243,243,243) step against the warm shadow around it. */
  border: 1px solid #f3f3f3;
  background: var(--white);
  box-shadow: var(--panel-shadow);
}
.toc__title {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.toc ol { display: grid; gap: 13px; }
.toc li { position: relative; padding-left: 20px; }
.toc li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--ink-strong);
}
.toc a {
  display: block;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-strong);
}
.toc a:hover { color: var(--grad-peach); }

@media (min-width: 1024px) {
  .toc {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 46px 30px 47px 93px;
    /* The panel overhangs the text column by 3 px on the right (x 122–1054). */
    margin-right: -3px;
  }
  .toc__title {
    flex: 0 0 265px;
    position: relative;
    left: -2px;
    top: 2px;
    padding-bottom: 4px;
    font-size: 19px;
    letter-spacing: 0.21em;
  }
  .toc ol { flex: 1 1 auto; gap: 13px; position: relative; left: -1px; }
  .toc li { padding-left: 22px; }
  .toc a {
    min-height: 0;
    font-size: 19px;
    line-height: 27px;
    letter-spacing: 0.08em;
  }
}

/* ---------- article body ---------- */
/* The reference lays running copy down with a heavier rasteriser than Chrome's
   antialiased mode; the platform default matches its stroke weight here.
   Display sizes stay on the lighter smoothing, where Chrome already runs
   heavier than the board. */
.article-body p { -webkit-font-smoothing: auto; }

.article-body > h2 {
  position: relative;
  margin-top: 56px;
  padding-left: 26px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: #6b7486;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.article-body > h2::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 6px;
  height: calc(100% - 4px);
  background: var(--rule-gradient);
}
.article-body > h2:first-child { margin-top: 44px; }

.article-body > h3 {
  margin-top: 48px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--ink-strong);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.article-body > h2 + h3 { margin-top: 52px; }
.article-body > h3::after {
  content: "";
  display: block;
  width: 37px;
  height: 1px;
  margin-top: 27px;
  /* article-icon-02.svg in the Figma export: a plain black 1 px line. */
  background: #000;
}

.article-body > p {
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.article-body > p + p { margin-top: 24px; }

.article-body figure { margin-top: 26px; }
.article-body figure img {
  width: 830px;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 830 / 558;
  object-fit: cover;
}

.article-body hr { margin-top: 56px; }

@media (min-width: 1024px) {
  .article-body > h2 {
    margin-top: 100px;
    padding-left: 47px;
    padding-bottom: 2px;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0.1468em;
  }
  .article-body > h2::before { left: 2px; top: 0; height: 100%; width: 9px; }
  .article-body > h2:first-child { margin-top: 70px; }
  .article-body > h3 { margin-top: 77px; font-size: 25px; letter-spacing: 0.145em; }
  .article-body > h2 + h3 { margin-top: 87px; }
  .article-body > h2:not(:first-child) + p { margin-top: 39px; }
  .article-body > p {
    max-width: 830px;
    margin-top: 40px;
    margin-left: 51.5px;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.05em;
  }
  .article-body > h3 { margin-left: 51.5px; }
  .article-body figure {
    position: relative;
    width: 830px;
    height: 559px;
    margin-left: 49.5px;
    overflow: hidden;
  }
  .article-body figure img {
    position: absolute;
    left: -100px;
    top: -320px;
    width: 930px;
    max-width: none;
    height: 1392px;
    margin: 0;
    aspect-ratio: auto;
    object-fit: fill;
  }
  .article-body > p + p { margin-top: 30px; }
  .article-body > h3 + p { margin-top: 20px; }
  .article-body figure { margin-top: 30px; }
  .article-body figure + p { margin-top: 20px; }
  /* The reference rule sits 12px lower and reads a shade cooler than the
     page hairline. */
  .article-body hr { margin-top: 80px; border-top-color: #cbcdd2; }
}

/* ---------- product recommendation ---------- */
.product-rec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 30px;
  padding: 24px;
  background: var(--white);
  box-shadow: var(--panel-shadow);
}
.product-rec__media {
  position: relative;
  aspect-ratio: 209 / 198;
  overflow: hidden;
  background: #f7f5f0;
}
.product-rec__media img { width: 100%; height: 100%; object-fit: cover; }
.product-rec__label {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #333333;
}
.product-rec__name {
  margin-top: 16px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.product-rec__size {
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.product-rec__action { margin-top: 20px; }

@media (min-width: 1024px) {
  .product-rec {
    grid-template-columns: 209px minmax(0, 1fr);
    gap: 61px;
    margin-top: 49px;
    padding: 40px 0 39px 80px;
    align-items: start;
  }
  .product-rec__body { padding-top: 8px; }
  /* Measured frame in the reference: the source is drawn 306px wide from
     x = -48 inside the 210x198 crop. */
  .product-rec__media img {
    position: absolute;
    left: -21.905%;
    top: 0;
    width: 144.286%;
    max-width: none;
    height: 100%;
    object-fit: fill;
  }
  .product-rec__label { font-size: 26px; letter-spacing: 0.004em; position: relative; left: 1px; }
  .product-rec__name { margin-top: 28px; font-size: 15px; letter-spacing: 0; }
  .product-rec__size { margin-top: 4px; font-size: 15px; letter-spacing: 0; }
  .product-rec__action {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-right: 81px;
  }

  /* Figma exports retain the source image beyond each clipped frame. These
     measured crops reproduce those frames without baking new derivative files.
     Each crop belongs to one sample photograph and is chosen on the <img> with
     data-crop, never by the card's position, so a card added above the samples
     does not hand its crop to the next picture. A card without data-crop keeps
     the rule above: the photo covers the 3:2 frame, centred, and
     style="object-position: X% Y%" on the <img> moves the visible part. */
  .card-grid .card__media img[data-crop] {
    position: absolute;
    max-width: none;
    height: auto;
    object-fit: fill;
  }
  .card-grid .card__media img[data-crop="figma-scrub"] {
    width: 100.18%;
    left: 0;
    top: -41.79%;
  }
  .card-grid .card__media img[data-crop="figma-box"] {
    width: 108.13%;
    left: -4.02%;
    top: -7.2%;
  }
  .card-grid .card__media img[data-crop="figma-window"] {
    width: 100%;
    left: 0;
    top: 0;
  }
  .card-grid .card__media img[data-crop="figma-stick"] {
    width: 99.333%;
    left: 0.333%;
    top: -70.85%;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.button__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.button__dot::before {
  content: "";
  border-left: 5px solid var(--white);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  margin-left: 2px;
}
.button--outline {
  border: 1px solid #aab0bf;
  color: var(--blue-gray);
  background: var(--white);
}
.button--outline:hover { background: #f4f5f8; }
.button--filled {
  background: var(--blue-gray);
  color: var(--white);
}
.button--filled .button__dot::before { border-left-color: var(--blue-gray); }
.button--filled:hover { background: #6d7689; }

@media (min-width: 1024px) {
  .button { min-height: 52px; padding: 0 34px; font-size: 15px; }
  /* Reference product button: 14 px label with 1 px tracking, 14 px dot 10 px
     after it, content sitting right of centre, and a darker keyline. */
  .button--outline {
    min-width: 215px;
    padding: 0 46px 0 56px;
    gap: 10px;
    border-color: #9399a7;
    font-size: 14px;
    letter-spacing: 0.07em;
  }
  .button--outline .button__dot { width: 13px; height: 13px; transform: translate(-1px, 1.5px); }
  .button--outline .button__dot::before { border-left-width: 4px; border-top-width: 3px; border-bottom-width: 3px; margin-left: 1.5px; }
  /* Reference inquiry button: 218 × 52 at x 478–695, label 40 px in from the
     left, a 15 px play dot 10 px after it, and a darker 1 px lower rim. */
  .button--filled {
    min-width: 218px;
    min-height: 52px;
    padding: 0 38px;
    gap: 10px;
    box-shadow: inset 0 -1px 0 #737c93;
    font-size: 14.5px;
    letter-spacing: 0;
  }
  .button--filled .button__dot { width: 15px; height: 15px; }
}

@media (max-width: 639px) {
  .button { width: 100%; }
}

/* ---------- inquiry CTA ---------- */
.inquiry-cta {
  margin-top: 32px;
  padding: 44px 24px;
  border-radius: 10px;
  text-align: center;
  background: #f3f3f2;
}
.inquiry-cta h2 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  /* The reference sets these three blocks in near-black rather than the
     blue-grey used for running copy. */
  color: #333333;
}
.inquiry-cta .button { margin-top: 24px; }

@media (min-width: 1024px) {
  /* Reference panel: y 3248–3525 (278 px), a 1 px grey frame on all four
     sides with 8 px corners, and the same warm glow as the other panels. */
  .inquiry-cta {
    margin-top: 40px;
    border: 1px solid #c9c9ce;
    border-radius: 8px;
    box-shadow: var(--panel-shadow);
    padding: 76px 40px 71px;
  }
  .inquiry-cta h2 { font-size: 30px; letter-spacing: 0.1497em; position: relative; left: 2px; }
  .inquiry-cta .button { margin-top: 34px; }
}

/* ---------- prev / list / next ---------- */
.article-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}
@media (min-width: 1024px) { .article-nav { position: relative; left: 0; } }
.article-nav a {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 46px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #333333;
}
.article-nav a:hover { color: var(--grad-peach); }
.article-nav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--blue-gray);
  flex: 0 0 auto;
}
.article-nav__prev .article-nav__arrow { border-radius: 23px 0 0 23px; }
.article-nav__next .article-nav__arrow { border-radius: 0 23px 23px 0; }
.article-nav__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
}
.article-nav__dot::before {
  content: "";
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}
.article-nav__prev .article-nav__dot::before { border-right: 5px solid var(--blue-gray); margin-right: 2px; }
.article-nav__next .article-nav__dot::before { border-left: 5px solid var(--blue-gray); margin-left: 2px; }
.article-nav__index { justify-self: center; }
/* The label's trailing tracking is invisible, so the next-arrow sits 3 px
   closer to it than the previous-arrow does to its label. */
.article-nav a.article-nav__next { gap: 19px; }

@media (min-width: 768px) {
  .article-nav { grid-template-columns: 1fr auto 1fr; gap: 16px; }
  .article-nav__next { justify-self: end; }
}

@media (min-width: 1024px) {
  .article-nav { margin-top: 110px; padding-inline: 10px; }
  .article-nav a { font-size: 18px; letter-spacing: 0.1em; }
}

/* =========================================================
   Narrow-phone tuning
   ========================================================= */
@media (max-width: 374px) {
  .container { padding-inline: 16px; }
  .article-hero__title { font-size: 20px; letter-spacing: 0.01em; }
  .chip { padding: 0 14px; font-size: 13px; }
  .rank-item a { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .article-hero__text { padding-left: 32px; }
  .article-hero__text::before { left: 14px; }
}