/* ============================================================================
   CENTRE CITY MALL — CORE
   Design direction: "PAINTED IN THE BUILDING'S COLOURS"
   ----------------------------------------------------------------------------
   The palette is sampled off the mall's own signage in the owner's photographs
   — the navy of the "CENTRE CITY" letters, the red of the "Mall" script, the
   green roof fascia, and a poui gold. So the site is painted in the building's
   colours, not in invented ones.

   WHAT CHANGED (Jul 31 2026). This file used to open with a note about
   modelling the site on two other mall websites, and it worked exactly as well
   as copying homework usually does: warm cream paper, ONE gold accent, and
   every bold move switched off one at a time — the grain retired, the glows set
   to none, three kicker colours collapsed into one, the reveal cut from 26px to
   10px. All defensible individually. Together they produced a page that was
   competent and completely inert, six sections of eyebrow-heading-grid in a row
   on the same cream ground, with nothing on it that moved.

   The fix is not more decoration. It is:

     1. USE THE PALETTE. Navy, wine and roof green were defined at full strength
        and then only ever spent at 4-9% tints. They are full-bleed grounds now:
        the page runs photo -> cream -> navy -> green -> cream -> wine -> cream,
        so scrolling it feels like walking through rooms rather than down a
        column. Gold stays the single accent on every one of them.
     2. MOTION AS STRUCTURE, NOT SPRINKLES. Reveals travel far enough to read as
        movement, headline lines arrive in sequence, the numerals count, the
        photographs drift against the scroll. All transform/opacity, all off
        under prefers-reduced-motion.
     3. HIERARCHY IN THE GRID. Equal rectangles four across say every item here
        is worth the same glance. The doors are a bento now; the gallery tiles
        at three different sizes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  color-scheme: light;

  /* Ground — warm paper, lightest first */
  --paper:   #FCFBF8;
  --paper-2: #F7F5EE;
  --paper-3: #F1EEE4;
  --paper-4: #E9E5D8;
  --paper-5: #DFD9C9;
  --edge:    #CFC7B4;
  --edge-2:  #B8AE98;

  /* Ink */
  --ink:      #17140F;
  --ink-soft: #3D372E;
  --ink-dim:  #635B4D;
  --ink-mute: #8A8171;

  /* The dark ground. Every full-bleed band on the site is this, and it is the
     single biggest thing the site was missing: a page of cream with nothing
     dark on it has no rhythm, so it reads as unfinished rather than as calm. */
  --ink-band:  #141210;
  --ink-band-2:#0C0B09;

  /* THE COLOURED GROUNDS. Same job as --ink-band, in the mall's own three
     signage colours instead of in black. Each is the sampled hue pushed dark
     enough that white type clears 9:1 on it and a photograph laid on it still
     reads as the brightest thing in the section. Two stops each, because a
     flat fill across 1440px is a wall — every band is a long diagonal. */
  --navy-band:   #1A1C33;
  --navy-band-2: #0F1020;
  --roof-band:   #17403A;
  --roof-band-2: #0D2724;
  --wine-band:   #7A1A2C;
  --wine-band-2: #4E0F1C;

  /* THE GOLD. One accent, used everywhere something matters: the section
     labels, the big numerals, the arrows on the cards, the closing button.
     Two values because gold that is legible on ink is illegible on cream. */
  --gold:      #DDB264;   /* on ink */
  --gold-2:    #C99B45;
  --gold-deep: #9A6608;   /* on cream — 5.1:1 on --paper */
  --gold-wash: #F7EEDC;

  /* Accents sampled off the mall's own signage in the owner's photographs —
     the green roof fascia, the navy of the "CENTRE CITY" letters, and the red
     of the "Mall" script, which is the one that carries the brand. */
  --wine:    #8E1F33;   /* the "Mall" script red, deepened for type */
  --wine-2:  #6B1526;
  --wine-3:  #F7E6E7;
  --roof:    #33645C;   /* roof fascia, sampled #3F625F */
  --roof-2:  #1E4841;
  --roof-3:  #E4EEEA;   /* washed tint for panels */
  --navy:    #252742;   /* the wordmark navy */
  --navy-2:  #171930;
  --poui:    #B0700E;   /* poui gold */
  --poui-2:  #8A560A;
  --poui-3:  #F7EEDC;
  --chac:    var(--wine);
  --chac-2:  var(--wine-2);
  --chac-3:  var(--wine-3);

  /* Semantic */
  --ok:       var(--roof);
  --warn:     var(--poui);
  --stop:     var(--chac);

  --bg:        var(--paper);
  --surface:   #FFFFFF;
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --fg:        var(--ink);
  --fg-dim:    var(--ink-dim);
  --fg-mute:   var(--ink-mute);
  --line:      rgba(23, 20, 15, 0.10);
  --line-2:    rgba(23, 20, 15, 0.20);

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Scale (fluid) */
  --t-xs:   clamp(0.69rem, 0.66rem + 0.14vw, 0.76rem);
  --t-sm:   clamp(0.81rem, 0.78rem + 0.16vw, 0.89rem);
  --t-base: clamp(0.98rem, 0.94rem + 0.20vw, 1.06rem);
  --t-md:   clamp(1.10rem, 1.02rem + 0.36vw, 1.28rem);
  --t-lg:   clamp(1.32rem, 1.16rem + 0.72vw, 1.78rem);
  --t-xl:   clamp(1.70rem, 1.36rem + 1.55vw, 2.75rem);
  --t-2xl:  clamp(2.30rem, 1.60rem + 3.20vw, 4.40rem);
  --t-3xl:  clamp(3.00rem, 1.70rem + 5.90vw, 7.00rem);
  --t-4xl:  clamp(3.10rem, 1.30rem + 7.8vw, 8.20rem);

  /* Space (4/8 rhythm) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1440px;
  --maxw-text: 68ch;

  /* Form */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-full: 999px;

  /* Warm, soft and genuinely deep on the big photographic cards — that lift is
     most of what makes the reference cards look like objects rather than
     rectangles. Still no coloured glows. */
  --shadow-1: 0 1px 2px rgba(35, 28, 18, .06);
  --shadow-2: 0 6px 18px -10px rgba(35, 28, 18, .20);
  --shadow-3: 0 26px 50px -28px rgba(24, 18, 10, .45);
  --shadow-4: 0 40px 80px -40px rgba(24, 18, 10, .60);
  /* A card that lifts should also darken the ground under it, or the lift is
     just a 3px nudge nobody registers. This is the hover shadow. */
  --shadow-lift: 0 34px 60px -30px rgba(24, 18, 10, .55), 0 4px 14px -6px rgba(24, 18, 10, .22);
  --glow-poui: none;
  --glow-roof: none;

  /* Motion.
     --e-back overshoots slightly on the way in. Used only on things that
     ARRIVE (a revealed card, a counted numeral) — never on a hover, where the
     overshoot reads as a wobble. */
  --e-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --e-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --e-back:  cubic-bezier(0.22, 1.12, 0.36, 1);
  --d-fast:  160ms;
  --d-base:  260ms;
  --d-slow:  520ms;
  --d-reveal: 780ms;

  /* Layers */
  --z-base: 0; --z-raise: 10; --z-sticky: 40; --z-nav: 100; --z-overlay: 500; --z-top: 1000;

  --header-h: 74px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible, .band--ink :focus-visible, .band--wine :focus-visible,
.hero :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }

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

/* --------------------------------------------------------------- SCROLLBAR */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--paper-5); border-radius: 99px;
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--edge); }
html { scrollbar-color: var(--paper-5) var(--paper); scrollbar-width: thin; }

/* ------------------------------------------------------------- TYPOGRAPHY -- */
/* Fraunces at opsz 144 and weight 600. The optical-size axis is what gives the
   reference sites their headline: at 144 the thick strokes thicken and the
   hairlines thin right out, so "Shop. Eat. Lime." at 7rem has the stroke
   contrast of a magazine masthead. At the opsz 100 / weight 500 this site was
   using, the same words looked like body copy that had been enlarged.
   WONK stays off — it tilts the l, g and y, which reads as a gimmick. */
.display, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: 'SOFT' 24, 'WONK' 0, 'opsz' 144;
  text-wrap: balance;
}
h4, h5, h6 { font-family: var(--sans); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { text-wrap: pretty; }

/* Section label: a short gold rule, then the label in Fraunces italic. Both
   reference sites open every single section this way — "—— Life at Brentwood",
   "—— Home to Trinidad's favourites" — and it is doing real work. The rule
   anchors the label to the left margin, and the italic serif marks it as a
   caption rather than as a heading, so the heading underneath can be huge
   without the two competing. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-base);
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 24;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-deep);
}
.kicker::before {
  content: '';
  width: 2.2rem; height: 1px;
  background: currentColor;
  opacity: .75;
  flex: none;
}
/* On an ink or wine ground the deep gold goes muddy — it needs the light one. */
.on-dark .kicker,
.kicker--onDark { color: var(--gold); }
/* Retired modifiers. Three kicker colours meant the label above a section told
   you nothing, because it was a different colour every time. They are kept as
   no-ops so the nine pages that still carry them do not have to be re-edited. */
.kicker--poui,
.kicker--roof,
.kicker--plain { color: var(--gold-deep); }
.kicker--bare::before { display: none; }

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: var(--maxw-text);
}

/* Emphasis inside a heading: colour alone, and the colour is the gold. On a
   stacked display headline this is what makes the middle line lift off the
   other two — it is the whole trick behind "Shop. / Dine. / Gather." */
.serif-i,
.hot,
.cool {
  font-style: normal;
  color: var(--gold-deep);
}
.on-dark .serif-i, .on-dark .hot, .on-dark .cool { color: var(--gold); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ------------------------------------------------------------------ LAYOUT */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: 1680px; }
.shell--tight { max-width: 1080px; }

/* Both reference sites run py-24 to py-36 — 6rem to 9rem. That much air is
   what lets a full-bleed dark band read as a deliberate change of scene rather
   than as a stripe. 3rem was too tight for bands to breathe against. */
.section { padding-block: clamp(4rem, 7.5vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.section--flush-top { padding-top: 0; }

/* ------------------------------------------------------------------- BANDS
   A full-bleed change of ground. This is the site's main structural device:
   cream, then ink, then cream, then wine, then a photograph. */
.band { position: relative; padding-block: clamp(4.5rem, 8vw, 7.5rem); }
/* The modifiers carry position/isolation themselves rather than inheriting it
   from .band, so a coloured ground can be dropped straight onto a .section
   without also taking .band's padding. */
.band--ink, .band--wine, .band--navy, .band--roof {
  position: relative;
  isolation: isolate;
  /* The arc below is deliberately wider than the band and hangs off the right
     edge, which on a 390px phone put 55px of blank document to the right of
     every coloured section. `clip` rather than `hidden` because hidden makes
     the band a scroll container and would break any position:sticky inside it;
     clip on one axis leaves the other genuinely visible. */
  overflow-x: clip;
}
.band--ink   { background: linear-gradient(160deg, var(--ink-band), var(--ink-band-2)); color: rgba(255,255,255,.82); }
.band--wine  { background: linear-gradient(160deg, var(--wine-band), var(--wine-band-2)); color: rgba(255,255,255,.86); }
.band--navy  { background: linear-gradient(160deg, var(--navy-band), var(--navy-band-2)); color: rgba(255,255,255,.82); }
.band--roof  { background: linear-gradient(160deg, var(--roof-band), var(--roof-band-2)); color: rgba(255,255,255,.82); }
.band--paper { background: var(--paper-2); border-block: 1px solid var(--line); }
.band--ink h1, .band--ink h2, .band--ink h3,
.band--wine h1, .band--wine h2, .band--wine h3,
.band--navy h1, .band--navy h2, .band--navy h3,
.band--roof h1, .band--roof h2, .band--roof h3 { color: #fff; }
.band--ink .lede, .band--wine .lede,
.band--navy .lede, .band--roof .lede { color: rgba(255,255,255,.76); }

/* THE ARC. The mall's own sign is a swooping "C" over the wordmark, and it is
   the one piece of geometry on the building that is genuinely theirs. Blown up
   past the edge of the band it gives a flat colour field a horizon — the thing
   a 1440px rectangle of one colour otherwise badly lacks — without adding a
   single invented shape. Concentric because the sign's C is a wave of three. */
.band--navy::before,
.band--roof::before,
.band--wine::before {
  content: '';
  position: absolute; z-index: -1;
  right: -14vw; top: 50%;
  width: 62vw; aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      transparent 0 46px,
      rgba(255,255,255,.055) 46px 48px);
  -webkit-mask: radial-gradient(circle at 30% 50%, #000 30%, transparent 72%);
          mask: radial-gradient(circle at 30% 50%, #000 30%, transparent 72%);
  pointer-events: none;
}

/* Grain, but only where film grain belongs — on the dark grounds, where it
   reads as photographic tooth. The retired version put it over the entire
   viewport including the cream, where it just looked like a dirty screen. */
.band--ink::after, .band--navy::after, .band--roof::after, .band--wine::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Anything sitting on a dark ground opts in, and the accent flips with it. */
.on-dark { color: rgba(255,255,255,.82); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

/* THE SEMANTIC TEXT TOKENS FLIP WITH THE GROUND.

   Every dark-on-dark bug this site has produced came from the same shape: a
   component says `color: var(--fg-mute)` — which is correct, it is asking for
   "quiet text" — and --fg-mute is a fixed warm grey that only means "quiet"
   on cream. On a navy band it means invisible. Overriding each component one
   at a time is how you get three of them fixed and a fourth found six weeks
   later, so the token itself flips here and every component follows.

   The reset below is the other half and is not optional: a WHITE card sitting
   inside a dark band inherits these, and quiet-white-on-white is the same bug
   facing the other way. Any new opaque light surface must be added to it. */
.on-dark, .band--ink, .band--wine, .band--navy, .band--roof,
.hero, .closing, .page-head, .pulse, .site-footer {
  --fg-dim:  rgba(255,255,255,.74);
  --fg-mute: rgba(255,255,255,.58);
}
.on-dark .card, .on-dark .media-card, .on-dark .lease-form,
.band--ink .card, .band--wine .card, .band--navy .card, .band--roof .card,
.band--ink .media-card, .band--wine .media-card,
.band--navy .media-card, .band--roof .media-card,
.page-head .card, .page-head .media-card {
  --fg-dim:  var(--ink-dim);
  --fg-mute: var(--ink-mute);
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Section header: label + title + optional action. No dividing rule — the
   whitespace already separates the sections, and the hairline on top of it
   made every section look like a boxed-off panel. */
.sec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
}
/* Section headings run big — 2 to 3.4rem. At --t-xl they were barely larger
   than the paragraph under them, which is why every section looked the same
   weight as every other and the page had no hierarchy to scan. */
/* .yard__title rides along: the two-column "yard" block on the food and events
   pages lost its stylesheet when the schematic drawing in its right-hand half
   was deleted, and its heading and body copy were left running at browser
   defaults — a full-bleed 1290px paragraph directly under a 60ch lede. */
/* Bigger again (Jul 31). At 3.4rem max a section heading was only about 1.6x
   the lede under it, so the eye had nothing to jump between and every section
   scanned at the same weight as every other. At 4.6rem it is a masthead, which
   is the whole point of carrying a display face at opsz 144. */
.sec-head__title,
.yard__title {
  margin-top: var(--s-4);
  font-size: clamp(2.2rem, 4.4vw, 4.6rem);
  letter-spacing: -0.032em;
  line-height: 0.98;
}
.sec-head__sub { margin-top: var(--s-4); color: var(--fg-dim); max-width: 58ch; font-size: var(--t-md); }

/* The yard block: one readable column. Only the prose is measured — the copy
   wrapper itself stays full width so the amenity grid inside the food page's
   version keeps room for two columns. */
.yard__grid { display: grid; gap: var(--s-6); }
.yard__title { max-width: 24ch; line-height: 1.08; letter-spacing: -0.02em; }
.yard__copy > .lede { margin-top: var(--s-4); }
.yard__text {
  margin-top: var(--s-4);
  max-width: var(--maxw-text);
  color: var(--fg-dim);
  line-height: 1.7;
}
.band--ink .sec-head__sub, .band--wine .sec-head__sub, .on-dark .sec-head__sub { color: rgba(255,255,255,.72); }
@media (max-width: 720px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; }
}

/* --------------------------------------------------------------- ATMOSPHERE */
/* Retired. Film grain over the whole viewport, blurred colour circles behind
   every other section, and a blueprint grid under the rest — three separate
   decorative layers, none of which told a visitor anything. They are switched
   off here rather than deleted from the markup so every page loses them at
   once, including the ones that still carry the elements. */
.grain,
.bloom,
.plan-grid { display: none !important; }

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

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: var(--z-top);
  background: var(--poui); color: var(--paper);
  font-weight: 700; font-size: var(--t-sm);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--d-base) var(--e-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

[hidden] { display: none !important; }

/* --------------------------------------------------- SCROLL REVEAL (JS-led) */
/* 10px over 420ms is below the threshold at which a rise reads as motion at
   all — it just looks like the page rendering slightly late. 28px over 780ms
   on an ease that decelerates hard is legible as an arrival while still being
   finished before you get to the words. The delay is capped in JS so a long
   stagger can never leave you waiting on the last card in a row. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--d-reveal) var(--e-out) var(--reveal-delay, 0ms),
    transform var(--d-reveal) var(--e-out) var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* Variants. A page where everything rises from below has one gesture; giving
   the big photographic cards a scale-in and the side rails a slide gives the
   scroll some variety without anybody being able to name what changed. */
.reveal--scale { transform: translateY(20px) scale(.965); }
.reveal--left  { transform: translateX(-30px); }
.reveal--right { transform: translateX(30px); }
.reveal--scale.is-in, .reveal--left.is-in, .reveal--right.is-in { transform: none; }

/* THE RULE SWIPE. The gold hairline in front of every section label draws
   itself in from nothing. It is two pixels of movement and it is the single
   cheapest way to make a section feel like it opened rather than like it was
   always there. */
.kicker::before {
  transform-origin: left center;
  transform: scaleX(var(--kicker-x, 1));
  transition: transform 620ms var(--e-out) 120ms;
}
.reveal:not(.is-in) .kicker::before,
.reveal.kicker:not(.is-in)::before { --kicker-x: 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--scale, .reveal--left, .reveal--right { opacity: 1; transform: none; transition: none; }
  .kicker::before { transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print — a directory people genuinely print. */
@media print {
  .grain, .bloom, .plan-grid, .site-header, .site-footer, .ticker, video { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
}