/* Word of the Day website: one stylesheet for every page.
   The site is a page of the app's paper (design study "A · Sayfa", palette colouring "Belirgin", 2026-10-14).
   Tokens mirror the app: PaperTones (WidgetDesign.swift) and DS.Color / DS.Color.Swatch (DSColor.swift).
   Swatch values: fill = tile (same in light and dark), text = light / dark / Increase Contrast. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; licences next to the files) ---------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
/* A subset of Source Sans 3, renamed: "Source" is a Reserved Font Name (OFL FAQ 2.6, 3.1). */
@font-face {
  font-family: "WOTD Sans";
  src: url("fonts/WOTDSans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --paper: #F6F5F1;          /* PaperTones.paperLight */
  --card: #FDFCF9;           /* DS.Color.paperCard */
  --ink: #0B0B0A;
  --ink-2: #62615D;          /* PaperTones.secondaryLight */
  --rule: rgba(0, 0, 0, .12);
  --chip: rgba(0, 0, 0, .06);  /* DS.Color.chipFill */
  --accent: #5E4EBB;         /* Swatch.violet text */
  --grain: url("img/grain-light.webp");
  --grain-set: image-set(url("img/grain-light.avif") type("image/avif"), url("img/grain-light.webp") type("image/webp"));
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "WOTD Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 34rem;

  /* Swatch fills (tiles: white glyph, the same in light and dark) */
  --violet-fill: #5E4EBB; --teal-fill: #137875; --ochre-fill: #A06224;
  --green-fill: #3E7D4C; --rose-fill: #A9466E;
  --crown: linear-gradient(135deg, #5E4EBB 0%, #A9466E 55%, #B44C38 100%);
  /* Swatch text */
  --violet: #5E4EBB; --teal: #137875; --ochre: #9E6021; --green: #3C7C4B; --rose: #A9466E;
  /* Tinted paper bands (the swatch fill at 7 % over paper) and their label colours (Increase Contrast values) */
  --tint-rose: #F1E9E8; --tint-violet: #EBE9ED;
  --on-rose: #8F2E57; --on-violet: #5240AC;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121211;        /* PaperTones.paperDark */
    --card: #1E1E1C;
    --ink: #F4F3EF;
    --ink-2: #8E8D88;        /* PaperTones.secondaryDark */
    --rule: rgba(255, 255, 255, .14);
    --chip: rgba(255, 255, 255, .10);
    --accent: #897EF0;
    --grain: url("img/grain-dark.webp");
    --grain-set: image-set(url("img/grain-dark.avif") type("image/avif"), url("img/grain-dark.webp") type("image/webp"));
    --violet: #897EF0; --teal: #419B96; --ochre: #BF7F43; --green: #5B9B68; --rose: #D36C93;
    --crown: linear-gradient(135deg, #8472FE 0%, #E04E8E 55%, #E05C42 100%);
    --tint-rose: #27191E; --tint-violet: #1D1A29;     /* 14 % in dark */
    --on-rose: #D36C93; --on-violet: #897EF0;
  }
}
@media (prefers-contrast: more) {
  :root {
    --ink-2: #3F3E3B; --rule: rgba(0, 0, 0, .3); --accent: #5240AC;
    --violet: #5240AC; --teal: #035C5A; --ochre: #7C4502; --green: #1D5E2F; --rose: #8F2E57;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --ink-2: #C8C7C2; --rule: rgba(255, 255, 255, .35); --accent: #B2AEFE;
    --violet: #B2AEFE; --teal: #6EC5C1; --ochre: #ECA96D; --green: #85C590; --rose: #FE97BC;
    --on-rose: #FE97BC; --on-violet: #B2AEFE;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh; display: flex; flex-direction: column;
  background-color: var(--paper);
  background-image: var(--grain);
  background-image: var(--grain-set);
  background-size: 256px 256px;
  color: var(--ink);
  font: 400 1.1875rem/1.5 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
body > header, body > main, body > footer { width: 100%; }
body > main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
b, strong { font-weight: 600; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10;
  background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 600;
}
.skip:focus { left: 12px; }

/* The app's date line: small caps, secondary ink. */
.dateline {
  font: 600 .9375rem/1.2 var(--sans);
  font-variant-caps: small-caps;
  letter-spacing: .06em;
  color: var(--ink-2);
  margin: 0;
}
.headword {
  font-family: var(--serif); font-weight: 700; font-optical-sizing: auto;
  letter-spacing: -.012em; line-height: .98; margin: .12em 0 .1em;
}
.phonetic { font: 400 1.25rem/1.3 var(--sans); color: var(--ink-2); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0; }
.chip { font: 600 .875rem/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: var(--chip); color: var(--ink); }
.example { font: italic 400 1.25rem/1.45 var(--serif); color: var(--ink-2); margin: .6em 0 0; }
.premium-mark {
  font: 600 .9375rem/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--accent);
}
.hair { border: 0; border-top: 1px solid var(--rule); margin: 26px 0 22px; max-width: 36rem; }
/* The crown gradient (violet, rose, coral) as the hero's hairline. */
.crown-hair { border: 0; height: 2px; background: var(--crown); opacity: .9; }

/* Real screenshots: the screen's corner radius and a hairline, no home-made device frame. */
.shot { border-radius: 11.7% / 5.4%; outline: 1px solid var(--rule); outline-offset: -1px; background: var(--card); }
.shot-crop { border-radius: 22px; outline: 1px solid var(--rule); outline-offset: -1px; }

.badge { display: inline-block; line-height: 0; border-radius: 9px; }
.badge img { height: 48px; width: auto; }

/* ---------- Palette tiles (the app's Settings rows: swatch fill + white glyph) ---------- */
.tile {
  --s: 28px;
  display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 23%;
  color: #fff; vertical-align: middle;
}
.tile svg {
  width: 62%; height: 62%;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.t-violet { background: var(--violet-fill); } .t-teal { background: var(--teal-fill); }
.t-ochre { background: var(--ochre-fill); } .t-green { background: var(--green-fill); }
.t-rose { background: var(--rose-fill); } .t-crown { background: var(--crown); }
@media (forced-colors: active) { .tile { border: 1px solid CanvasText; } }

.c-violet, .c-crown { color: var(--violet); } .c-teal { color: var(--teal); } .c-ochre { color: var(--ochre); }
.c-green { color: var(--green); } .c-rose { color: var(--rose); }
.label { display: flex; align-items: center; gap: 10px; }
.label .n { font-variant-numeric: lining-nums; font-weight: 700; margin-right: 2px; }
.label .tile { --s: 26px; }

/* Tinted paper bands: full-bleed tint behind one section; labels there use the Increase Contrast value in light
   (the plain light value falls to 4.2-4.6:1 on the tint). */
.band {
  position: relative; border-top-color: transparent !important;
  background: var(--tint); box-shadow: 0 0 0 100vmax var(--tint); clip-path: inset(0 -100vmax);
}
.band + .sense, .band + .closing { border-top-color: transparent; }
.band-rose { --tint: var(--tint-rose); }
.band-violet { --tint: var(--tint-violet); }
.band-rose .c-rose { color: var(--on-rose); }
.band-violet .c-violet, .band-violet .c-crown, .band-violet .premium-mark { color: var(--on-violet); }

/* ---------- Header and footer ---------- */
.site-head { max-width: 1200px; margin: 0 auto; padding: 20px 24px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.1875rem/1 var(--serif); }
.brand img, .foot-brand img { border-radius: 22.5%; }
.navlink { font: 600 1rem/1 var(--sans); text-decoration: none; padding: 12px 2px; }
.navlink:hover, .navlink[aria-current="page"] { text-decoration: underline; }

.site-foot { border-top: 1px solid var(--rule); }
.foot-in {
  max-width: 1200px; margin: 0 auto; padding: 36px 24px 48px;
  display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline;
}
.foot-brand { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 1.0625rem/1 var(--serif); }
.foot-brand img { align-self: center; }
.site-foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: 0; font-size: 1rem; }
.site-foot li a { display: inline-block; padding: 4px 0; }
.legal { flex-basis: 100%; margin: 12px 0 0; font-size: .875rem; color: var(--ink-2); }

/* ---------- Home ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 72px; align-items: center;
  padding: 56px 0 104px;
}
.hero .headword { font-size: clamp(3.4rem, 9.2vw, 7.6rem); text-wrap: balance; }
.hero .phonetic { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.definition { font: 400 clamp(1.375rem, 2.2vw, 1.75rem)/1.35 var(--sans); margin: 0; max-width: 34rem; text-wrap: pretty; }
.hero .example { max-width: 32rem; }
.cta { margin-top: 32px; }
.hero-shot { justify-self: center; width: min(340px, 100%); }

.sense {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 400px); column-gap: 40px; row-gap: 8px;
  border-top: 1px solid var(--rule); padding: 72px 0 80px; align-items: start;
}
.num { grid-column: 1; grid-row: 1; margin: 0; padding-top: 2px; }
.num .tile { --s: 44px; }
.sense-text { grid-column: 2; }
.sense-text + .sense-text { margin-top: 28px; }
.sense-media { grid-column: 3; grid-row: 1 / span 3; justify-self: end; width: 100%; max-width: 320px; }
.sense-media.two { max-width: 400px; display: grid; gap: 16px; }
.sense h2 {
  font: 700 clamp(2rem, 4.2vw, 3.25rem)/1.04 var(--serif); letter-spacing: -.01em; margin: .25em 0 .55em;
  text-wrap: balance;
}
.points { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.points li { position: relative; padding: 0 0 .55em 1.15em; }
.points li::before { content: "–"; position: absolute; left: 0; color: var(--ink-2); }
.note { color: var(--ink-2); font-size: 1.0625rem; max-width: var(--measure); }
.sense .chips { max-width: 36rem; }
.lists-note { margin: 10px 0 0; font-size: .9375rem; }

.wide .strip { grid-column: 2 / -1; }
.strip {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}

.closing { text-align: center; padding: 96px 0 120px; border-top: 1px solid var(--rule); }
.closing .headword { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: .55em; }

/* ---------- Inner pages ---------- */
.page { padding-top: 48px; padding-bottom: 104px; }
.page-title { font-size: clamp(2.75rem, 7vw, 5.25rem); margin-bottom: .45em; }
.page-404 .page-title { margin-bottom: .1em; }
.links404 { margin-top: 28px; font-weight: 600; }

.prose { max-width: var(--measure); font-size: 1.1875rem; line-height: 1.6; }
.prose h2 { font: 700 1.75rem/1.2 var(--serif); margin: 2.2em 0 .5em; }
.prose h2:first-of-type { margin-top: 1.4em; }
.prose h3 { font: 600 1.3125rem/1.3 var(--serif); margin: 1.6em 0 .4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { overflow-wrap: anywhere; }
.lede { font: italic 400 1.25rem/1.5 var(--serif); color: var(--ink-2); }

.reading { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 16px; }
.toc { position: sticky; top: 24px; font-size: 1rem; }
.toc ol { padding-left: 1.2em; margin: 10px 0 0; color: var(--ink-2); }
.toc li { padding: 4px 0; }
.toc a { color: var(--ink); }

/* FAQ: a list of Settings-style rows (tile + question) that open in place. */
.faq { border-top: 1px solid var(--rule); max-width: 44rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative;
  display: flex; align-items: center; gap: 14px;
  font: 600 1.3125rem/1.3 var(--serif);
}
.faq summary .tile { --s: 34px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details > div { padding: 0 0 22px 48px; max-width: var(--measure); }
.faq details > div p { margin: 0 0 .7em; }

.contact { margin-top: 56px; max-width: 44rem; padding: 40px 0 48px; }
.contact h2 { font: 700 2rem/1.1 var(--serif); margin: 0 0 .3em; }

/* Controls only: the glass capsule (as the app's toolbar on paper). */
.button {
  display: inline-block; text-decoration: none; font: 600 1.0625rem/1.2 var(--sans); padding: 15px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .07);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  overflow-wrap: anywhere;
}
@media (prefers-color-scheme: dark) {
  .button { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .button { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* The one filled action (the paywall's Subscribe pattern): white on the violet fill, 6.4:1. */
.button-accent {
  background: var(--violet-fill); color: #fff; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (prefers-color-scheme: dark) { .button-accent { background: var(--violet-fill); border-color: transparent; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .rise-2 { animation-delay: .08s; }
  .rise-3 { animation-delay: .16s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding: 28px 0 72px; }
  .hero-shot { width: min(300px, 78%); }
  .sense { grid-template-columns: 1fr; padding: 56px 0 64px; }
  .num .tile { --s: 40px; }
  .num, .sense-text, .sense-media, .wide .strip { grid-column: 1; grid-row: auto; }
  .sense-media { justify-self: center; margin-top: 32px; max-width: 280px; }
  .sense-media.two { max-width: 360px; }
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 32px -24px 0; padding: 0 24px 8px; }
  .strip li { flex: 0 0 62%; scroll-snap-align: center; }
  .reading { grid-template-columns: 1fr; gap: 8px; }
  .toc { position: static; }
}