/* Gooki design system layer.
 *
 * Loaded AFTER style.css and storefront-redesign.css, so its rules win on equal
 * specificity. Three jobs:
 *
 *   1. Re-point the existing `--atelier-*` and legacy `--color-*` palettes at the
 *      design tokens, so the whole storefront takes the new colours.
 *   2. Replace the boxed navigation with a quiet publisher masthead.
 *   3. Lay the "how it works" steps out as ordinary scrolling content.
 *
 * The markup is deliberately NOT swapped for the reference class names. The
 * header carries a language <select>, auth-dependent links and a JS-driven
 * compact menu; the book card carries price, categories, badges and per-locale
 * facts. None of that exists in the reference components.
 *
 * Font families are set with LONGHAND properties, never the `font:` shorthand:
 * the shorthand resets font-family, which would put Persian text into a
 * Latin-only face (see the body.locale-fa rules in storefront-redesign.css).
 */

:root {
  /* --- design tokens (gooki-design-tokens.json) --- */
  --gk-paper: #f7f5f2;
  --gk-paper-strong: #eeeae4;
  --gk-ink: #1b2430;
  /* Token value is #67707a. It clears AA on white (5.03) and on paper (4.62)
     and misses on paperStrong (4.20) — which is the ground under the card fact
     labels, the section leads and the story copy. #616a74 is the smallest
     darkening that clears all three (5.49 / 5.05 / 4.59). */
  --gk-ink-muted: #616a74;
  --gk-brand: #d95d45;
  --gk-brand-hover: #b94835;
  --gk-blue: #b8cedb;
  --gk-yellow: #ebcb75;
  --gk-line: #dedad4;
  --gk-white: #fff;
  /* The catalogue tile. Paper (#f7f5f2) is Apple's own #f5f5f7-on-white
     contrast and is right where a product floats on transparency; here the
     jacket covers all but a ring of it, and a ring that faint reads as a
     rendering artefact rather than a mount. */
  --gk-tile: #f1eee7;

  --gk-radius-sm: 10px;
  --gk-radius-md: 16px;
  --gk-radius-lg: 24px;
  --gk-radius-pill: 999px;

  --gk-shadow-card: 0 10px 30px rgb(36 50 74 / 8%);
  --gk-shadow-float: 0 16px 48px rgb(36 50 74 / 14%);

  /* Coral is the single accent, and it is a light one: #d95d45 measures 3.44:1
     on paper. That clears the 3:1 bar for a rule or a mark and misses the 4.5:1
     bar for the 14px label the CTA actually is, so TEXT uses the deeper shade
     (4.78:1) and the hairline keeps the bright one. */
  --gk-brand-text: var(--gk-brand-hover);
  --gk-brand-text-hover: #a03d2c;

  /* --- remap the existing palette onto the tokens --- */
  --atelier-paper: var(--gk-paper);
  --atelier-white: var(--gk-white);
  --atelier-ink: var(--gk-ink);
  --atelier-muted: var(--gk-ink-muted);
  --atelier-gold: var(--gk-yellow);
  --atelier-mint: var(--gk-blue);
  --atelier-sky: var(--gk-blue);
  --atelier-border: var(--gk-line);
  --atelier-shadow: var(--gk-shadow-float);
  --atelier-shadow-soft: var(--gk-shadow-card);
  /* The safety band was a pale mint left over from the old palette; the new one
     has a single cool hue, so the tint comes off the dusty blue. */
  --atelier-safety-bg: #e8eff4;
  --atelier-terracotta: var(--gk-brand);
  --atelier-terracotta-accessible: var(--gk-brand-text);

  /* This palette has no mid-dark hue, so a filled button that used to be teal
     becomes ink. White on coral is 3.75:1 and cannot carry a label; keeping
     coral for text actions alone is also what "one accent" means. */
  --atelier-brand: var(--gk-ink);
  --atelier-brand-hover: #2c3846;
  --atelier-brand-dark: #141c26;

  --color-primary: var(--gk-ink);
  --color-primary-dark: #2c3846;
  --color-secondary: var(--gk-brand-text);
  --color-accent: var(--gk-yellow);
}

/* DM Serif Display replaces Fraunces. It ships one weight, so anything that
   asked Fraunces for 700 has to stop asking or it renders synthetically bold. */
:root {
  --atelier-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
}

body {
  background: var(--gk-paper);
}

/* The wordmark is ink. The gradient needs unsetting explicitly: style.css fills
   it with `-webkit-text-fill-color: transparent`, which beats any later `color`. */
.logo-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentcolor;
  color: var(--gk-ink);
}

h1, h2, h3,
.logo-text,
.atelier-book-card h2,
.atelier-book-card h3,
.story-flow__copy h2 {
  font-weight: 400;
}

/* Persian has no DM Serif Display, and Vazirmatn stays loaded for it. The
   design deliverable ships no Arabic-script sample; the storefront still sells
   Persian books, so dropping the face would break the fa catalogue outright. */
body.locale-fa h1,
body.locale-fa h2,
body.locale-fa h3,
body.locale-fa .logo-text {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

/* -------------------------------------------------------------- masthead --- */

/* No fill, no blur, no boxes — a hairline rule and paper. It stays fixed: the
   reference masthead scrolls away, but "Create a story" is the one action the
   shop is built around and it should not need a scroll back up to reach. */
.navbar--atelier {
  background: var(--gk-paper);
  border-bottom: 1px solid var(--gk-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-menu--atelier {
  gap: clamp(14px, 2vw, 28px);
}

/* The rule under the word is the only hover feedback. No pill, no fill, no
   colour swap on the label itself. */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gk-ink);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  transition: opacity 160ms ease;
}

/* style.css:218 gives .nav-link a 2px transparent border-bottom and colours it
   on hover, so the coral rule below was the SECOND line under a hovered item —
   a 2px ink border with a 1px coral rule under it. The rule is the only hover
   mark this masthead has, so the legacy border goes. */
.nav-link {
  border-bottom: 0;
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -7px;
  height: 1px;
  background: var(--gk-brand);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 180ms ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  background: transparent;
  color: var(--gk-ink);
  opacity: 0.7;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-link--quiet,
.nav-link--logout {
  color: var(--gk-ink-muted);
  font-weight: 600;
}

/* The primary action is a coral text link with an arrow, not a button. */
.nav-link--cta,
.nav-link--cta:hover,
.nav-link--cta:focus-visible {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gk-brand-text);
  font-weight: 800;
  opacity: 1;
  transform: none;
}

.nav-link--cta::before {
  content: "";
}

.nav-link--cta::after {
  content: "\00a0\2192";
  position: static;
  height: auto;
  background: none;
  transform: none;
  transition: transform 180ms ease;
}

.nav-link--cta:hover {
  color: var(--gk-brand-text-hover);
}

.nav-link--cta:hover::after {
  transform: translateX(3px);
}

.lang-switch__label {
  color: var(--gk-ink-muted);
}

.lang-switch__select {
  padding-inline: 4px;
  border-color: transparent;
  background: transparent;
  color: var(--gk-ink-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

/* The compact menu keeps the same grammar: no fills, coral text for the CTA. */
body.nav-compact .nav-menu--atelier {
  border-color: var(--gk-line);
  border-radius: var(--gk-radius-md);
  background: var(--gk-paper);
  box-shadow: var(--gk-shadow-float);
}

body.nav-compact .nav-link {
  min-height: 40px;
  padding: 0;
  border-radius: 0;
  font-size: 0.95rem;
}

body.nav-compact .nav-link:hover,
body.nav-compact .nav-link:focus-visible {
  background: transparent;
}

body.nav-compact .nav-link::after {
  bottom: 4px;
}

body.nav-compact .nav-link--cta {
  justify-content: flex-start;
  margin-top: 4px;
  padding: 0;
}

body.is-rtl.nav-compact .nav-link--cta {
  justify-content: flex-end;
}

/* Arrows are directional. In an RTL masthead the action points the other way. */
body.is-rtl .nav-link--cta::after {
  content: " \2190";
}

body.is-rtl .nav-link--cta:hover::after {
  transform: translateX(-3px);
}

/* ----------------------------------------------------------------- cards --- */

.atelier-book-card {
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius-lg);
  box-shadow: var(--gk-shadow-card);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.atelier-book-card:hover,
.atelier-book-card:focus-within {
  box-shadow: var(--gk-shadow-float);
  transform: translateY(-5px);
}

/* The frame stays SQUARE with `contain`. The reference card's 4:3 `cover` would
   crop the top and bottom off every jacket — each book prints 17 x 17 cm. */
.atelier-book-card__media {
  background: var(--gk-paper-strong);
}

.atelier-book-card__category {
  color: var(--gk-brand-text);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.atelier-book-card__description,
.atelier-book-card__meta {
  color: var(--gk-ink-muted);
}

.atelier-book-card h2,
.atelier-book-card h3 {
  letter-spacing: -0.03em;
}

/* A card title is a heading that happens to link. */
.atelier-book-card h2 a,
.atelier-book-card h3 a {
  color: inherit;
}

.atelier-book-card h2 a:hover,
.atelier-book-card h3 a:hover,
.atelier-book-card h2 a:focus-visible,
.atelier-book-card h3 a:focus-visible {
  color: var(--gk-brand-text);
}

.atelier-book-card__facts dt {
  color: var(--gk-ink-muted);
}

.atelier-book-card__facts dd {
  color: var(--gk-ink);
}

/* One card was carrying four different chip treatments — the age pill on a blue
   tint, the category links on white with a hairline, the fact blocks on a
   SECOND blue tint (rgb(220 234 244 / .58)), and the badges on tinted paper.
   Four ways of saying "small label" is what reads as too many colours; the book
   cover is the only thing on this page that should be carrying any. */
.atelier-pill,
.atelier-badge,
.atelier-book-card__facts div,
.atelier-facts-card dl div {
  border: 1px solid var(--gk-line);
  background: var(--gk-paper-strong);
  color: var(--gk-ink);
}

.atelier-pill--soft {
  border-color: var(--gk-line);
  background: var(--gk-paper-strong);
  color: var(--gk-ink-muted);
}

.atelier-text-link {
  color: var(--gk-brand-text);
}

/* Eyebrows are 12-13px caps and land on four different grounds — white, paper,
   tinted paper, and the safety band. The deeper coral is the only one that
   clears AA on all of them (5.48-6.57); the lighter shade misses on two. */
.atelier-eyebrow {
  color: var(--gk-brand-text-hover);
}

/* ------------------------------------------------------------ story flow --- */

/* Was a 320vh sticky stage that swapped one scene in at a time. Now four blocks
   in ordinary flow: every step is on the page at once, readable with no script
   and no scroll position. */
.story-flow {
  position: relative;
  height: auto;
  padding: clamp(56px, 7vw, 96px) 24px;
  background: var(--gk-paper-strong);
}

.story-flow__intro {
  max-width: 1200px;
  margin: 0 auto clamp(32px, 4vw, 56px);
}

.story-flow__list {
  display: grid;
  gap: clamp(48px, 6vw, 88px);
  max-width: 1200px;
  margin: 0 auto;
}

.story-flow__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

/* Alternating sides give the column a rhythm without any scroll trickery. */
.story-flow__item:nth-child(even) .story-flow__visual {
  order: 2;
}

.story-flow__visual {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius-lg);
  background: var(--gk-white);
  box-shadow: var(--gk-shadow-card);
}

.story-flow__copy {
  min-width: 0;
}

.story-flow__copy h2 {
  margin: 0 0 12px;
  color: var(--gk-ink);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.story-flow__copy p {
  margin: 0;
  max-width: 60ch;
  color: var(--gk-ink-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* The scenes were absolutely stacked on one another and faded by scroll. In
   flow they are ordinary blocks, each visible. */
.story-flow .story-visual-layer {
  position: relative;
  inset: auto;
  width: 100%;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  pointer-events: auto;
  display: grid;
  place-items: center;
}

.story-flow .story-step {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  pointer-events: auto;
}

@media (max-width: 860px) {
  .story-flow__item,
  .story-flow__item:nth-child(even) .story-flow__visual {
    grid-template-columns: minmax(0, 1fr);
    order: 0;
  }
}

/* ------------------------------------------------------- focus + motion --- */

/* The token yellow measures 1.45:1 on paper — a focus ring nobody can see. Ink
   is the only value in this palette that clears the 3:1 non-text bar with room
   to spare, and it suits the masthead. */
.nav-link:focus-visible,
.lang-switch__select:focus-visible,
.atelier-chip:focus-visible,
.atelier-text-link:focus-visible,
.btn:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gk-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .atelier-book-card,
  .atelier-book-card:hover,
  .atelier-book-card:focus-within,
  .nav-link--cta::after,
  .nav-link--cta:hover::after {
    transform: none;
  }

  .nav-link::after {
    transition: none;
  }
}

/* --- the story visuals were built for a dark stage -------------------------- */

/* Every one of these components was drawn on `--atelier-brand-dark`: cream type,
   gold accents, white-at-7% panels, hairlines in cream. On paper that is cream
   on cream — the copy was invisible, not merely low contrast. */
.story-flow .story-step h2,
.story-flow .story-book-showcase__item strong,
.story-flow .story-transform-card__caption,
.story-flow .story-arrival-card__note,
.story-flow .story-voice-card__badge,
.story-flow .story-voice-track__meta strong {
  color: var(--gk-ink);
}

.story-flow .story-step p,
.story-flow .story-book-showcase__item span,
.story-flow .story-voice-track__meta span {
  color: var(--gk-ink-muted);
}

.story-flow .story-step .atelier-eyebrow {
  color: var(--gk-brand-text-hover);
}

.story-flow .story-book-showcase__item,
.story-flow .story-arrival-card__frame {
  background: var(--gk-white);
  border-color: var(--gk-line);
  box-shadow: var(--gk-shadow-card);
}

/* The voice card carried its own panel, which inside .story-flow__visual is a
   white card on a white card — and it was sized for the wide stage, so it also
   overflowed the column. The outer panel is the card now. */
.story-flow .story-voice-card {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.story-flow .story-voice-card__badge {
  background: var(--gk-paper-strong);
}

.story-flow .story-transform-card__arrow {
  background: var(--gk-paper-strong);
  border-color: var(--gk-line);
  color: var(--gk-brand-text);
}

.story-flow .story-voice-card__mic {
  color: var(--gk-brand-text);
}

/* The showcase fanned three covers out of an absolutely-positioned stack, sized
   for a full-viewport stage. At half a column the cards overlap and eat each
   other's captions, so in flow they are simply three covers in a row. */
.story-flow .story-book-showcase {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  width: 100%;
  min-height: 0;
}

.story-flow .story-book-showcase__item {
  position: static;
  inset: auto;
  width: auto;
  padding: 10px;
  border-radius: 16px;
  transform: none;
}

.story-flow .story-book-showcase__item figcaption {
  padding-top: 10px;
  font-size: 0.86rem;
}

.story-flow .story-book-showcase__item span {
  font-size: 0.8rem;
}

.story-flow .story-transform-card,
.story-flow .story-voice-card,
.story-flow .story-arrival-card {
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .story-flow .story-book-showcase {
    min-height: 320px;
  }
}

/* --------------------------------------------------------- dark sections --- */

/* The finale's ground is a gradient with #245e69 written into it, so the token
   remap could not reach it and it kept the old teal. Cream type over it is
   already correct; only the ground had to move to the new palette. */
.atelier-finale {
  background:
    radial-gradient(circle at top left, rgb(235 203 117 / 12%), transparent 24%),
    linear-gradient(180deg, var(--gk-ink), var(--gk-ink));
}

/* ------------------------------------------------ category icons + card --- */

/* One-colour line icons replace the category emoji (see _category_icons.html).
   They take the chip's own ink, so the set cannot drift from the palette. */
.cat-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: 0.75;
}

.atelier-chip.is-active .cat-icon {
  opacity: 1;
}

.atelier-category-card__icon .cat-icon {
  width: 26px;
  height: 26px;
  opacity: 1;
}

/* ------------------------------------------------------- dark-ground CTAs --- */

/* Two changes that were each fine alone: filled buttons became ink (white on
   coral is 3.75:1 and this palette has no mid-dark hue), and the finale's
   ground moved off the old teal onto ink. Together they put an ink button on
   an ink section — rgb(27,36,48) on rgb(27,36,48), a button you cannot see,
   its white label floating on the page. The outline button beside it lost its
   border the same way.
   The contrast sweep could not catch either: it skips elements over a gradient
   background, and the finale's ground is one. Buttons on dark sections are
   reversed instead — paper ground, ink label. */
.atelier-finale .btn--primary,
.atelier-cinema-hero .btn--primary {
  border-color: var(--gk-paper);
  background: var(--gk-paper);
  color: var(--gk-ink);
}

.atelier-finale .btn--primary:hover,
.atelier-finale .btn--primary:focus-visible,
.atelier-cinema-hero .btn--primary:hover,
.atelier-cinema-hero .btn--primary:focus-visible {
  border-color: var(--gk-white);
  background: var(--gk-white);
  color: var(--gk-ink);
}

.atelier-finale .btn--outline {
  border-color: rgb(247 245 242 / 45%);
  background: transparent;
  color: var(--gk-paper);
}

.atelier-finale .btn--outline:hover,
.atelier-finale .btn--outline:focus-visible {
  border-color: var(--gk-paper);
  background: rgb(247 245 242 / 12%);
  color: var(--gk-paper);
}

/* A focus ring in ink is invisible on these grounds too. */
.atelier-finale a:focus-visible,
.atelier-finale button:focus-visible,
.atelier-cinema-hero a:focus-visible,
.atelier-cinema-hero button:focus-visible {
  outline-color: var(--gk-paper);
}

/* ------------------------------------------------- catalogue as a gallery --- */

/* The catalogue page was a beige ground carrying 27 white boxes, each with a
   hairline, a drop shadow, two rows of bordered pills, an italic second title
   and a rule above the price — eight bordered elements per book, and the
   jackets competing with all of them.
 *
 * This is the same content with the boxes taken away. The page is WHITE and
 * each jacket rests on a paper-coloured tile, which is the one move that makes
 * a shelf of 27 differently-painted covers read as one set; the words sit on
 * the page under the tile, not inside a card. Nothing here is bordered except
 * the covers' own soft shadow, and only two type sizes carry any weight.
 *
 * Scoped to `--gallery` / `.gallery-*`: `.atelier-book-card` is the home page's
 * card too, and it is not this shape. */

.atelier-catalog--gallery {
  padding: 0 24px clamp(72px, 9vw, 128px);
  background: var(--gk-white);
}

.atelier-catalog--gallery .container {
  max-width: 1240px;
}

/* --- the opening line ---------------------------------------------------- */

.gallery-hero {
  padding: clamp(48px, 6.5vw, 88px) 0 clamp(30px, 4vw, 48px);
  text-align: center;
}

.atelier-catalog--gallery h1 {
  max-width: 17ch;
  margin-inline: auto;
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.gallery-hero__eyebrow {
  margin: 0 0 14px;
  color: var(--gk-brand-text-hover);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gallery-hero__lead {
  max-width: 48ch;
  margin: 18px auto 0;
  color: var(--gk-ink-muted);
  font-size: 1.06rem;
  line-height: 1.6;
}

/* --- the filter ---------------------------------------------------------- */

/* Borderless: seven outlined, shadowed pills with count badges were seven more
   boxes above a page whose whole problem was boxes. Ground and ink carry the
   state instead — quiet until hovered, solid ink when it is the one in force. */

.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0 0 clamp(44px, 6vw, 76px);
}

.gallery-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--gk-radius-pill);
  color: var(--gk-ink-muted);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.gallery-filter__chip:hover {
  color: var(--gk-ink);
  background: rgb(27 36 48 / 6%);
}

.gallery-filter__chip.is-active {
  color: var(--gk-white);
  background: var(--gk-ink);
}

.gallery-filter__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}

.gallery-filter .cat-icon {
  opacity: 0.55;
}

.gallery-filter__chip.is-active .cat-icon {
  opacity: 0.9;
}

/* Below a phone's width seven chips wrap to three ragged rows. One row that
   scrolls keeps the shelf directly under the heading. */
@media (max-width: 720px) {
  .gallery-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: -24px;
    padding-inline: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .gallery-filter::-webkit-scrollbar {
    display: none;
  }

  .gallery-filter__chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* --- the shelf ----------------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 5vw, 68px) clamp(24px, 3vw, 44px);
}

@media (max-width: 1080px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* The tile is the same paper on every card, and it is what makes a wall of
   covers painted in gouache, flat vector and watercolour read as one shelf.
   `contain`, not `cover`: every book prints 17 x 17 cm square, and a jacket
   that is not square is letterboxed onto the paper rather than cut into. */
.gallery-card__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: clamp(18px, 2.6vw, 36px);
  overflow: hidden;
  border-radius: 22px;
  background: var(--gk-tile);
}

.gallery-card__frame img,
.gallery-card__frame .book-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  /* The jacket is a physical object resting on paper — this is the only shadow
     left on the page, and it belongs to the book rather than to a card. */
  box-shadow: 0 10px 24px rgb(27 36 48 / 12%), 0 1px 4px rgb(27 36 48 / 6%);
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gallery-card:hover .gallery-card__frame img,
.gallery-card:focus-within .gallery-card__frame img {
  transform: scale(1.035);
}

/* Flex, not grid, and the buy row takes the slack: a two-line title next to a
   one-line title otherwise steps the prices down the row like a staircase. */
.gallery-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 4px 0;
  text-align: center;
}

.gallery-card__kicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 7px;
  margin: 0;
  color: var(--gk-ink-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-card__kicker > * + *::before {
  content: "\00b7";
  margin-inline-end: 7px;
  opacity: 0.55;
}

/* Above the stretched title link, so a category is still its own destination. */
.gallery-card__kicker a {
  position: relative;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}

.gallery-card__kicker a:hover {
  color: var(--gk-ink);
  text-decoration: underline;
}

.gallery-card__title {
  margin: 0;
  font-family: var(--atelier-serif);
  font-size: clamp(1.14rem, 1.35vw, 1.32rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

body.locale-fa .gallery-card__title {
  letter-spacing: 0;
}

.gallery-card__title a {
  color: var(--gk-ink);
  text-decoration: none;
  transition: color 160ms ease;
}

/* The one link on the card, stretched over all of it. */
.gallery-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
}

.gallery-card:hover .gallery-card__title a {
  color: var(--gk-brand-text);
}

.gallery-card__blurb {
  max-width: 34ch;
  margin: 0;
  color: var(--gk-ink-muted);
  font-size: 0.94rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gallery-card__spec {
  margin: 1px 0 auto;
  color: var(--gk-ink-muted);
  font-size: 0.79rem;
  line-height: 1.45;
  opacity: 0.85;
}

/* Was a rule, a price and a bordered action. The rule was the top of a box
   that is no longer there. */
.gallery-card__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  margin: 12px 0 0;
}

.gallery-card__price {
  color: var(--gk-ink);
  font-size: 1rem;
  font-weight: 800;
}

.gallery-card__cta {
  color: var(--gk-brand-text);
  font-size: 0.88rem;
  font-weight: 800;
}

.gallery-card__cta::after {
  content: "\00a0\2192";
  display: inline-block;
  transition: transform 180ms ease;
}

body.is-rtl .gallery-card__cta::after {
  content: "\00a0\2190";
}

.gallery-card:hover .gallery-card__cta::after {
  transform: translateX(3px);
}

body.is-rtl .gallery-card:hover .gallery-card__cta::after {
  transform: translateX(-3px);
}

.gallery-empty {
  grid-column: 1 / -1;
  max-width: 46ch;
  margin: 0 auto;
  color: var(--gk-ink-muted);
  font-size: 1.02rem;
  line-height: 1.6;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card__frame img,
  .gallery-card:hover .gallery-card__frame img,
  .gallery-card:focus-within .gallery-card__frame img,
  .gallery-card__cta::after,
  .gallery-card:hover .gallery-card__cta::after {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------- the home page, quiet --- */

/* Same argument as the catalogue one section up, applied to the front page.
 * Three faults, all of them things drawn that are not content:
 *
 *   1. Four sections printed their own heading TWICE — a caps eyebrow reading
 *      "Made to look and feel like your family" directly above an h2 reading
 *      "Made to look and feel like your family", from the same message key.
 *      Those are gone from the markup; what remains here is the rhythm.
 *   2. The featured books were the old boxed card while /books is a gallery,
 *      so the same three books looked like a different product two clicks
 *      apart. They now use `.gallery-card` verbatim.
 *   3. The grounds alternated paper / paper / paperStrong / cream with no
 *      pattern, which reads as drift rather than as sections. White and paper,
 *      turn and turn about, with the story flow and the finale as the two
 *      deliberate exceptions. */

.atelier-home .atelier-section {
  padding: clamp(64px, 8vw, 116px) 24px;
}

.atelier-home .atelier-featured,
.atelier-home .family-proof,
.atelier-home .atelier-faq {
  background: var(--gk-white);
}

.atelier-home .atelier-categories,
.atelier-home .atelier-delivery {
  background: var(--gk-paper);
}

/* On /books the row has one solid chip in it, which says the whole row is a
   control. Here every chip is unselected, and seven grey words in a line read
   as a caption rather than as seven links — so they carry a faint ground. */
.atelier-home .gallery-filter__chip {
  background: rgb(27 36 48 / 5%);
}

.atelier-home .gallery-filter__chip:hover {
  background: rgb(27 36 48 / 10%);
}

/* One row of chips does not need a screenful of paper around it. */
.atelier-home .atelier-categories {
  padding-block: clamp(52px, 6vw, 84px);
}

.atelier-home .atelier-categories .home-section-head {
  margin-bottom: clamp(28px, 3.5vw, 42px);
}

.atelier-home .atelier-categories .home-section-more {
  margin-top: clamp(24px, 3vw, 36px);
}

/* A section heading is one line, centred, with air under it. The measure goes
   on the h2, not on this wrapper: `ch` resolves against the element's OWN
   font, so 22ch here was 22 characters of the 16px SANS — 176px, and
   "Featured books" wrapped onto two lines inside it. */
.home-section-head {
  margin: 0 auto clamp(36px, 5vw, 60px);
  text-align: center;
}

/* The serif is applied through an explicit selector list in
   storefront-redesign.css, so a heading in a new wrapper silently comes out in
   the sans body face — which is what the steps heading did. The Persian rule
   has to be restated for the same reason: it sits earlier in this file, and at
   equal specificity the last rule wins, so without it a Persian heading would
   be set in a Latin-only face and print as .notdef boxes. */
.home-section-head h2 {
  max-width: 20ch;
  margin: 0 auto;
  font-family: var(--atelier-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body.locale-fa .home-section-head h2 {
  font-family: var(--atelier-persian);
  letter-spacing: 0;
}

/* "View all stories" was floating beside the heading, holding the right half
   of the row open. After the grid it is the thing you read once you have run
   out of books, which is when it is useful. */
.home-section-more {
  margin: clamp(32px, 4vw, 52px) 0 0;
  text-align: center;
}

.atelier-home .gallery-grid,
.atelier-home .gallery-filter {
  max-width: 1240px;
  margin-inline: auto;
}

.atelier-home .gallery-filter {
  margin-bottom: 0;
}

/* The proof and steps headings keep their own copy but stop being a left
   column with an empty right half. */
.atelier-home .family-proof__header {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.atelier-home .family-proof__header h2 {
  max-width: none;
  margin: 0 auto 18px;
  text-wrap: balance;
}

.atelier-home .family-proof__header .atelier-lead {
  margin-inline: auto;
}

.atelier-home .story-flow__intro h2 {
  max-width: 24ch;
}

/* The FAQ printed the word "FAQ" as a caps eyebrow, again as a display h2, and
   then set the questions in a column offset to the right of both. */
.atelier-home .atelier-faq__grid {
  max-width: 860px;
}

/* This heading had a caps eyebrow above it and nothing below it; with the
   eyebrow gone the lead was set tight against the display type. */
.atelier-home .atelier-delivery h2 {
  margin-bottom: 16px;
}

.atelier-home .atelier-delivery .atelier-lead {
  margin-bottom: 28px;
}

/* --- the hero -------------------------------------------------------------- */

/* The scrim was mixed from the retired teal and cleared to 12% by 72% across,
   which left the headline sitting on a laptop screen that carries a headline
   of its own — two competing titles in one frame. Ink, and dark enough over
   the copy that the only words in the left half of the picture are ours. */
.atelier-cinema-hero__overlay {
  background:
    linear-gradient(
      90deg,
      rgb(20 28 38 / 0.96) 0%,
      rgb(20 28 38 / 0.93) 42%,
      rgb(20 28 38 / 0.58) 62%,
      rgb(20 28 38 / 0.12) 82%,
      rgb(20 28 38 / 0.04) 100%
    ),
    linear-gradient(180deg, rgb(20 28 38 / 0.28), transparent 26%);
}

.atelier-cinema-hero__copy h1 {
  letter-spacing: -0.045em;
}

.atelier-cinema-hero__copy .atelier-lead {
  max-width: 44ch;
  margin-top: 20px;
}

/* Every button is a pill. Rounding only the hero's would have left the
   delivery block's "Create your book" as the one hard-cornered rectangle on
   the page, and rounding only the home page's would move that seam to the
   order form instead — so this is site-wide, on the one base class. */
.btn,
.button {
  border-radius: var(--gk-radius-pill);
}

/* Three claims set as one wrapped grey line under the buttons; they are a
   footnote to the hero, not a fourth paragraph of it. */
.atelier-hero-proof {
  margin-top: 26px;
  font-size: 0.86rem;
  font-weight: 600;
}