/* ==========================================================================
   TONG brand layer for Hanoi
   Source: TONG Brand Guidelines R2 (Oct 2026), pp. 22–29, 15–19, 33–35.
   Loaded after Hanoi's compiled CSS. Keep all brand overrides in this file
   so Hanoi updates only need this file + the partials in /partials/tong.
   ========================================================================== */

/* ---------- 1. Fonts (pp. 27–29) ---------------------------------------- */

@font-face {
  font-family: "Libertinus Sans";
  src: url("../fonts/tong/LibertinusSans-Regular.woff2") format("woff2");
  font-weight: 100 900; /* Regular only, used at every weight: no faux bold */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libertinus Sans";
  src: url("../fonts/tong/LibertinusSans-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/tong/Sentient-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/tong/Sentient-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/tong/Sentient-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/tong/Sentient-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/tong/Sentient-Medium.woff2") format("woff2");
  font-weight: 500 900; /* bold in body copy resolves to Medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/tong/Sentient-MediumItalic.woff2") format("woff2");
  font-weight: 500 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Tokens ----------------------------------------------------- */

:root {
  /* Brand palette (p. 22) */
  --tong-cream:  #E8E7E4;
  --tong-gold:   #BEB18E;
  --tong-bronze: #6B5C42;
  --tong-blue:   #B9D2EE;
  --tong-maroon: #471715;
  --tong-olive:  #806600;
  --tong-pink:   #FFD2E2;

  /* Hanoi's three font channels (p. 29) */
  --tong-font-header: "Libertinus Sans", "Gill Sans", "Segoe UI", sans-serif;
  --tong-font-body:   "Sentient", Georgia, "Times New Roman", serif;
  --gh-font-heading: var(--tong-font-header);
  --gh-font-utility: var(--tong-font-header);
  --gh-font-body:    var(--tong-font-body);

  /* Type rhythm */
  --tong-caps-tracking: 0.04em;   /* headline / subline, all caps */
  --tong-label-tracking: 0.08em;  /* annotation, all caps, small */
  --tong-body-weight: 300;        /* Sentient Light (p. 29). Set to 400 if it reads too thin. */
}

/* ---------- 3. Body copy: Sentient Light (p. 29) -------------------------- */

body {
  font-family: var(--tong-font-body);
  font-weight: var(--tong-body-weight);
}

.c-post-content > :where(:not([class]), .u-drop-cap-small, .u-drop-cap-large):not(h1, h2, h3, h4, h5, h6),
.c-post-content li,
.kg-card.kg-callout-card .kg-callout-text,
.kg-card.kg-cta-card .kg-cta-text,
.kg-blockquote-alt {
  font-family: var(--tong-font-body);
  font-weight: var(--tong-body-weight);
  font-variation-settings: normal;
}

.c-post-content > p,
.c-post-content > ul,
.c-post-content > ol {
  font-size: max(18px, 1em);
  line-height: 1.65;
}

.c-post-content strong,
.c-post-content b { font-weight: 500; }

/* Supporting copy (excerpts, descriptions, bios) is Sentient, not the sans */
.c-post-excerpt,
.c-featured-section__excerpt,
.c-archive-hero__description,
.c-section-header__description,
.c-site-newsletter-section__excerpt,
.c-author-card__bio,
.c-post-hero__excerpt,
.c-post-split-header__excerpt,
.c-post-caption,
.c-post-card__caption,
.kg-card figcaption,
.kg-bookmark-description {
  font-family: var(--tong-font-body);
  font-weight: var(--tong-body-weight);
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- 4. Headline / subline: Libertinus Sans Regular, ALL CAPS ------ */

.c-post-headline,
.c-post-hero__title,
.c-post-split-header__title,
.c-featured-section__title,
.c-archive-hero__title,
.c-archive-list__title,
.c-intro-section__content,
.c-site-newsletter-section__title,
.c-post-card__title,
.c-tag-card__title,
.c-section-header__title,
.c-author-card__name,
.c-post-upgrade__title,
.c-post-content > h1,
.c-post-content > h2,
.c-post-content > h3,
.c-post-content > h4,
.c-post-content > h5,
.c-post-content > h6,
.kg-header-card-heading,
.kg-signup-card-heading {
  font-family: var(--tong-font-header);
  font-weight: 400;
  font-variation-settings: normal;
  font-optical-sizing: auto;
  text-transform: uppercase;
  letter-spacing: var(--tong-caps-tracking);
  line-height: 1.15;
}

/* Caps set larger than mixed case: pull Hanoi's display sizes back */
.c-post-headline { font-size: clamp(30px, 2.4vw + 18px, 52px); }
.c-post-card__title { font-size: clamp(17px, 0.4vw + 15px, 20px); line-height: 1.3; }

/* ---------- 5. Annotation: Libertinus Sans Regular, ALL CAPS, small ------- */

.c-post-card__tag,
.c-post-card__meta,
.c-featured-section__tag,
.c-post-meta,
.c-post-tags,
.c-post-hero__tags a,
.c-archive-hero__meta,
.c-archive-list__date,
.c-editors-pick-section__heading,
.c-navigation__link,
.c-footer__copy,
.c-footer__links a,
.c-button,
.c-post-actions__btn,
.c-post-actions__time,
.c-button-media__label,
.kg-btn,
.kg-header-card-button,
.kg-signup-card-button,
.kg-card.kg-cta-card a.kg-cta-button {
  font-family: var(--tong-font-header);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tong-label-tracking);
}

/* ---------- 6. Colour schemes (pp. 22–24) --------------------------------- */
/* Accent is fixed per scheme so link/button text always passes WCAG AA.      */

:root,
:root[data-color-scheme="TONG Cream"] {
  --color-background: var(--tong-cream);
  --color-text: var(--tong-maroon);
  --color-accent: var(--tong-bronze);          /* 5.3:1 on cream */
}
:root[data-color-scheme="TONG Blue"] {
  --color-background: var(--tong-blue);
  --color-text: var(--tong-maroon);            /* 9.7:1 */
  --color-accent: var(--tong-maroon);          /* bronze fails on blue (4.2:1) */
}
:root[data-color-scheme="TONG Pink"] {
  --color-background: var(--tong-pink);
  --color-text: var(--tong-maroon);            /* 11.1:1 */
  --color-accent: var(--tong-bronze);          /* 4.8:1 */
}
:root[data-color-scheme="TONG Maroon"] {
  --color-background: var(--tong-maroon);
  --color-text: var(--tong-cream);             /* 12.1:1 */
  --color-accent: var(--tong-gold);            /* 7.0:1 */
}
:root[data-color-scheme="Custom Colors"] {
  --color-accent: var(--ghost-accent-color);
}

/* Hanoi's dark image/video layouts: maroon and cream instead of black/white */
[data-theme="dark"] {
  --theme-background: var(--tong-maroon);
  --theme-text: var(--tong-cream);
  --color-text: var(--tong-cream);
  --color-background: var(--tong-maroon);
  --color-text-secondary: color-mix(in srgb, var(--tong-cream) 75%, transparent);
  --color-border: color-mix(in srgb, var(--tong-cream) 28%, var(--color-background));
  --color-border-secondary: color-mix(in srgb, var(--tong-cream) 20%, var(--color-background));
  --color-background-secondary: color-mix(in srgb, var(--tong-cream) 8%, var(--color-background));
  --color-background-tertiary: color-mix(in srgb, var(--tong-cream) 12%, var(--color-background));
}

::selection { background: var(--tong-gold); color: var(--tong-maroon); }

/* ---------- 7. Logo (pp. 15–19) ------------------------------------------- */
/* Header uses the Standard logo at its 300px minimum width (p. 17, Option A).
   Clear space = width of the seal on every side (p. 19): the seal is ~8.2% of
   the Standard logo's width, so ~25px at 300px.                               */

.c-tong-logo { display: block; height: auto; }

.c-header-logo .c-tong-logo-link {
  display: inline-block;
  color: inherit;                   /* maroon on cream; cream over image heroes */
  padding: 25px;
  margin: -25px;
}
.c-header-logo .c-tong-logo { width: 300px; max-width: none; margin: 0 auto; }

/* Phones: the Standard logo can't be 300px beside the menu, so the Optimised logo
   is used (p. 17: below 300px wide). Logo left, menu right, one row. */
.c-header-logo .c-tong-logo--optimised { display: none; }
@media (max-width: 47.99em) {
  .c-header__inner { grid-template-columns: auto 1fr; align-items: center; }
  .c-header__brand { justify-self: start; }
  .c-header__controls { justify-self: end; padding: 0; background: none;
    --header-surface-bg: transparent; --header-surface-border: transparent; --header-surface-filter: none; }
  .c-header-logo .c-tong-logo--standard { display: none; }
  .c-header-logo .c-tong-logo--optimised { display: block; width: 150px; }
  .c-header-logo .c-tong-logo-link { padding: 13px; margin: -13px; }   /* clear space = seal width */
  .c-header__menu-button { --btn-background: transparent; background: none; width: 44px; height: 44px; }
  .c-header__menu-button svg { width: 28px; height: 28px; }
}

/* Footer uses the Standard logo at ≥300px (p. 17) */
.c-tong-footer-brand { display: flex; justify-content: center; padding-block: 48px 16px; }
.c-tong-footer-brand a { color: var(--color-text); padding: 26px; }
.c-tong-footer-brand .c-tong-logo--standard { width: 320px; max-width: 100%; }
@media (max-width: 400px) {
  .c-tong-footer-brand .c-tong-logo--standard { display: none; }
  .c-tong-footer-brand .c-tong-logo--optimised { display: block; width: 200px; }
}
@media (min-width: 401px) {
  .c-tong-footer-brand .c-tong-logo--optimised { display: none; }
}

/* ---------- 8. Editorial Emblems (pp. 33–35) ------------------------------ */

.c-tong-emblem { display: inline-block; height: 1em; width: auto; flex: none; vertical-align: middle; }

/* Subject notifier: emblem beside the category label on cards */
.c-post-card__tag,
.c-tag-card__title { display: inline-flex; align-items: center; gap: 0.5em; }
.c-post-card__tag .c-tong-emblem { height: 2.4em; }
.c-tag-card__title .c-tong-emblem { height: 1.6em; }

/* Hero decorative element: tag archive page */
.c-tong-emblem--hero { height: clamp(88px, 8vw, 132px); margin: 0 auto 24px; display: block; }

/* Sign-off: bottom of every post that has an emblem tag */
.c-tong-signoff {
  display: flex;
  justify-content: center;
  margin: 56px auto 8px;
  color: var(--color-text);
}
.c-tong-signoff .c-tong-emblem { height: 72px; }

/* Current nav item: underline instead of bold (Libertinus Sans is Regular only) */
.c-navigation__link--current,
.c-navigation__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

/* ---------- 9. Homepage hero (Hatton display moment) ----------------------- */
/* Content comes from the latest page tagged #homepage-hero (title + feature image).
   PP Hatton Light is loaded only where the hero renders.                        */

@font-face {
  font-family: "PP Hatton";
  src: url("../fonts/tong/PPHatton-Light.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.c-tong-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(92svh, 900px);
  padding: 160px 24px 72px;           /* clears the overlaid header */
  overflow: hidden;
  color: var(--tong-cream);
  background: var(--tong-maroon);
  isolation: isolate;
}
.c-tong-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Soft maroon veil so cream text stays legible on any photo */
.c-tong-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgb(52 16 15 / 0.38), transparent 75%),
    linear-gradient(180deg, rgb(52 16 15 / 0.55) 0%, rgb(52 16 15 / 0.30) 30%, rgb(52 16 15 / 0.30) 65%, rgb(52 16 15 / 0.55) 100%);
}
.c-tong-hero--no-image::after { display: none; }

.c-tong-hero__content { max-width: 1100px; text-align: center; }
.c-tong-hero__title {
  margin: 0;
  font-family: "PP Hatton", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: clamp(30px, 4.6vw + 8px, 78px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: inherit;
  text-shadow: 0 1px 24px rgb(52 16 15 / 0.35);
}
.c-tong-hero__excerpt {
  margin: 28px auto 0;
  max-width: 46ch;
  font-family: var(--tong-font-header);
  font-size: 14px;
  letter-spacing: var(--tong-label-tracking);
  text-transform: uppercase;
}

/* Header sits over the hero, in cream */
body.home-template:has([data-tong-hero]) .c-header {
  position: absolute;
  top: 0; left: 0; width: 100%;
  z-index: var(--z-index-header);
  background-color: transparent;
  color: var(--tong-cream);
}
body.home-template:has([data-tong-hero]) .c-header .c-header__controls {
  --header-surface-bg: rgb(232 231 228 / 0.14);
  --header-surface-border: rgb(232 231 228 / 0.22);
  --header-surface-filter: blur(12px);
  --header-surface-hover: rgb(232 231 228 / 0.18);
  --header-surface-current: rgb(232 231 228 / 0.24);
}
@media (max-width: 47.99em) {
  .c-tong-hero { padding-top: 120px; min-height: 88svh; }
}

.c-tong-hero[data-focus="Upper"] .c-tong-hero__image { object-position: 50% 30%; }
.c-tong-hero[data-focus="Top"]   .c-tong-hero__image { object-position: 50% 8%; }
.c-tong-hero[data-focus="Lower"] .c-tong-hero__image { object-position: 50% 75%; }

/* Hanoi spaces page-flow sections 64px apart; the hero must start at the very top
   so the overlaid cream header sits on the image, not on the cream page. */
.c-page-flow > .c-tong-hero.c-tong-hero:first-child { margin-top: 0; }

/* ---------- 10. Homepage highlights (3 panels under the hero) -------------- */

.c-page-flow > .c-tong-highlights { margin-top: 0; padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px); }
.c-tong-highlights__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  justify-content: center;
}
.c-tong-highlight { display: flex; flex-direction: column; text-align: center; min-width: 0; }
.c-tong-highlight__media {
  display: block;
  aspect-ratio: 4 / 5.8;
  overflow: hidden;
  background: var(--color-background-secondary);
}
.c-tong-highlight__image { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.c-tong-highlight:hover .c-tong-highlight__image { transform: scale(1.025); }
.c-tong-highlight__body { padding: 24px 8px 0; }
.c-tong-highlight__label {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--tong-font-header);
  font-size: 13px;
  letter-spacing: var(--tong-label-tracking);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.c-tong-highlight__label .c-tong-emblem { height: 2.2em; }
.c-tong-highlight__title {
  margin: 14px 0 0;
  font-family: var(--tong-font-header);
  font-weight: 400;
  font-size: clamp(20px, 1.2vw + 12px, 30px);
  line-height: 1.18;
  letter-spacing: var(--tong-caps-tracking);
  text-transform: uppercase;
  text-wrap: balance;
}
.c-tong-highlight__title a { color: inherit; }
.c-tong-highlight__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.c-tong-highlight__excerpt {
  margin: 12px auto 0;
  max-width: 34ch;
  font-family: var(--tong-font-body);
  font-weight: var(--tong-body-weight);
  font-size: 17px;
  line-height: 1.5;
}
@media (max-width: 47.99em) {
  .c-tong-highlights__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* ---------- 11. Homepage "About TONG" (image left, text right) ------------ */

:root { --tong-section-gap: clamp(56px, 7vw, 104px); }
.c-page-flow > .c-tong-about { margin-top: var(--tong-section-gap); }
.c-tong-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: min(80svh, 820px);
}
.c-tong-about__media { position: relative; margin: 0; align-self: stretch; min-height: 420px; background: var(--color-background-secondary); overflow: hidden; }
.c-tong-about__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.c-tong-about__content {
  padding: clamp(48px, 6vw, 112px) clamp(24px, 6vw, 120px);
  text-align: center;
  max-width: 760px;
  justify-self: center;
}
.c-tong-about--no-image { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.c-tong-about__label {
  margin: 0;
  font-family: var(--tong-font-header);
  font-size: 14px;
  letter-spacing: var(--tong-label-tracking);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.c-tong-about__title {
  margin: 20px 0 0;
  font-family: var(--tong-font-header);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw + 12px, 52px);
  line-height: 1.12;
  letter-spacing: var(--tong-caps-tracking);
  text-transform: uppercase;
  text-wrap: balance;
}
.c-tong-about__text {
  margin: 28px auto 0;
  max-width: 40ch;
  font-family: var(--tong-font-body);
  font-weight: var(--tong-body-weight);
  font-size: clamp(18px, 0.4vw + 16px, 22px);
  line-height: 1.55;
}
.c-tong-about__link {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--tong-font-header);
  font-size: 14px;
  letter-spacing: var(--tong-label-tracking);
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
}
@media (max-width: 47.99em) {
  .c-tong-about { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .c-tong-about__media { min-height: 0; aspect-ratio: 4 / 5; }
}

/* Highlights follow the About section */
.c-tong-about + .c-tong-highlights { padding-top: var(--tong-section-gap); }

/* Footer: logo, then Subscribe link, then socials, stacked and centred */
.c-tong-footer-brand { padding-bottom: 0; }
.c-footer__main { gap: 24px; }
.c-footer__social .c-social-links__link svg { width: 22px; height: 22px; }

/* ==========================================================================
   12. Magazine (v1.4): world colours, home feed, notes, article page
   ========================================================================== */

/* World colours — background / text pairings from Guidelines p. 24.
   --accent = colour used on cream (drop cap, dividers, links, buttons). */
[data-tags]                       { --bg: var(--tong-maroon); --fg: var(--tong-cream); --accent: var(--tong-maroon); }
[data-tags~="fashion"]            { --bg: var(--tong-maroon); --fg: var(--tong-cream); --accent: var(--tong-maroon); }
[data-tags~="art"]                { --bg: var(--tong-maroon); --fg: var(--tong-blue);  --accent: var(--tong-maroon); }
[data-tags~="craft"]              { --bg: var(--tong-bronze); --fg: var(--tong-cream); --accent: var(--tong-bronze); }
[data-tags~="home"]               { --bg: var(--tong-gold);   --fg: var(--tong-maroon); --accent: var(--tong-maroon); }
[data-tags~="beauty"]             { --bg: var(--tong-pink);   --fg: var(--tong-maroon); --accent: var(--tong-maroon); }
[data-tags~="wellness"]           { --bg: var(--tong-pink);   --fg: var(--tong-bronze); --accent: var(--tong-bronze); }
[data-tags~="food"]               { --bg: var(--tong-olive);  --fg: #F2F1EE;            --accent: var(--tong-olive); } /* lighter cream: 4.87:1 */
[data-tags~="travel"]             { --bg: var(--tong-blue);   --fg: var(--tong-maroon); --accent: var(--tong-maroon); }
[data-tags~="literature"]         { --bg: var(--tong-cream);  --fg: var(--tong-maroon); --accent: var(--tong-maroon); }
.t-note[data-tags]:not([data-tags~="fashion"]):not([data-tags~="art"]):not([data-tags~="craft"]):not([data-tags~="home"]):not([data-tags~="beauty"]):not([data-tags~="wellness"]):not([data-tags~="food"]):not([data-tags~="travel"]):not([data-tags~="literature"]) { --bg: var(--tong-bronze); --fg: var(--tong-cream); }
.t-story--about                   { --bg: var(--tong-cream); --fg: var(--tong-maroon); --entry: #2a1110; }

:root { --tong-ease: cubic-bezier(.22,.61,.36,1); }

/* Hero hands off into the first story */
.c-tong-hero::after { background:
  radial-gradient(ellipse 70% 55% at 50% 52%, rgb(52 16 15 / .38), transparent 75%),
  linear-gradient(180deg, rgb(52 16 15 / .55) 0%, rgb(52 16 15 / .30) 30%, rgb(52 16 15 / .30) 60%, #2a1110 100%); }

/* ---- Story ---- */
.t-feed { background: var(--tong-cream); }
.c-page-flow > .t-feed { margin-top: 0; }
.t-story { position: relative; color: var(--fg); padding-bottom: clamp(72px, 10vw, 140px);
  background: linear-gradient(180deg, var(--prev, var(--bg)) 0, var(--bg) 22svh, var(--bg) 100%); }
.t-story a { color: inherit; }
.t-story__media { position: relative; display: block; height: 92svh; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 50%, rgba(0,0,0,.35) 70%, transparent 86%);
          mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 50%, rgba(0,0,0,.35) 70%, transparent 86%); }
.t-story__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--tong-ease); }
.t-story.is-in .t-story__media img { transform: scale(1); }
.t-story__text { position: relative; z-index: 2; margin-top: -30svh; padding: 0 24px; text-align: center; }
.t-story:not(:has(.t-story__media)) .t-story__text { margin-top: 0; padding-top: clamp(96px, 12vw, 160px); }
.t-story__label { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin: 0;
  font-family: var(--tong-font-header); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 78%, transparent); text-decoration: none; }
.t-story__label .c-tong-emblem { height: 46px; color: var(--fg); }
.t-story__label + .t-story__label { display: none; }   /* one world label */
.t-story__title { margin: 18px auto 0; max-width: 18ch; font-family: var(--tong-font-header); font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em; font-size: clamp(30px, 3.6vw + 10px, 72px); line-height: 1.06; text-wrap: balance; }
.t-story__title a { text-decoration: none; }
.t-story__excerpt { margin: 22px auto 0; max-width: 40ch; font-family: var(--tong-font-body); font-weight: 300;
  font-size: clamp(18px, .5vw + 16px, 22px); line-height: 1.5; }
.t-story__more { display: inline-block; margin-top: 26px; font-family: var(--tong-font-header); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 1px; }

/* Headlines "develop" like ink on washi */
.t-develop { filter: blur(18px); opacity: 0; transform: translateY(14px);
  transition: filter 1.4s var(--tong-ease), opacity 1.4s var(--tong-ease), transform 1.4s var(--tong-ease); }
.is-in .t-develop { filter: blur(0); opacity: 1; transform: none; }
.is-in .t-develop:nth-child(2) { transition-delay: .12s; }
.is-in .t-develop:nth-child(3) { transition-delay: .24s; }
.is-in .t-develop:nth-child(4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .t-develop { filter: none; opacity: 1; transform: none; transition: none; }
  .t-story__media img { transform: none; transition: none; }
}
@media (scripting: none) { .t-develop { filter: none; opacity: 1; transform: none; } }

/* Framed story (#framed) */
.t-story--framed { padding-top: clamp(72px, 9vw, 140px); }
.t-story--framed .t-story__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 110px); align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.t-story--framed .t-story__text { margin-top: 0; }
.t-frame { display: block; background: #f4f1ea; padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) clamp(44px, 5vw, 72px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); transform: rotate(-1.4deg); }
.t-frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Note interlude (#note) */
.t-note { position: relative; overflow: hidden; color: var(--fg); text-align: center;
  padding: clamp(110px, 14vw, 200px) 24px;
  background: linear-gradient(180deg, var(--prev, var(--bg)) 0, var(--bg) 18svh, var(--bg) 100%); }
.t-note__marks { position: absolute; inset: 0; pointer-events: none; opacity: .14; }
.t-note__mark { position: absolute; top: -10%; height: 120%; }
.t-note__mark--l { left: -4%; } .t-note__mark--r { right: -3%; }
.t-note__mark .c-tong-emblem { height: 100%; color: var(--fg); }
.t-note__quote { position: relative; margin: 0 auto; max-width: 24ch; font-family: var(--tong-font-body);
  font-style: italic; font-weight: 300; font-size: clamp(26px, 2.4vw + 12px, 48px); line-height: 1.3; }
.t-note__by { position: relative; margin: 28px 0 0; font-family: var(--tong-font-header); font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

/* Footer receives the last colour and settles into cream */
.c-footer.t-after-feed { margin-top: 0; background: linear-gradient(180deg, var(--prev, var(--tong-cream)) 0, var(--tong-cream) 28svh); }
.c-footer.t-after-feed .c-tong-footer-brand { padding-top: 22svh; }

@media (max-width: 47.99em) {
  .t-story__media { height: 78svh; }
  .t-story__text { margin-top: -20svh; }
  .t-story--framed .t-story__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Article page ---- */
body.post-template:has(.t-open) .c-header { position: absolute; top: 0; left: 0; width: 100%; z-index: var(--z-index-header);
  background: transparent; color: var(--tong-cream); }
body.post-template:has(.t-open:not(:has(.t-story__media))) .c-header { position: relative; color: inherit; }
body.post-template:has(.t-open) .c-header .c-header__controls { --header-surface-bg: rgb(232 231 228 / .14); --header-surface-border: rgb(232 231 228 / .22); }
.c-page-flow--post > .t-open { margin-top: 0; }
.t-open { padding-bottom: 22svh; background: linear-gradient(180deg, var(--bg) 0, var(--bg) 70%, var(--tong-cream) 100%); }
.t-open .t-story__media { height: 96svh;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 50%, rgba(0,0,0,.35) 70%, transparent 86%);
          mask-image: linear-gradient(180deg, #000 0, #000 50%, rgba(0,0,0,.35) 70%, transparent 86%); }
.t-open .t-story__media::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; z-index: 1;
  background: linear-gradient(180deg, rgb(42 17 16 / .55), transparent); }
.t-open .t-story__text { margin-top: -38svh; }
.t-open:not(:has(.t-story__media)) .t-story__text { margin-top: 0; padding-top: 180px; }
.t-open .t-story__title { font-size: clamp(32px, 3vw + 12px, 64px); max-width: 20ch; }
.t-byline { margin: 26px 0 0; font-family: var(--tong-font-header); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.t-byline > span + span::before { content: "·"; margin: 0 .7em; }
.t-byline a { text-decoration: none; }
@media (max-width: 47.99em) { .t-byline__time { display: none; } .t-open .t-story__text { margin-top: -26svh; } }

/* Reading: cream paper, Sentient Light 18px (v1.4: 10% smaller than 20px) */
.c-post-main { background: var(--tong-cream); }
.c-post-content > p, .c-post-content > ul, .c-post-content > ol, .c-post-content li {
  font-family: var(--tong-font-body); font-weight: 300; font-size: 18px; line-height: 1.65; }
.c-post-content a { text-decoration-color: color-mix(in srgb, var(--accent, var(--tong-maroon)) 70%, transparent); }
.c-post-content > p:first-of-type::first-letter { float: left; font-family: "PP Hatton", Georgia, serif; font-weight: 300;
  font-size: 4.6em; line-height: 1; padding: .02em .1em 0 0; margin-top: .04em; color: var(--accent, var(--tong-maroon)); }

/* Pull quote: Ghost's alternative quote style -> full-width band in the world colour */
.c-post-content .kg-blockquote-alt { width: 100vw; max-width: none; margin: 3em calc(50% - 50vw); padding: clamp(64px, 8vw, 120px) 24px;
  background: var(--bg, var(--tong-maroon)); color: var(--fg, var(--tong-cream)); border: 0; text-align: center;
  font-family: var(--tong-font-body); font-style: italic; font-weight: 300; font-size: clamp(24px, 2vw + 12px, 40px); line-height: 1.3; }
[data-tags~="literature"] .kg-blockquote-alt, .t-article[data-tags~="literature"] .kg-blockquote-alt { background: var(--tong-maroon); color: var(--tong-cream); }

/* Full-width images dissolve at the edges */
.c-post-content .kg-image-card.kg-width-full img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }

/* Optional frame: image caption containing #frame */
.c-post-content figure.t-framed { max-width: 520px; margin-inline: auto; }
.c-post-content figure.t-framed img { background: #f4f1ea; padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) clamp(44px, 5vw, 72px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); transform: rotate(1.2deg); }

/* Section divider: Ghost's divider card -> world emblem (swapped in by script) */
.t-divider { display: flex; justify-content: center; margin: 2.6em 0; color: var(--accent, var(--tong-maroon)); }
.t-divider .c-tong-emblem { height: 54px; }

/* "From the maker": Ghost's Product card */
.c-post-content .kg-product-card { width: 100%; }
.c-post-content .kg-product-card-container { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 28px; align-items: center;
  max-width: none; padding: 22px; border-radius: 0; background: transparent; box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--tong-maroon) 22%, transparent); }
.c-post-content .kg-product-card-image { grid-row: 1 / span 4; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; margin: 0; }
.c-post-content .kg-product-card-title-container::before { content: "From the maker"; display: block; margin-bottom: 8px;
  font-family: var(--tong-font-header); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.c-post-content .kg-product-card-title { font-family: var(--tong-font-header); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; font-size: 20px; color: inherit; }
.c-post-content .kg-product-card-description, .c-post-content .kg-product-card-description p { font-family: var(--tong-font-body); font-weight: 300; font-size: 16px; color: inherit; opacity: 1; }
.c-post-content .kg-product-card-rating { display: none; }
.c-post-content .kg-product-card-button { justify-self: start; width: auto; height: auto; padding: 12px 22px; border-radius: 0;
  background: var(--accent, var(--tong-maroon)); color: var(--tong-cream); font-family: var(--tong-font-header); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 47.99em) { .c-post-content .kg-product-card-container { grid-template-columns: 110px minmax(0, 1fr); column-gap: 16px; padding: 14px; } }

/* Sign-off */
.t-signoff { text-align: center; padding: 1em 0 3em; color: var(--accent, var(--tong-maroon)); }
.t-signoff .c-tong-emblem { height: 70px; }
.t-signoff__by { margin: 18px 0 0; font-family: var(--tong-font-header); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tong-maroon); }
.c-tong-signoff { display: none; }

/* Next in The Page */
.t-next { background: var(--tong-cream); }
.t-next__kicker { margin: 0; padding: 0 0 14px; text-align: center; font-family: var(--tong-font-header); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tong-maroon); }

/* v1.4 fixes: pull-quote measure; maker card layout (beats Hanoi + Ghost card CSS) */
.c-post-content .kg-blockquote-alt { padding-inline: max(24px, calc(50vw - 460px)); text-wrap: balance; }
.c-post-content .kg-product-card .kg-product-card-container {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "img title" "img desc" "img btn"; column-gap: 28px; row-gap: 10px; align-items: start;
  padding: 22px; border-radius: 0; background: transparent; color: var(--tong-maroon);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tong-maroon) 22%, transparent); border: 0; }
.c-post-content .kg-product-card .kg-product-card-image { grid-area: img; grid-row: auto; align-self: stretch; height: 100%; min-height: 200px; }
.c-post-content .kg-product-card .kg-product-card-title-container { grid-area: title; display: block; }
.c-post-content .kg-product-card .kg-product-card-description { grid-area: desc; }
.c-post-content .kg-product-card .kg-product-card-description * { font-family: var(--tong-font-body); font-weight: 300; font-size: 16px; line-height: 1.5; font-variation-settings: normal; }
.c-post-content .kg-product-card h4.kg-product-card-title { font-family: var(--tong-font-header); font-weight: 400; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; }
.c-post-content .kg-product-card .kg-product-card-button { grid-area: btn; align-self: end; justify-self: start; width: auto;
  --btn-background: var(--accent, var(--tong-maroon)); --btn-border: var(--accent, var(--tong-maroon)); --btn-text: var(--tong-cream);
  font-family: var(--tong-font-header); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border-radius: 0; padding: 12px 22px; }
[data-tags~="home"] .kg-product-card-button, [data-tags~="beauty"] .kg-product-card-button, [data-tags~="travel"] .kg-product-card-button,
[data-tags~="literature"] .kg-product-card-button { --btn-text: var(--tong-cream); }
@media (max-width: 47.99em) {
  .c-post-content .kg-product-card .kg-product-card-container { grid-template-columns: 110px minmax(0, 1fr); column-gap: 16px; padding: 14px; }
}

/* v1.4 fixes: drop cap via initial-letter where supported; no sideways scroll from full-bleed bands; plain menu icon on phones */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .c-post-content > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0 .12em 0 0; margin: 0;
    -webkit-initial-letter: 3; initial-letter: 3; }
}
html, body { overflow-x: clip; }
@media (max-width: 47.99em) {
  body .c-header .c-header__controls { --header-surface-bg: transparent !important; --header-surface-border: transparent !important; --header-surface-filter: none !important; background: none !important; box-shadow: none !important; backdrop-filter: none !important; }
  body .c-header .c-header__menu-button { --btn-background: transparent !important; --btn-border: transparent !important; background: none !important; color: inherit !important; }
}

/* v1.4.1: note backgrounds use the handwritten marks (four compositions in rotation) */
.t-note__marks { color: var(--fg); opacity: .22; display: none; }
.t-note:nth-of-type(4n+1) .t-note__marks--1,
.t-note:nth-of-type(4n+2) .t-note__marks--2,
.t-note:nth-of-type(4n+3) .t-note__marks--3,
.t-note:nth-of-type(4n+4) .t-note__marks--4 { display: block; }
.t-mark { position: absolute; width: auto; overflow: visible; }
.t-mark use { fill: none; stroke: currentColor; stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; }

/* ==========================================================================
   13. v1.4.4 — Design world, About page (layout A "The Letter")
   ========================================================================== */
[data-tags~="design"]             { --bg: var(--tong-blue);   --fg: var(--tong-maroon); --accent: var(--tong-maroon); }
.t-note[data-tags~="design"]      { --bg: var(--tong-blue);   --fg: var(--tong-maroon); }

/* About: 120px from header to label on desktop, 64px on phones */
.c-page-flow > .t-about { margin-top: 0; }
.t-about { padding: 120px 24px 0; color: var(--tong-maroon); }
.t-about__head { text-align: center; }
.t-about__label { margin: 0; font-family: var(--tong-font-header); font-size: 13px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--tong-bronze); }
.t-about__title { margin: 20px auto 0; max-width: 22ch; font-family: var(--tong-font-header); font-weight: 400;
  font-size: clamp(30px, 2.4vw + 12px, 46px); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; text-wrap: balance; }
.t-about__hero { margin: 64px auto 0; max-width: 1000px; }
.t-about__hero img { display: block; width: 100%; height: auto; }
.t-about__body.c-post-content { max-width: 640px; margin: 96px auto 0; padding: 0;
  font-family: "Sentient", "Noto Serif TC", Georgia, serif; font-weight: 300; font-size: 21px; line-height: 1.7; color: #2a1110; }
.t-about__body.c-post-content > p { margin: 0 0 28px; max-width: none; }
.t-about__body.c-post-content > p:first-of-type::first-letter { float: left; font-family: var(--tong-font-header); font-weight: 400;
  font-size: 92px; line-height: .82; padding: 8px 14px 0 0; margin: 0; color: var(--tong-maroon); initial-letter: normal; }
.t-about-tong { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 72px 0 56px; color: var(--tong-bronze); }
.t-about-tong .t-mark { position: static; height: 150px; width: 90px; }
.t-about-tong span { font-family: "Noto Serif TC", serif; font-weight: 200; font-size: 140px; line-height: 1; color: var(--tong-maroon); }
.t-about-colophon { margin: 96px 0 140px; border-top: 1px solid var(--tong-gold); padding-top: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.t-about-colophon p { margin: 0; font-style: italic; font-size: 20px; line-height: 1.7; color: var(--tong-maroon); }
.t-about-colophon p a { color: inherit; }
.t-about-colophon__btn { display: inline-block; min-height: 44px; box-sizing: border-box; padding: 14px 36px;
  background: var(--tong-maroon); color: var(--tong-cream) !important; font-family: var(--tong-font-header); font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none !important; }
@media (max-width: 47.99em) {
  .t-about { padding-top: 64px; }
  .t-about__hero { margin: 40px -24px 0; }
  .t-about__body.c-post-content { margin-top: 56px; font-size: 17px; }
  .t-about__body.c-post-content > p { margin-bottom: 22px; }
  .t-about__body.c-post-content > p:first-of-type::first-letter { font-size: 70px; padding: 6px 10px 0 0; }
  .t-about-tong { margin: 48px 0 40px; gap: 16px; }
  .t-about-tong .t-mark { height: 100px; width: 60px; }
  .t-about-tong span { font-size: 96px; }
  .t-about-colophon { margin: 64px 0 96px; padding-top: 32px; gap: 28px; }
  .t-about-colophon p { font-size: 17px; }
}

/* ==========================================================================
   14. v1.4.5 — Softer colour changes between sections (eased, oklab, 480px)
   ========================================================================== */
@supports (color: color-mix(in oklab, red, blue)) {
  .t-story, .t-note, .c-footer.t-after-feed { --blend: 480px; --from: var(--prev, var(--bg)); background: linear-gradient(180deg, var(--from) 0, color-mix(in oklab, var(--bg) 1.1%, var(--from)) calc(var(--blend) * 0.0625), color-mix(in oklab, var(--bg) 4.3%, var(--from)) calc(var(--blend) * 0.1250), color-mix(in oklab, var(--bg) 9.2%, var(--from)) calc(var(--blend) * 0.1875), color-mix(in oklab, var(--bg) 15.6%, var(--from)) calc(var(--blend) * 0.2500), color-mix(in oklab, var(--bg) 23.2%, var(--from)) calc(var(--blend) * 0.3125), color-mix(in oklab, var(--bg) 31.6%, var(--from)) calc(var(--blend) * 0.3750), color-mix(in oklab, var(--bg) 40.7%, var(--from)) calc(var(--blend) * 0.4375), color-mix(in oklab, var(--bg) 50.0%, var(--from)) calc(var(--blend) * 0.5000), color-mix(in oklab, var(--bg) 59.3%, var(--from)) calc(var(--blend) * 0.5625), color-mix(in oklab, var(--bg) 68.4%, var(--from)) calc(var(--blend) * 0.6250), color-mix(in oklab, var(--bg) 76.8%, var(--from)) calc(var(--blend) * 0.6875), color-mix(in oklab, var(--bg) 84.4%, var(--from)) calc(var(--blend) * 0.7500), color-mix(in oklab, var(--bg) 90.8%, var(--from)) calc(var(--blend) * 0.8125), color-mix(in oklab, var(--bg) 95.7%, var(--from)) calc(var(--blend) * 0.8750), color-mix(in oklab, var(--bg) 98.9%, var(--from)) calc(var(--blend) * 0.9375), var(--bg) var(--blend), var(--bg) 100%); }
  .c-footer.t-after-feed { --bg: var(--tong-cream); }
  .t-story--about { --blend: 300px; }
}
.t-story.t-story--about:not(:has(.t-story__media)) .t-story__text { padding-top: 320px; }
.t-note { padding-top: 420px; }
.t-story--framed { padding-top: 360px; }
.c-footer.t-after-feed .c-tong-footer-brand { padding-top: 400px; }
@media (max-width: 47.99em) {
  .t-story, .t-note, .c-footer.t-after-feed { --blend: 300px; }
  .t-story--about { --blend: 220px; }
  .t-story.t-story--about:not(:has(.t-story__media)) .t-story__text { padding-top: 240px; }
  .t-note { padding-top: 280px; }
  .t-story--framed { padding-top: 240px; }
  .c-footer.t-after-feed .c-tong-footer-brand { padding-top: 260px; }
}

/* ==========================================================================
   15. v1.4.6 — The Page (layout A "Contents")
   ========================================================================== */
.c-page-flow > .t-contents { margin-top: 0; }
.t-contents { max-width: 1120px; margin: 0 auto; box-sizing: border-box; padding: 120px 32px 160px; color: var(--tong-maroon); }
.t-contents__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px;
  padding-bottom: 48px; border-bottom: 1px solid var(--tong-maroon); }
.t-contents__heading { display: flex; flex-direction: column; gap: 16px; }
.t-contents__label { margin: 0; font-family: var(--tong-font-header); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--tong-bronze); }
.t-contents__title { margin: 0; font-family: var(--tong-font-header); font-weight: 400; font-size: clamp(44px, 4vw + 16px, 72px); line-height: 1;
  letter-spacing: .06em; text-transform: uppercase; }
.t-contents__intro { margin: 0; max-width: 36ch; font-family: var(--tong-font-body); font-style: italic; font-weight: 300; font-size: 20px; line-height: 1.55; }
.t-contents__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; counter-reset: tong-story; }
.t-contents__item { counter-increment: tong-story; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding: 48px 0; border-bottom: 1px solid var(--tong-gold); }
.t-contents__no { flex: 0 0 90px; font-family: var(--tong-font-header); font-size: 15px; letter-spacing: .12em; color: var(--tong-bronze); }
.t-contents__no::before { content: "No. " counter(tong-story, decimal-leading-zero); }
.t-contents__text { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.t-contents__world { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-family: var(--tong-font-header); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: inherit; text-decoration: none; }
.t-contents__world .c-tong-emblem { height: 30px; color: var(--tong-maroon); }
.t-contents__world + .t-contents__world { display: none; }
.t-contents__story { margin: 0; font-family: var(--tong-font-header); font-weight: 400; font-size: clamp(28px, 2vw + 14px, 44px); line-height: 1.08;
  letter-spacing: .04em; text-transform: uppercase; }
.t-contents__story a { color: inherit; text-decoration: none; }
.t-contents__story a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.t-contents__excerpt { margin: 0; max-width: 46ch; font-family: var(--tong-font-body); font-weight: 300; font-size: 20px; line-height: 1.5; }
.t-contents__media { flex: 0 0 260px; display: block; }
.t-contents__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 47.99em) {
  .t-contents { padding: 64px 20px 96px; }
  .t-contents__head { padding-bottom: 32px; }
  .t-contents__item { padding: 32px 0; gap: 16px 20px; align-items: flex-start; }
  .t-contents__no { flex-basis: 100%; }
  .t-contents__text { flex: 1 1 0; }
  .t-contents__media { flex: 0 0 34%; order: 2; }
  .t-contents__excerpt { font-size: 17px; }
}

/* ==========================================================================
   15. v1.4.8 — Film interlude (#film) on the homepage
   ========================================================================== */
.t-film { --bg: #1E1B17; --fg: var(--tong-cream); position: relative; color: var(--fg); text-align: center;
  padding: 420px clamp(20px, 6vw, 96px) clamp(120px, 12vw, 200px);
  background: linear-gradient(180deg, var(--prev, var(--bg)) 0, var(--bg) 18svh, var(--bg) 100%); }
@supports (color: color-mix(in oklab, red, blue)) {
  .t-film { --blend: 480px; --from: var(--prev, var(--bg)); background: linear-gradient(180deg, var(--from) 0, color-mix(in oklab, var(--bg) 15.6%, var(--from)) calc(var(--blend) * 0.25), color-mix(in oklab, var(--bg) 50%, var(--from)) calc(var(--blend) * 0.5), color-mix(in oklab, var(--bg) 84.4%, var(--from)) calc(var(--blend) * 0.75), var(--bg) var(--blend), var(--bg) 100%); }
}
.t-film__label { margin: 0 0 36px; font-family: var(--tong-font-header); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.t-film__frame { position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; cursor: pointer; }
.t-film__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 45%); transition: opacity .3s; }
.t-film__frame:hover::after, .t-film__frame:focus-visible::after { opacity: .6; }
.t-film__frame:focus-visible { outline: 1px solid var(--fg); outline-offset: 6px; }
.t-film__play { position: absolute; z-index: 1; right: 28px; bottom: 28px; width: 64px; height: 64px; border: 1px solid rgba(232,231,228,.9); border-radius: 50%; }
.t-film__play::before { content: ""; position: absolute; left: 25px; top: 20px; border-left: 18px solid var(--fg); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.t-film.is-playing .t-film__frame { cursor: auto; }
.t-film.is-playing .t-film__frame::after { display: none; }
.t-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.t-film__title { margin: 44px 0 10px; font-family: var(--tong-font-header); font-weight: 400; font-size: clamp(22px, 1.2vw + 14px, 30px); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.t-film__line { margin: 0 0 22px; font-family: var(--tong-font-body); font-style: italic; font-weight: 300; font-size: 19px; opacity: .85; }
.t-film__links { font-family: var(--tong-font-header); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.t-film__links a { margin: 0 14px; padding-bottom: 3px; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(232,231,228,.5); }
.t-film__links a:hover { border-bottom-color: var(--fg); }
@media (max-width: 47.99em) {
  .t-film { --blend: 300px; padding-top: 280px; }
  .t-film__play { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .t-film__play::before { left: 20px; top: 15px; border-left-width: 15px; border-top-width: 11px; border-bottom-width: 11px; }
  .t-film__links a { display: inline-block; margin: 6px 10px; }
}

/* ==========================================================================
   16. v1.4.9 — Story straight after a film interlude: image starts below the
       dark-to-colour blend, with a shorter top fade
   ========================================================================== */
.t-film + .t-story:has(.t-story__media) { padding-top: 300px; }
.t-film + .t-story .t-story__media {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 66%, rgba(0,0,0,.4) 80%, transparent 94%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 66%, rgba(0,0,0,.4) 80%, transparent 94%); }
@media (max-width: 47.99em) {
  .t-film + .t-story:has(.t-story__media) { padding-top: 200px; }
}

/* ==========================================================================
   17. v1.5.0 — Story text: justified on tablet/desktop, left-aligned on phones
   ========================================================================== */
.c-post-content > p { text-wrap: pretty; }
@media (min-width: 48em) {
  .c-post-content > p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
}

/* ===== Sign-up (v1.5.1) — replaces Portal's sign-up screen ===== */
.t-su[hidden] { display: none; }
.t-su { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(20, 14, 11, .72); opacity: 0; transition: opacity .25s var(--tong-ease, ease); overflow-y: auto; }
.t-su.is-open { opacity: 1; }
html.t-su-open { overflow: hidden; }
.t-su__box { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); width: 100%; max-width: 880px; margin: auto;
  background: #F1EFEA url("../images/tong/signup-paper.jpg") center / cover; color: #2E2521; box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
  transform: translateY(12px); transition: transform .3s var(--tong-ease, ease); }
.t-su.is-open .t-su__box { transform: none; }
.t-su__art { position: relative; min-height: 520px; background: #0d0b09 url("../images/tong/signup-lily.jpg") center / cover; }
.t-su__line { position: absolute; left: 28px; right: 28px; bottom: 28px; margin: 0; max-width: 22ch;
  font-family: var(--tong-font-body); font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.45; color: #EDEBE6; }
.t-su__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; color: var(--tong-bronze); cursor: pointer; }
.t-su__close svg { width: 18px; height: 18px; }
.t-su__close:focus-visible, .t-su__btn:focus-visible, .t-su__fine a:focus-visible { outline: 2px solid var(--tong-bronze); outline-offset: 3px; }
.t-su__panel { padding: 56px 52px 40px; min-width: 0; display: flex; flex-direction: column; }
.t-su__logo { width: 96px; color: var(--tong-maroon); margin-bottom: 34px; }
.t-su__logo svg { display: block; width: 100%; height: auto; }
.t-su__h { margin: 0 0 14px; font-family: var(--tong-font-body); font-weight: 300; font-size: 30px; line-height: 1.22; letter-spacing: 0;
  text-transform: none; color: var(--tong-maroon); text-wrap: balance; }
.t-su__sub { margin: 0 0 30px; max-width: 36ch; font-family: var(--tong-font-body); font-weight: 300; font-size: 16px; line-height: 1.6; color: #2E2521; }
.t-su__form { display: grid; gap: 22px; margin: 0; }
.t-su__field { display: grid; gap: 6px; }
.t-su__field label { font-family: var(--tong-font-header); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--tong-bronze); }
.t-su__field input { width: 100%; margin: 0; padding: 8px 0 10px; border: 0; border-bottom: 1px solid #C9C0AE; border-radius: 0; background: transparent;
  box-shadow: none; font-family: var(--tong-font-body); font-weight: 300; font-size: 18px; color: #2E2521; outline: none; transition: border-color .2s; -webkit-appearance: none; appearance: none; }
.t-su__field input::placeholder { color: #A99F8C; font-style: italic; opacity: 1; }
.t-su__field input:focus { border-bottom-color: var(--tong-maroon); }
.t-su__form.error .t-su__field input[type="email"] { border-bottom-color: #8A2A1E; }
.t-su__err { display: none; margin: -8px 0 0; font-family: var(--tong-font-body); font-style: italic; font-size: 14px; color: #8A2A1E; }
.t-su__form.error .t-su__err { display: block; }
.t-su__btn { position: relative; margin-top: 10px; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 54px; padding: 18px 20px;
  border: 0; border-radius: 0; background: var(--tong-maroon); color: #F1EFEA; cursor: pointer;
  font-family: var(--tong-font-header); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.t-su__btn:hover { background: #5a1f1c; }
.t-su__dots { display: none; gap: 6px; }
.t-su__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: t-su-pulse 1s infinite; }
.t-su__dots i:nth-child(2) { animation-delay: .15s; } .t-su__dots i:nth-child(3) { animation-delay: .3s; }
.t-su__form.loading .t-su__btn-label { display: none; }
.t-su__form.loading .t-su__dots { display: inline-flex; }
@keyframes t-su-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.t-su__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 22px;
  font-family: var(--tong-font-body); font-weight: 300; font-size: 14px; color: var(--tong-bronze); }
.t-su__fine a { color: var(--tong-maroon); text-decoration: underline; text-underline-offset: 3px; }
.t-su__done { display: none; }
.t-su.is-sent .t-su__ask { display: none; }
.t-su.is-sent .t-su__done { display: block; }
.t-su__done p { margin: 0 0 14px; max-width: 36ch; font-family: var(--tong-font-body); font-weight: 300; font-size: 16px; line-height: 1.65; color: #2E2521; }
.t-su__done .t-su__kicker { font-family: var(--tong-font-header); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--tong-bronze); }
.t-su__done em { font-style: italic; color: var(--tong-maroon); }
.t-su__done .t-su__small { font-size: 14px; color: var(--tong-bronze); }
@media (max-width: 47.99em) {
  .t-su { align-items: flex-start; }
  .t-su__box { grid-template-columns: 1fr; max-width: 420px; }
  .t-su__art { min-height: 170px; background-image: url("../images/tong/signup-lily-m.jpg"); }
  .t-su__line { display: none; }
  .t-su__close { color: #EDEBE6; }
  .t-su__panel { padding: 30px 24px 26px; }
  .t-su__logo { width: 84px; margin-bottom: 22px; }
  .t-su__h { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .t-su, .t-su__box { transition: none; } .t-su__dots i { animation: none; opacity: .7; } }

/* v1.5.3: About drop cap. The floated letter pushed the 4th line past the column in Chrome; use the browser's
   native initial-letter where supported (Chrome, Safari). Firefox keeps the float above. */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .t-about__body.c-post-content > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit;
    padding: 0 .14em 0 0; margin: 0; -webkit-initial-letter: 3; initial-letter: 3; }
}