/* Premium Card — tokens and foundation
   One file for every page. A skin on <body data-skin="…"> sets the palette and type of each home:
   card (Home 1 and every inner page), specimen (Home 2), poster (Home 3). Components read roles only. */

/* Popular Persian web fonts, all local in assets/fonts: Dana (Persian digits) for the card skin,
   IRANYekan for the specimen skin, Kalameh for the poster skin. */
@font-face { font-family: "Dana"; src: url("../fonts/dana/dana-fanum-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dana"; src: url("../fonts/dana/dana-fanum-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Dana"; src: url("../fonts/dana/dana-fanum-demibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Dana"; src: url("../fonts/dana/dana-fanum-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Dana"; src: url("../fonts/dana/dana-fanum-black.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "IRANYekan"; src: url("../fonts/iranyekan/iranyekanweblight.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IRANYekan"; src: url("../fonts/iranyekan/iranyekanwebregular.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "IRANYekan"; src: url("../fonts/iranyekan/iranyekanwebbold.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Kalameh"; src: url("../fonts/kalameh/kalameh-regular.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Kalameh"; src: url("../fonts/kalameh/kalameh-bold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Kalameh"; src: url("../fonts/kalameh/kalameh-black.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }

:root {
  /* card skin: olive on bone */
  --bg: #ecebe7;
  --surface: #e1dfd9;
  --surface-2: #d6d3cb;
  --ink: #38450f;
  --muted: #5d683a;
  --text: #34362c;      /* body copy: a neutral dark, so headings in --ink stay the colour accent */
  --accent: #38450f;
  --accent-ink: #ecebe7;
  --field-1: #38450f;
  --field-1-ink: #ecebe7;
  --danger: #9c2a14;
  --ok: #38450f;

  --font-display: "Dana", Tahoma, sans-serif;
  --font-text: "Dana", Tahoma, sans-serif;
  --display-weight: 700;
  --display-track: 0;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3rem, 1rem + 7.4vw, 8.5rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 12vw, 12rem);
  --radius: 0px;
  --tab: 12px;          /* the folder-tab chamfer that marks buttons and tabs on the card skin */
  --bar: 64px;          /* height of the top bar */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1b2009;
  --surface: #252b0f;
  --surface-2: #2f3615;
  --ink: #e6e5dc;
  --muted: #b9bc9f;
  --text: #d2d1c6;
  --accent: #dfe3b8;
  --accent-ink: #1b2009;
  --field-1: #0f1204;
  --field-1-ink: #e6e5dc;
  --danger: #f08a6c;
  color-scheme: dark;
}

/* specimen skin: near-white, mint and pink fields, deep-green action */
body[data-skin="specimen"] {
  --bg: #f8f8f8;
  --surface: #eeeeee;
  --surface-2: #e4e4e4;
  --ink: #0a0a0a;
  --muted: #5c5c5c;
  --text: #3a3a3a;
  --accent: #1f6b3a;
  --accent-ink: #ffffff;
  --field-1: #c3edce; --field-1-ink: #0a0a0a;
  --field-2: #f8c7c9; --field-2-ink: #0a0a0a;
  --field-3: #ffffff; --field-3-ink: #0a0a0a;
  --font-display: "IRANYekan", Tahoma, sans-serif;
  --font-text: "IRANYekan", Tahoma, sans-serif;
  --display-weight: 700;
  --display-track: 0;
  --radius: 0px;
  color-scheme: light;
}

/* poster skin: flat chapters at full strength */
body[data-skin="poster"] {
  --bg: #e6e0d2;
  --surface: #dcd5c5;
  --surface-2: #d1c9b6;
  --ink: #1a1a1a;
  --muted: #55514a;
  --text: currentColor;
  --heading: currentColor;
  --accent: #18bc42;
  --accent-ink: #1a1a1a;
  --field-1: #ed4b44; --field-1-ink: #0f0f0f;
  --field-2: #1a1a1a; --field-2-ink: #e6e0d2;
  --field-3: #18bc42; --field-3-ink: #1a1a1a;
  --field-4: #f2c21a; --field-4-ink: #1a1a1a;
  --font-display: "Kalameh", Tahoma, sans-serif;
  --font-text: "Kalameh", Tahoma, sans-serif;
  --display-weight: 900;
  --display-track: 0;
    --radius: 0px;
  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.8;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: calc(var(--bar) + 1rem); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[x-cloak] { display: none !important; }

/* ---------- type ---------- */
h1, h2, h3, h4 { line-height: 1.4; font-family: var(--font-display); font-weight: var(--display-weight); text-wrap: balance; hyphens: none; letter-spacing: var(--display-track); }
h3, h4 { letter-spacing: 0; }
.display { font-size: var(--step-display); line-height: 1.25; }
.head { font-size: var(--step-head); line-height: 1.3; }
.lead { font-size: var(--step-lead); line-height: 1.75; max-width: 42ch; }
.small { font-size: var(--step-small); line-height: 1.75; }
.muted { color: var(--muted); }
p, li, dd, blockquote, td { color: var(--text); }
h1, h2, h3, h4, dt, th, label, legend { color: var(--heading, var(--ink)); }
p { max-width: 62ch; text-wrap: pretty; }

.latin { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }
[data-fit] { display: inline-block; white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); max-width: 1920px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.cover { width: 100%; height: 100%; object-fit: cover; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- icons (Phosphor, controls only) ---------- */
.ph, .ph-bold { font-size: 1.25em; line-height: 1; flex: none; }
[dir="rtl"] .ph-flip { transform: scaleX(-1); }

/* ---------- motion helpers: content stays visible without JavaScript ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(20px); animation: pc-rise var(--t-reveal) var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter[data-reveal] img { transform: scale(1.1); transition: transform 1500ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in { clip-path: inset(0); }
  .js .shutter[data-reveal].is-in img { transform: none; }
}
@keyframes pc-rise { to { opacity: 1; transform: none; } }
.shutter { overflow: hidden; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .drift { animation: pc-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes pc-drift { from { transform: scale(1.08) translateY(-3%); } to { transform: scale(1.08) translateY(3%); } }
  }
}

/* ---------- toast (cart and list feedback) ---------- */
.pc-toast {
  position: fixed; inset-inline: var(--margin); bottom: var(--margin); z-index: 80;
  max-width: 26rem; margin-inline: auto; padding: 0.9rem 1.2rem;
  background: var(--ink); color: var(--bg); font-size: var(--step-small);
  display: flex; align-items: center; gap: 0.6rem;
}