/* ============================================================
   weeradach.com — Base & paper substrate
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans-th);
  font-size: var(--t-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The sheet, in two passes. First the uneven inking of the stock: warm through
   the middle, cooler at the trims. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(130% 90% at 26% 8%,  rgba(255,243,228,.6), transparent 58%),
    radial-gradient(120% 95% at 88% 92%, rgba(208,192,167,.13), transparent 62%),
    radial-gradient(90%  70% at 50% 50%, rgba(255,250,242,.34), transparent 72%),
    linear-gradient(97deg, rgba(168,155,136,.07) 0 .6%, transparent 5%,
                           transparent 95%, rgba(168,155,136,.07) 99.4%);
}

/* Then the stock itself: flecks, fibre and tooth, and a slow blotchy wash —
   all seamless tiles, multiplied down into the colour underneath. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(253,235,215,.55), rgba(253,235,215,.55)),
    url("../img/tex/paper-flecks.png"),
    url("../img/tex/paper-fibre.png"),
    url("../img/tex/paper-mottle.png");
  background-size: 100% 100%, 640px 640px, 320px 320px, 900px 900px;
  background-repeat: no-repeat, repeat, repeat, repeat;
  mix-blend-mode: multiply;
  opacity: .62;
}

body > * { position: relative; z-index: 1; }

/* Loose sheets laid on the spread get their own stock, so the fixed overlay
   behind the content does not have to reach them. */
.paper-stock {
  background-color: var(--paper-warm);
  background-image:
    url("../img/tex/paper-fibre.png"),
    url("../img/tex/paper-mottle.png");
  background-size: 300px 300px, 820px 820px;
  background-blend-mode: multiply, multiply;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* ---- Typography primitives ---- */
.display  { font-family: var(--f-display); font-weight: 900; letter-spacing: -.02em; line-height: .96; }
.display-th { font-family: var(--f-display-th); font-weight: 700; letter-spacing: -.01em; line-height: 1.08; }
.script   { font-family: var(--f-script); font-weight: 600; }
.kicker {
  font-family: var(--f-sans);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.lead { font-size: clamp(1rem,.94rem+.3vw,1.18rem); line-height: 1.75; color: var(--ink-soft); }

/* ---- Hand-drawn orange underline ---- */
.underline-hand { position: relative; display: inline-block; }
.underline-hand::after {
  content: "";
  position: absolute;
  left: -2%;
  bottom: -.22em;
  width: 104%;
  height: .34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C38 3.2 76 2.4 118 4.6c25 1.3 52 3.4 80 1.2' fill='none' stroke='%23EA580C' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform: scaleX(var(--uw, 1));
  transform-origin: left center;
}

/* ---- Buttons ---- */
.btn-read {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--f-sans-th); font-weight: 600; font-size: .95rem;
  color: var(--ink); background: none; border: 0; cursor: pointer; padding: 0;
}
.btn-read .dot {
  width: 2.55rem; height: 1.8rem; border-radius: 999px;
  background: var(--orange); color: #fff;
  display: grid; place-items: center; flex: none;
  transition: transform .4s var(--ease), background .3s;
}
.btn-read:hover .dot { transform: translateX(5px); background: var(--orange-deep); }

/* ---- Torn paper edge (bottom) ---- */
.torn {
  background: var(--paper-warm);
  -webkit-mask-image: var(--torn-mask);
  mask-image: var(--torn-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.paper-card {
  background: var(--paper-warm);
  box-shadow: 0 1px 2px rgba(24,24,24,.08), 0 10px 28px -14px rgba(24,24,24,.3);
}

/* ---- Film / photo treatment ---- */
.photo { position: relative; overflow: hidden; background: var(--paper-deep); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(24,20,16,.04), rgba(24,20,16,.22));
  mix-blend-mode: multiply;
}
a.photo:hover img, .panel:hover .photo img { transform: scale(1.045); }

/* ---- Utility ---- */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Reveal ---- */
.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--ease) var(--d, 0ms),
              transform .75s var(--ease) var(--d, 0ms);
}
.will-reveal.is-in { opacity: 1; transform: none; }
/* The prints carry their own tilt (see .strip li:nth-child in magazine.css),
   so they fade in without touching transform — setting it here, even to none,
   outranks those rules and flattens the pile. */
.strip li.will-reveal { transition: opacity .75s var(--ease) var(--d, 0ms); }

/* =========================================================
   เปลี่ยนหน้าแบบไม่กระพริบ — Cross-document View Transitions
   เบราว์เซอร์ที่รองรับจะค่อย ๆ เฟดระหว่างหน้าให้เอง
   ตัวที่ไม่รองรับก็โหลดหน้าปกติ ไม่ต้องมี JS ไม่ต้องมี framework
   ========================================================= */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .30s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(6px); } }

/* สันนิตยสารกับหัวเล่มอยู่ที่เดิมทุกหน้า ให้มันนิ่งไว้ ไม่ต้องเฟดตาม */
.spine          { view-transition-name: spine; }
.masthead__logo { view-transition-name: brand; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}