/* LAT 60 design tokens, shared by posters, booklet and website.
   Extends the 2024 EDI Week look: black ink on paper, Lat's own signature as
   the wordmark, cut-out Kampung Boy figures, colour taken from the cartoon
   mosaic border.

   TYPE SYSTEM. Two faces made from Lat's own lettering, used with restraint:
   they carry the voice, Arial/Helvetica carries the reading.

     Lat Hand (tools/lathand.py): his balloon capitals, all caps.
       Bold    -> headlines (.t-headline)
       Regular -> labels, years, numbers, kickers (.t-label, .t-year)
     Lat Festive (tools/latfestive.py): his greeting script, mixed case.
       Bold    -> greetings and warm display lines (.t-greeting)
       Regular -> handwritten asides, captions (.t-aside)
     Lat Monash (tools/latfestive.py --family monash): his marker script
       from the 2024 "Let's meet at Monash!" lettering. Mixed case, joined.
       -> the Monash/event voice: invitations, "We met at Monash!", sign-offs
       (.t-monash). Optional swashes on t and h: font-feature-settings "swsh",
       only on the last word of a line.
     Arial/Helvetica -> all running text, credits, anything longer than ~12 words.

   WHICH FACE, WHEN (all three are kept; pick by voice, not variety):
     Title / headline, years, big numbers ........ Lat Hand Bold
     Kicker, label, date line, small caps note .... Lat Hand Regular
     Festive greeting (Raya, Deepavali, CNY, Xmas,
       Merdeka / Malaysia Day), warm display line . Lat Festive Bold
     Handwritten aside, caption note, speech ...... Lat Festive Regular
     Monash / event voice: invitation, "We met at
       Monash!", thank-you, sign-off .............. Lat Monash (Bold on posters)
     Paragraphs, captions over ~12 words, credits,
       dates-and-venue, legal, small print ........ Arial/Helvetica
   Rules of thumb:
     - One Lat face leads each layout; a second may appear once as an aside.
       Never all three on one page.
     - Headline in caps -> Lat Hand. Mixed-case phrase -> Festive or Monash:
       Monash when it speaks as Lat to the Monash community, Festive for
       celebration and greetings.
     - Lat Monash looks most like Lat on words built from his letters
       (L M a e h m n o s t); keep its lines short.
     - Swashes (Monash "swsh") only on the last word of a line.

   Discretion:
     - At most one Lat face per text block, and one Festive line per page.
       The cartoons are the star; the lettering is their voice, not
       wallpaper.
     - Never set paragraphs, legal credits, dates-and-venue blocks or
       small print in the Lat faces. Minimum size: 18px screen / 9pt print.
     - Never letter-space, stretch, outline, or fake-bold them. Use the
       Bold files, which thicken Lat's actual strokes.
     - A slight tilt (-3deg..+3deg) or a nudge off the baseline is in
       character: Lat never lettered with a ruler. Don't tilt whole paragraphs.

   Language: English throughout. Malay appears only where Lat wrote it
   himself (inside his cartoons, or quoting his lettering). */

@font-face { font-family: "LAT60 Condensed"; font-weight: 400;
  src: local("HelveticaNeue-Condensed"), local("Helvetica 57 Condensed"), local("Helvetica Neue Condensed"), local("ArialNarrow"), local("Arial Narrow"); }
@font-face { font-family: "LAT60 Condensed"; font-weight: 500;
  src: local("HelveticaNeue-MediumCond"), local("Helvetica 67 Medium Condensed"), local("ArialNarrow"), local("Arial Narrow"); }
@font-face { font-family: "LAT60 Condensed"; font-weight: 600 700;
  src: local("HelveticaNeue-BoldCond"), local("Helvetica 77 Bold Condensed"), local("Helvetica Neue Condensed Bold"), local("ArialNarrow-Bold"), local("Arial Narrow Bold"); }
@font-face {
  font-family: "Lat Hand"; font-weight: 400; font-display: block;
  src: url("fonts/LatHand-Regular.woff2?v=1791953034") format("woff2");
}
@font-face {
  font-family: "Lat Hand"; font-weight: 700; font-display: block;
  src: url("fonts/LatHand-Bold.woff2?v=1791953036") format("woff2");
}
@font-face {
  font-family: "Lat Galeri"; font-weight: 400; font-display: block;
  src: url("fonts/LatGaleri-Regular.woff2?v=1791953038") format("woff2");
}
@font-face {
  font-family: "Lat Monash"; font-weight: 400; font-display: block;
  src: url("fonts/LatMonash-Regular.woff2?v=1791953037") format("woff2");
}
@font-face {
  font-family: "Lat Monash"; font-weight: 700; font-display: block;
  src: url("fonts/LatMonash-Bold.woff2?v=1791953038") format("woff2");
}
@font-face {
  font-family: "Lat Festive"; font-weight: 400; font-display: block;
  src: url("fonts/LatFestive-Regular.woff2?v=1791953035") format("woff2");
}
@font-face {
  font-family: "Lat Festive"; font-weight: 700; font-display: block;
  src: url("fonts/LatFestive-Bold.woff2?v=1791953037") format("woff2");
}

:root {
  /* COLOUR: every value is sampled from Lat's own colour work
     (tools/latcolour.py, review sheet brand/palette-sheet.png). */
  --ink: #161616;
  --paper: #f6f0e2;              /* newsprint cream, carries Lat's line art */

  /* Fields: the flat grounds of his covers and strips. One per piece. */
  --field-sky: #73c6f2;          /* Going Beyond */
  --field-lime: #c2d730;         /* Kampus Astro strip */
  --field-marigold: #ffb814;     /* dance strip */
  --field-teal: #6ccac9;         /* Sekolah strip */
  --field-salmon: #f88c7a;       /* Be Serious! */
  --field-red: #e25b58;          /* Entahlah Mak */
  --field-orange: #e39a59;       /* Lat and Gang */
  --field-sand: #edd07f;         /* Forever Lat */

  /* Paint: accents from his painted covers. */
  --paint-red: #e25945;          /* Lat Gets Lost, Lat was here */
  --paint-deep-red: #971f17;     /* Tioman boat */
  --paint-blue: #1186bc;         /* Tioman sea */
  --paint-deep-teal: #05647c;    /* Tioman */
  --paint-green: #606b3c;        /* Kampung Boy house (watercolour) */
  --paint-earth: #a45f43;        /* Buku Wang Saku, It's a Lat Lat Lat World */
  --paint-brown: #583c2c;        /* Buku Wang Saku, Lat Gets Lost */
  --paint-ochre: #d8bc67;        /* Buku Wang Saku, Lat was here */

  /* legacy names used by existing templates */
  --orange: var(--paint-red);
  --teal: var(--paint-deep-teal);
  --yellow: var(--field-marigold);
  --red: var(--paint-red);
  --sky: var(--field-sky);
  --white: #ffffff;
  --monash-blue: #006dae;

  --font-hand: "Lat Hand", Arial, sans-serif;
  --font-festive: "Lat Festive", "Lat Hand", Arial, sans-serif;
  --font-monash: "Lat Monash", "Lat Festive", "Lat Hand", Arial, sans-serif;
  --font-head: var(--font-hand);
  /* Monash-aligned institutional type, as in the 2024 designs.
     Regular text: Arial (Helvetica where Arial is absent).
     Condensed lines (banner bars, guest block, event lines): the user's
     Helvetica Neue Condensed, by exact face name so no machine can swap
     in a regular-width Helvetica; Arial Narrow where it is not installed. */
  --font-body: Arial, Helvetica, sans-serif;
  --font-cond: "LAT60 Condensed", "Arial Narrow", Arial, sans-serif;
}

/* TEXTURE: his paint surface on flat colour. A field gets a wash "bloom"
   (soft light-and-dark from one of his watercolours, stretched) and paper
   grain (from his printed covers, tiled), both greyscale, blended into the
   colour. --grain-size sets the grain scale; posters set it in page units. */
.lat-field {
  background-color: var(--field, var(--field-marigold));
  background-image: url("textures/grain-be-serious.png?v=1791953039"), var(--bloom, url("textures/bloom-kampung-yellow.webp?v=1793023579"));
  background-size: var(--grain-size, 240px) var(--grain-size, 240px), cover;
  background-position: 0 0, center;
  background-blend-mode: soft-light, soft-light;
}
.lat-field.sky      { --field: var(--field-sky);      --bloom: url("textures/bloom-tioman-sea.webp?v=1793023579"); }
.lat-field.marigold { --field: var(--field-marigold); --bloom: url("textures/bloom-kampung-yellow.webp?v=1793023579"); }
.lat-field.salmon   { --field: var(--field-salmon);   --bloom: url("textures/bloom-cave-wall.webp?v=1793023579"); }
.lat-field.lime     { --field: var(--field-lime);     --bloom: url("textures/bloom-kampung-floor.webp?v=1793023580"); }
.lat-field.teal     { --field: var(--field-teal);     --bloom: url("textures/bloom-tioman-sea.webp?v=1793023579"); }
.lat-field.orange   { --field: var(--field-orange);   --bloom: url("textures/bloom-kampung-floor.webp?v=1793023580"); }
.lat-field.sand     { --field: var(--field-sand);     --bloom: url("textures/bloom-kampung-yellow.webp?v=1793023579"); }
.lat-field.red      { --field: var(--field-red);      --bloom: url("textures/bloom-cave-wall.webp?v=1793023579"); }
/* paper: faint grain from the Forever Lat cover board */
.lat-paper {
  background-color: var(--paper);
  background-image: url("textures/grain-forever-lat.png?v=1791953042");
  background-size: var(--grain-size, 240px);
  background-blend-mode: soft-light;
}

/* roles */
.t-headline { font-family: var(--font-hand); font-weight: 700; line-height: .95; font-synthesis: none; }
.t-label    { font-family: var(--font-hand); font-weight: 400; line-height: 1;   font-synthesis: none; }
.t-year     { font-family: var(--font-hand); font-weight: 700; line-height: .85; font-synthesis: none; }
.t-greeting { font-family: var(--font-festive); font-weight: 700; line-height: 1; font-synthesis: none; }
.t-aside    { font-family: var(--font-festive); font-weight: 400; line-height: 1.1; font-synthesis: none; }
.t-galeri   { font-family: "Lat Galeri", "Lat Hand", sans-serif; font-weight: 400; line-height: 1.1; font-synthesis: none; letter-spacing: .02em; }   /* the Galeri Rumah Lat sign's pen capitals; user 2026-10-14, for "See you at the Monash Shop!" */
.t-monash   { font-family: var(--font-monash); font-weight: 400; line-height: 1.05; font-synthesis: none; }
.t-body     { font-family: var(--font-body); }

/* Lat's own words, kept in his language. */
.lat-says { font-family: var(--font-festive); font-weight: 400; }

/* a hand-lettered word, nudged the way Lat would */
.tilt-l { display: inline-block; transform: rotate(-2.5deg); }
.tilt-r { display: inline-block; transform: rotate(2deg); }

.credit {
  font: 500 0.7em/1.2 var(--font-body);
  letter-spacing: .02em;
}