/* =============================================================
   Yakîn — the cover. Same bound-page furniture as Şahit (.sc-*)
   and Gölgem (.gc-*), with two deliberate differences:
     · FLAT ground (see tokens-yakin.css) — the art is drawn on
       flat cream and a gradient reveals its edge as a seam.
     · the art runs wide (92%). At half-width the rose loses
       presence and the thread has no room to travel.
   ============================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink);
  -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; }

.yc-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; background: var(--cream); }
/* --frame is the single source of truth for the border's inset: the content
   padding is derived from it, so the art can never overshoot the frame. They
   were independent before (26px vs 7%), and below a ~371px card the percentage
   fell inside the fixed inset and the art spilled left and right. */
.yc { --frame: 26px; --gutter: 18px;
  position: relative; width: 680px; max-width: 100%;
  /* min-height, NOT aspect-ratio: .yc-inner used to be absolutely positioned, so it
     could never push the card taller — content beyond the ratio's height bled out of
     BOTH ends (flex centring splits the overflow). The tall cropped plate does exactly
     that at EVERY width where the desktop rules apply: the card is capped at 680px,
     so the overflow is a constant ~82px (about 41px out the top) at 840, 1000 and
     1440 alike. Phone widths were fine only because the mobile block overrides the
     ratio — which is why a phone-width test pass is not evidence here.
     The card now centres its content and grows when the content needs it. */
  min-height: min(904px, calc((100vw - 40px) * 904 / 680));
  display: flex; flex-direction: column; justify-content: center;
  background: var(--cream); box-shadow: 0 26px 70px rgba(70,63,54,.20); border-radius: 2px; }
.yc-frame { position: absolute; inset: var(--frame); border: 1px solid var(--line);
  pointer-events: none; }
.yc-frame::after { content: ""; position: absolute; inset: 6px; border: .6px solid var(--rule-soft); }
.yc-inner { position: static; width: 100%; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 6% calc(var(--frame) + var(--gutter)) 31%; }
.yc-kicker { font-family: var(--font-sans); font-size: 11px; letter-spacing: .42em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3%; }
.yc-art { width: 92%; display: block; }
.yc-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(58px, 15vw, 104px);
  line-height: .9; color: var(--ink); margin: 2% 0 0; }
.yc-rule { width: 62px; height: 1px; background: var(--rose); opacity: .85; margin: 26px 0 20px; }
.yc-epigraph { font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 3.4vw, 24px); line-height: 1.5; color: var(--sepia); margin: 0; }
.yc-foot { position: absolute; left: 0; right: 0; bottom: 7.4%; display: flex;
  flex-direction: column; align-items: center; gap: 10px; }
.yc-sub { font-family: var(--font-sans); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--rose); }
.yc-author { font-family: var(--font-script); font-size: 40px; color: var(--ink); }
.yc-soon { font-family: var(--font-sans); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

@media (max-width: 560px) {
  .yc { --frame: 18px; --gutter: 14px; min-height: 76vh; }
  .yc-art { width: 100%; }
  /* px, not %: percentage padding resolves against WIDTH, so on a narrower
     phone the bottom reserve shrinks while the foot's three lines of text do
     not — and the epigraph lands on the subtitle. */
  .yc-inner { padding: 8% calc(var(--frame) + var(--gutter)) 168px; }
  .yc-kicker { font-size: 9px; letter-spacing: .26em; }   /* fits one line at 390px */
  .yc-title { font-size: 48px; }
  .yc-author { font-size: 34px; }
}