/* Paper Seal: the shared look of the live jayawaham.org pages (2 Nov 2026).
   Source of every rule: the brand book (beta/paper-seal/brand.html) and beta/paper-seal/TYPOGRAPHY.md; tokens and
   patterns copied from the approved betas (beta/paper-seal/index.html, book.html).
   - Shell paper, navy ink, Ink light for captions; copper ONLY for the sun of the mark (never text: 3.07:1 on Shell).
   - Newsreader for every sentence (headlines at opsz 72); Josefin Sans in capitals only (wordmark, labels, buttons);
     IBM Plex Mono for prices, sizes and company facts; Mukta Malar for Tamil titles, Noto Serif Tamil for running Tamil.
   - One surface per screen (Shell); radius 3 px for plates, 999 px for buttons; hairline = 1 px ink at 16%.
   Pages link this file; per-page CSS only adds layout. */

:root {
  --paper: #EFE7D6; --paper-deep: #E4D9C3; --paper-hi: #F7F1E4;
  --ink: #1D2D4C; --ink-soft: #4A5670; --rule: rgba(29,45,76,.16);
  --copper-1: #9A5A2C; --copper-2: #E0A36B; --copper-3: #B8733D;
  --shade: rgba(92,70,38,.26); --lift: rgba(255,255,255,.85);
  --display: "Josefin Sans", "Futura", "Century Gothic", system-ui, sans-serif;
  --body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --tamil: "Mukta Malar", "Noto Sans Tamil", "Latha", sans-serif;
  --tamil-text: "Noto Serif Tamil", "Mukta Malar", serif;
  /* type scale (TYPOGRAPHY.md) */
  --t-display: clamp(2.05rem, 9vw, 3.4rem); --t-head: clamp(1.7rem, 7.4vw, 2.4rem); --t-sub: clamp(1.3rem, 4.4vw, 1.6rem);
  --t-body: 1.06rem; --t-label: .68rem; --t-fact: .8rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
/* the page's own top edge is Shell too: newer Safari tints its bar from the page, not the meta tag */
html { background: var(--paper); }
html, body { margin: 0; }
body {
  background-color: var(--paper);
  background-image: url("/assets/paper-seal/grain-paper.webp"), url("/assets/paper-seal/grain-fibre.webp");
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-soft); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--paper); }

/* letterpress: ink sits slightly into the paper */
.press { text-shadow: 0 1px 0 var(--lift), 0 -.5px 0 rgba(0,0,0,.16); }

/* ---------- headlines: Newsreader at its display optical size, roman; one italic turn at most ---------- */
.ps-h1, .ps-h2, .ps-statement {
  font-family: var(--body); font-weight: 400; font-variation-settings: "opsz" 72; font-optical-sizing: auto;
  letter-spacing: -.008em; line-height: 1.1; text-wrap: balance; text-transform: none; margin: 0; color: var(--ink);
}
.ps-h1 { font-size: var(--t-display); }
.ps-h2 { font-size: var(--t-head); }
.ps-statement { font-size: var(--t-head); line-height: 1.18; }
.ps-h1 em, .ps-h2 em, .ps-statement em { font-style: italic; }

/* ---------- capitals: Josefin Sans, labels / buttons / the wordmark ---------- */
.ps-label { font: 600 var(--t-label)/1.3 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.ps-label a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.ps-label a:hover { color: var(--ink); border-color: var(--ink); }
.ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 24px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 .74rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
}
.ps-btn:hover { color: var(--paper); background: #2A3D63; }
.ps-btn.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ps-btn.ghost:hover { background: var(--paper-deep); color: var(--ink); }

/* ---------- facts: IBM Plex Mono ---------- */
.ps-mono { font: 400 var(--t-fact)/1.5 var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- the mark (brand book ch. 01-02): reproduced from the symbol, never by eye ---------- */
.raised { filter: drop-shadow(-1.1px -1.1px 0 var(--lift)) drop-shadow(1.4px 1.6px 1px var(--shade)); }
.ps-mark { display: block; overflow: visible; }
.roll-b { animation: ps-roll 9s linear infinite; }
.roll-f { animation: ps-roll 6.5s linear infinite reverse; }
@keyframes ps-roll { from { transform: translateX(0); } to { transform: translateX(-100px); } }

/* the lockup: the mark, with the spaced wordmark centred under it at 3.5x the mark's width (brand book ch. 01) */
.ps-lockup { display: inline-grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.ps-lockup:hover { color: var(--ink); }
.ps-lockup .ps-mark { width: 56px; height: 56px; }
.ps-lockup .ps-word { width: 196px; text-align: center; }   /* 3.5x the mark */
.ps-word {
  font: 400 1rem/1 var(--display); letter-spacing: .4em; margin-right: -.4em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.ps-word.big { font-weight: 300; font-size: clamp(2.1rem, 9vw, 4.2rem); letter-spacing: .42em; margin-right: -.42em; }

/* the site top: a title page. Lockup, then the page's own title, centred on the paper. */
.ps-top { padding: calc(32px + env(safe-area-inset-top, 0px)) var(--gutter) 40px; text-align: center; }
.ps-top .in { max-width: 720px; margin: 0 auto; display: grid; justify-items: center; gap: 0; }
.ps-top .ps-lockup { margin-bottom: 40px; }
.ps-top .ps-label { margin: 0 0 14px; }
.ps-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------- the company footer (search "jwco"): the About facts, on plain Shell ---------- */
.jwco { background: none; color: var(--ink); padding: 48px var(--gutter) calc(56px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule); font: 400 1rem/1.6 var(--body); }
.jwco .in { max-width: 720px; margin: 0 auto; }
.jwco h2 { margin: 0 0 14px; font: 600 var(--t-label)/1.3 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.jwco p { margin: 0 0 20px; max-width: 58ch; }
.jwco strong { font-weight: 500; }
.jwco a { color: var(--ink); }
.jwco dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 26px;
  font: 400 var(--t-fact)/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.jwco dt { color: var(--ink-soft); }
.jwco dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.jwco nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.jwco nav a { font: 600 var(--t-label)/1 var(--display); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); padding: 15px 0; }
.jwco nav a:hover { color: var(--ink-soft); }
.jwco nav span { font: 400 .74rem/1 var(--mono); color: var(--ink-soft); padding: 15px 0; }

/* ---------- the legal pages (privacy, shop privacy, data deletion): a title page, then plain reading ---------- */
.jw-legal .jw-top { padding: calc(32px + env(safe-area-inset-top, 0px)) var(--gutter) 36px; text-align: center; }
.jw-legal .jw-top-inner { max-width: 720px; margin: 0 auto; display: grid; justify-items: center; }
.jw-legal .jw-brand { margin-bottom: 40px; }
.jw-legal .jw-top h1 { margin: 0 0 16px; }
.jw-legal .jw-meta { font: 400 var(--t-fact)/1.6 var(--mono); color: var(--ink-soft); }
.jw-legal .jw-meta strong { font-weight: 500; color: var(--ink); }
.jw-legal main { max-width: 720px; margin: 0 auto; padding: 36px var(--gutter) 48px; border-top: 1px solid var(--rule); }
.jw-legal main h2 { font: 400 var(--t-sub)/1.2 var(--body); font-variation-settings: "opsz" 72; letter-spacing: -.005em;
  text-wrap: balance; margin: 48px 0 14px; color: var(--ink); }
.jw-legal main h2:first-of-type { margin-top: 36px; }
.jw-legal main p { margin: 0 0 16px; }
.jw-legal main ul { margin: 0 0 18px; padding-left: 22px; }
.jw-legal main li { margin: 0 0 10px; padding-left: 4px; }
.jw-legal main li::marker { color: var(--ink-soft); }
.jw-legal main strong { font-weight: 600; }
.jw-legal .jw-lead { font: 400 clamp(1.15rem, 3.6vw, 1.3rem)/1.5 var(--body); color: var(--ink-soft); margin-bottom: 8px; text-wrap: pretty; }
/* a quiet panel of deep paper, with a navy rule (copper is for the sun only) */
.jw-legal .jw-callout { background: var(--paper-deep); border-left: 2px solid var(--ink); border-radius: 0 3px 3px 0;
  padding: 16px 20px; margin: 0 0 18px; }
.jw-legal .jw-contact { margin-top: 24px; background: var(--paper-deep); border-radius: 3px; padding: 20px 22px;
  font: 400 .86rem/1.6 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.jw-legal .jw-contact div { margin: 4px 0; }
.jw-legal .jw-contact strong { font-weight: 500; }
.jw-legal footer { max-width: 720px; margin: 0 auto; padding: 22px var(--gutter) calc(56px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  font: 400 .78rem/1.5 var(--mono); color: var(--ink-soft); }
.jw-legal footer a { font: 600 var(--t-label)/1 var(--display); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); padding: 16px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}