/* Rayhana's website, drawn in Bloom (DESIGN.md): warm paper, watercolour washes, Fraunces Soft Italic for anything
   said to her, Nunito Sans for the rest. Light is her garden by day; dark is the night garden. No scripts. */

:root {
  color-scheme: light dark;

  /* Bloom's tokens */
  --paper: #FBF7EF;
  --card: #FFFDF8;
  --ink: #3E5641;
  --ink-soft: #5D6F61;          /* Bloom's inkSoft (#76887A), deepened so small text passes AA on paper */
  --ink-faint: #76887A;         /* Bloom's inkSoft, for drawings only */
  --sage: #9DB49A;
  --leaf: #84A381;
  --blush: #F2B8B5;
  --rose: #E58E8B;
  --butter: #F4D58D;
  --lilac: #C7B8E0;
  --dew: #9EC3CF;
  --earth: #D9C4A5;
  --dusk: #B4ADC6;
  --glow: #F7E9A6;
  --gold: #E2A94F;
  --sparkle: #E8B45A;
  --lavender: #A996CF;
  --pollen: #B98A3E;
  --water-ink: #5E8F9E;
  --honey: #93672A;             /* the Arabic name: Bloom's gold, deep enough to read on paper */
  --hairline: rgb(62 86 65 / 0.1);
  --shadow: rgb(62 86 65 / 0.07);
  --button: #3E5641;
  --button-hover: #34493A;
  --button-text: #FBF7EF;
  --focus: #3E5641;
  --underline: #9DB49A;
  --code-wash: rgb(242 184 181 / 0.35);

  /* washes: blush, lilac and sage by day */
  --wash-a: #F2B8B5;
  --wash-b: #C7B8E0;
  --wash-c: #9DB49A;
  --wash-sun: #F4D58D;
  --wash-page: 0.55;
  --wash-art: 0.7;
  --art-blush: #F2B8B5;
  --art-butter: #F4D58D;
  --art-lilac: #C7B8E0;
  --art-sage: #9DB49A;
  --art-dew: #9EC3CF;
  --crown-glow: #F4D58D;
  --crown-glow-o: 0.75;

  /* mood stickers (Washi) */
  --st-heavy: #CFC4F2;
  --st-low: #C4DDF3;
  --st-okay: #FBE7A1;
  --st-calm: #BDE6D3;
  --st-joyful: #F7B7C6;
  --st-edge: #FFFFFF;
  --st-face: #3B3A4A;
  --st-shadow: #3E5641;
  --st-shadow-o: 0.16;

  /* the closed journal */
  --cover: #FFFDF8;
  --cover-wash: #9DB49A;
  --page-edge: #F3EEE2;
  --strap: #D98A87;
  --lock: #D9A84E;
  --keyhole: #8A6A2E;
  --forget: #C7B8E0;

  /* the night garden at the foot of every page */
  --night: #1B2420;
  --night-far: #2F4B37;
  --night-dusk: rgb(199 184 224 / 0.38);
  --night-ink: #E9EFE2;
  --night-soft: #B7C4B4;
  --night-line: rgb(255 255 255 / 0.1);

  /* her icon, the arch window (FinalZIcon.swift, light) */
  --ic-wall-top: #C4D3BF;
  --ic-wall-bottom: #AFC3AA;
  --ic-frame: #FBF7EF;
  --ic-frame-edge: #7E9A7C;
  --ic-sky-top: #C9BCE7;
  --ic-sky-mid: #F3C4C2;
  --ic-sky-low: #F8DDA0;
  --ic-hill: #9DB49A;
  --ic-hill-far: #BFCDB8;
  --ic-moon: #FFFDF6;
  --ic-halo: #FFFFFF;
  --ic-halo-o: 0.6;
  --ic-petal: #EE9E9E;
  --ic-petal-edge: #D9787C;
  --ic-leaf: #84A381;
  --ic-stem: #5E7D61;
  --ic-pot: #E3A48F;
  --ic-pot-edge: #BF7A66;
  --ic-under: #FDF3EA;
  --ic-heart: #FFFFFF;
  --ic-sill-glow: #F4D58D;
  --ic-sill-glow-o: 0.8;
  --ic-wash-a: #DCE5D6;
  --ic-wash-a-o: 0.6;
  --ic-wash-b: #8FA98B;
  --ic-wash-b-o: 0.3;
  --ic-shadow-o: 0.14;
  --ic-night: none;
  --ic-tile-edge: transparent;

  /* the sprig of sweet basil */
  --bs-stem: #7E9A7C;
  --bs-edge: #5E7D61;
  --bs-leaf-base: #7C9E77;
  --bs-leaf-tip: #A9C59C;
  --bs-wash: #9DB49A;
  --bs-shine: #FFFFFF;
  --bs-calyx: #8FAA86;
  --bs-flower: #FFFFFF;
  --bs-flower-edge: #B9A9D6;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='%233E5641'%3E%3Cg fill-opacity='0.06'%3E%3Ccircle cx='76' cy='98' r='0.4'/%3E%3Ccircle cx='2' cy='85' r='0.4'/%3E%3Ccircle cx='50' cy='37' r='0.55'/%3E%3Ccircle cx='11' cy='123' r='0.55'/%3E%3Ccircle cx='60' cy='113' r='0.55'/%3E%3Ccircle cx='16' cy='10' r='0.55'/%3E%3Ccircle cx='109' cy='30' r='0.7'/%3E%3Ccircle cx='61' cy='63' r='0.4'/%3E%3Ccircle cx='159' cy='96' r='0.7'/%3E%3Ccircle cx='22' cy='62' r='0.7'/%3E%3Ccircle cx='50' cy='37' r='0.7'/%3E%3Ccircle cx='13' cy='8' r='0.4'/%3E%3Ccircle cx='47' cy='28' r='0.7'/%3E%3Ccircle cx='3' cy='43' r='0.55'/%3E%3Ccircle cx='92' cy='21' r='0.55'/%3E%3Ccircle cx='73' cy='74' r='0.7'/%3E%3Ccircle cx='14' cy='4' r='0.7'/%3E%3Ccircle cx='129' cy='121' r='0.4'/%3E%3Ccircle cx='62' cy='93' r='0.55'/%3E%3Ccircle cx='10' cy='157' r='0.4'/%3E%3Ccircle cx='32' cy='132' r='0.55'/%3E%3Ccircle cx='112' cy='83' r='0.7'/%3E%3Ccircle cx='63' cy='127' r='0.4'/%3E%3Ccircle cx='66' cy='143' r='0.55'/%3E%3Ccircle cx='74' cy='104' r='0.4'/%3E%3Ccircle cx='20' cy='39' r='0.55'/%3E%3Ccircle cx='123' cy='78' r='0.4'/%3E%3Ccircle cx='129' cy='10' r='0.4'/%3E%3C/g%3E%3Cg fill-opacity='0.09'%3E%3Ccircle cx='72' cy='90' r='0.55'/%3E%3Ccircle cx='102' cy='95' r='0.55'/%3E%3Ccircle cx='30' cy='39' r='0.4'/%3E%3Ccircle cx='159' cy='134' r='0.7'/%3E%3Ccircle cx='0' cy='34' r='0.4'/%3E%3Ccircle cx='91' cy='32' r='0.7'/%3E%3Ccircle cx='54' cy='50' r='0.4'/%3E%3Ccircle cx='43' cy='155' r='0.7'/%3E%3Ccircle cx='160' cy='3' r='0.4'/%3E%3Ccircle cx='7' cy='23' r='0.55'/%3E%3Ccircle cx='2' cy='98' r='0.55'/%3E%3Ccircle cx='63' cy='67' r='0.7'/%3E%3Ccircle cx='12' cy='11' r='0.55'/%3E%3Ccircle cx='113' cy='127' r='0.55'/%3E%3Ccircle cx='14' cy='76' r='0.4'/%3E%3Ccircle cx='80' cy='98' r='0.55'/%3E%3Ccircle cx='149' cy='80' r='0.4'/%3E%3Ccircle cx='65' cy='40' r='0.7'/%3E%3Ccircle cx='72' cy='44' r='0.4'/%3E%3Ccircle cx='61' cy='83' r='0.7'/%3E%3Ccircle cx='115' cy='135' r='0.7'/%3E%3Ccircle cx='7' cy='113' r='0.7'/%3E%3Ccircle cx='22' cy='73' r='0.4'/%3E%3Ccircle cx='72' cy='32' r='0.4'/%3E%3Ccircle cx='88' cy='104' r='0.7'/%3E%3Ccircle cx='156' cy='86' r='0.55'/%3E%3Ccircle cx='13' cy='71' r='0.7'/%3E%3Ccircle cx='85' cy='110' r='0.4'/%3E%3C/g%3E%3Cg fill-opacity='0.12'%3E%3Ccircle cx='81' cy='94' r='0.4'/%3E%3Ccircle cx='71' cy='23' r='0.7'/%3E%3Ccircle cx='105' cy='98' r='0.4'/%3E%3Ccircle cx='52' cy='95' r='0.4'/%3E%3Ccircle cx='37' cy='47' r='0.4'/%3E%3Ccircle cx='14' cy='105' r='0.55'/%3E%3Ccircle cx='135' cy='62' r='0.4'/%3E%3Ccircle cx='121' cy='19' r='0.4'/%3E%3Ccircle cx='158' cy='123' r='0.55'/%3E%3Ccircle cx='12' cy='14' r='0.7'/%3E%3Ccircle cx='39' cy='96' r='0.55'/%3E%3Ccircle cx='73' cy='153' r='0.55'/%3E%3Ccircle cx='116' cy='25' r='0.7'/%3E%3Ccircle cx='31' cy='152' r='0.55'/%3E%3Ccircle cx='82' cy='41' r='0.7'/%3E%3Ccircle cx='20' cy='77' r='0.7'/%3E%3Ccircle cx='98' cy='45' r='0.4'/%3E%3Ccircle cx='10' cy='28' r='0.55'/%3E%3Ccircle cx='143' cy='157' r='0.7'/%3E%3Ccircle cx='111' cy='94' r='0.4'/%3E%3Ccircle cx='6' cy='3' r='0.55'/%3E%3Ccircle cx='50' cy='5' r='0.7'/%3E%3Ccircle cx='22' cy='12' r='0.55'/%3E%3Ccircle cx='59' cy='7' r='0.7'/%3E%3Ccircle cx='151' cy='5' r='0.55'/%3E%3Ccircle cx='2' cy='106' r='0.55'/%3E%3Ccircle cx='2' cy='12' r='0.4'/%3E%3Ccircle cx='18' cy='41' r='0.55'/%3E%3Ccircle cx='53' cy='149' r='0.7'/%3E%3Ccircle cx='83' cy='82' r='0.55'/%3E%3Ccircle cx='143' cy='59' r='0.4'/%3E%3Ccircle cx='98' cy='83' r='0.55'/%3E%3Ccircle cx='22' cy='79' r='0.4'/%3E%3Ccircle cx='51' cy='133' r='0.55'/%3E%3Ccircle cx='49' cy='127' r='0.4'/%3E%3Ccircle cx='38' cy='23' r='0.4'/%3E%3Ccircle cx='18' cy='17' r='0.7'/%3E%3Ccircle cx='102' cy='59' r='0.4'/%3E%3Ccircle cx='114' cy='121' r='0.7'/%3E%3Ccircle cx='6' cy='36' r='0.55'/%3E%3Ccircle cx='116' cy='131' r='0.7'/%3E%3Ccircle cx='146' cy='137' r='0.55'/%3E%3Ccircle cx='24' cy='83' r='0.7'/%3E%3Ccircle cx='134' cy='110' r='0.55'/%3E%3C/g%3E%3C/svg%3E");
  --grain-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='%23FFFFFF'%3E%3Cg fill-opacity='0.06'%3E%3Ccircle cx='76' cy='98' r='0.4'/%3E%3Ccircle cx='2' cy='85' r='0.4'/%3E%3Ccircle cx='50' cy='37' r='0.55'/%3E%3Ccircle cx='11' cy='123' r='0.55'/%3E%3Ccircle cx='60' cy='113' r='0.55'/%3E%3Ccircle cx='16' cy='10' r='0.55'/%3E%3Ccircle cx='109' cy='30' r='0.7'/%3E%3Ccircle cx='61' cy='63' r='0.4'/%3E%3Ccircle cx='159' cy='96' r='0.7'/%3E%3Ccircle cx='22' cy='62' r='0.7'/%3E%3Ccircle cx='50' cy='37' r='0.7'/%3E%3Ccircle cx='13' cy='8' r='0.4'/%3E%3Ccircle cx='47' cy='28' r='0.7'/%3E%3Ccircle cx='3' cy='43' r='0.55'/%3E%3Ccircle cx='92' cy='21' r='0.55'/%3E%3Ccircle cx='73' cy='74' r='0.7'/%3E%3Ccircle cx='14' cy='4' r='0.7'/%3E%3Ccircle cx='129' cy='121' r='0.4'/%3E%3Ccircle cx='62' cy='93' r='0.55'/%3E%3Ccircle cx='10' cy='157' r='0.4'/%3E%3Ccircle cx='32' cy='132' r='0.55'/%3E%3Ccircle cx='112' cy='83' r='0.7'/%3E%3Ccircle cx='63' cy='127' r='0.4'/%3E%3Ccircle cx='66' cy='143' r='0.55'/%3E%3Ccircle cx='74' cy='104' r='0.4'/%3E%3Ccircle cx='20' cy='39' r='0.55'/%3E%3Ccircle cx='123' cy='78' r='0.4'/%3E%3Ccircle cx='129' cy='10' r='0.4'/%3E%3C/g%3E%3Cg fill-opacity='0.09'%3E%3Ccircle cx='72' cy='90' r='0.55'/%3E%3Ccircle cx='102' cy='95' r='0.55'/%3E%3Ccircle cx='30' cy='39' r='0.4'/%3E%3Ccircle cx='159' cy='134' r='0.7'/%3E%3Ccircle cx='0' cy='34' r='0.4'/%3E%3Ccircle cx='91' cy='32' r='0.7'/%3E%3Ccircle cx='54' cy='50' r='0.4'/%3E%3Ccircle cx='43' cy='155' r='0.7'/%3E%3Ccircle cx='160' cy='3' r='0.4'/%3E%3Ccircle cx='7' cy='23' r='0.55'/%3E%3Ccircle cx='2' cy='98' r='0.55'/%3E%3Ccircle cx='63' cy='67' r='0.7'/%3E%3Ccircle cx='12' cy='11' r='0.55'/%3E%3Ccircle cx='113' cy='127' r='0.55'/%3E%3Ccircle cx='14' cy='76' r='0.4'/%3E%3Ccircle cx='80' cy='98' r='0.55'/%3E%3Ccircle cx='149' cy='80' r='0.4'/%3E%3Ccircle cx='65' cy='40' r='0.7'/%3E%3Ccircle cx='72' cy='44' r='0.4'/%3E%3Ccircle cx='61' cy='83' r='0.7'/%3E%3Ccircle cx='115' cy='135' r='0.7'/%3E%3Ccircle cx='7' cy='113' r='0.7'/%3E%3Ccircle cx='22' cy='73' r='0.4'/%3E%3Ccircle cx='72' cy='32' r='0.4'/%3E%3Ccircle cx='88' cy='104' r='0.7'/%3E%3Ccircle cx='156' cy='86' r='0.55'/%3E%3Ccircle cx='13' cy='71' r='0.7'/%3E%3Ccircle cx='85' cy='110' r='0.4'/%3E%3C/g%3E%3Cg fill-opacity='0.12'%3E%3Ccircle cx='81' cy='94' r='0.4'/%3E%3Ccircle cx='71' cy='23' r='0.7'/%3E%3Ccircle cx='105' cy='98' r='0.4'/%3E%3Ccircle cx='52' cy='95' r='0.4'/%3E%3Ccircle cx='37' cy='47' r='0.4'/%3E%3Ccircle cx='14' cy='105' r='0.55'/%3E%3Ccircle cx='135' cy='62' r='0.4'/%3E%3Ccircle cx='121' cy='19' r='0.4'/%3E%3Ccircle cx='158' cy='123' r='0.55'/%3E%3Ccircle cx='12' cy='14' r='0.7'/%3E%3Ccircle cx='39' cy='96' r='0.55'/%3E%3Ccircle cx='73' cy='153' r='0.55'/%3E%3Ccircle cx='116' cy='25' r='0.7'/%3E%3Ccircle cx='31' cy='152' r='0.55'/%3E%3Ccircle cx='82' cy='41' r='0.7'/%3E%3Ccircle cx='20' cy='77' r='0.7'/%3E%3Ccircle cx='98' cy='45' r='0.4'/%3E%3Ccircle cx='10' cy='28' r='0.55'/%3E%3Ccircle cx='143' cy='157' r='0.7'/%3E%3Ccircle cx='111' cy='94' r='0.4'/%3E%3Ccircle cx='6' cy='3' r='0.55'/%3E%3Ccircle cx='50' cy='5' r='0.7'/%3E%3Ccircle cx='22' cy='12' r='0.55'/%3E%3Ccircle cx='59' cy='7' r='0.7'/%3E%3Ccircle cx='151' cy='5' r='0.55'/%3E%3Ccircle cx='2' cy='106' r='0.55'/%3E%3Ccircle cx='2' cy='12' r='0.4'/%3E%3Ccircle cx='18' cy='41' r='0.55'/%3E%3Ccircle cx='53' cy='149' r='0.7'/%3E%3Ccircle cx='83' cy='82' r='0.55'/%3E%3Ccircle cx='143' cy='59' r='0.4'/%3E%3Ccircle cx='98' cy='83' r='0.55'/%3E%3Ccircle cx='22' cy='79' r='0.4'/%3E%3Ccircle cx='51' cy='133' r='0.55'/%3E%3Ccircle cx='49' cy='127' r='0.4'/%3E%3Ccircle cx='38' cy='23' r='0.4'/%3E%3Ccircle cx='18' cy='17' r='0.7'/%3E%3Ccircle cx='102' cy='59' r='0.4'/%3E%3Ccircle cx='114' cy='121' r='0.7'/%3E%3Ccircle cx='6' cy='36' r='0.55'/%3E%3Ccircle cx='116' cy='131' r='0.7'/%3E%3Ccircle cx='146' cy='137' r='0.55'/%3E%3Ccircle cx='24' cy='83' r='0.7'/%3E%3Ccircle cx='134' cy='110' r='0.55'/%3E%3C/g%3E%3C/svg%3E");

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "Amiri", "Geeza Pro", "Noto Naskh Arabic", serif;
  --gutter: clamp(20px, 5vw, 48px);
  --night-gap: clamp(72px, 10vw, 128px);
  --dusk-height: clamp(160px, 22vw, 300px);
  --spring: cubic-bezier(0.34, 1.32, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B2420;
    --card: #232F2A;
    --ink: #E9EFE2;
    --ink-soft: #A9B9A8;
    --ink-faint: #8FA08F;
    --sage: #86A487;
    --leaf: #6E9070;
    --blush: #E8A7A6;
    --rose: #EE9E9C;
    --butter: #EFD07E;
    --lilac: #B3A2D8;
    --dew: #86AEBF;
    --earth: #4A4636;
    --dusk: #A9A2BF;
    --lavender: #BFAFE3;
    --water-ink: #86AEBF;
    --honey: #EFD07E;
    --hairline: rgb(255 255 255 / 0.09);
    --shadow: rgb(0 0 0 / 0.35);
    --button: #86A487;
    --button-hover: #97B497;
    --button-text: #17201C;
    --focus: #F7E9A6;
    --underline: #6E9070;
    --code-wash: rgb(232 167 166 / 0.16);

    --wash-a: #35564F;
    --wash-b: #3D3860;
    --wash-c: #2F4B37;
    --wash-sun: #3D3860;
    --wash-page: 0.85;
    --wash-art: 0.9;
    --art-blush: #4E3B47;
    --art-butter: #45432F;
    --art-lilac: #3D3860;
    --art-sage: #2F4B37;
    --art-dew: #35564F;
    --crown-glow: #F7E9A6;
    --crown-glow-o: 0.2;

    --st-heavy: #B4A8E2;
    --st-low: #9CC0E3;
    --st-okay: #E6D28C;
    --st-calm: #98CDB6;
    --st-joyful: #E6A4B6;
    --st-edge: #E6E9DC;
    --st-shadow: #000000;
    --st-shadow-o: 0.5;

    --cover: #2C3B33;
    --cover-wash: #6E9070;
    --page-edge: #E9E4D4;
    --strap: #EE9E9C;
    --forget: #D6CCF0;

    --night: #121915;
    --night-far: #22332A;
    --night-dusk: rgb(61 56 96 / 0.35);
    --night-soft: #AEBCAB;

    --ic-wall-top: #1C2622;
    --ic-wall-bottom: #16201B;
    --ic-frame: #2F3D37;
    --ic-frame-edge: #55705E;
    --ic-sky-top: #232849;
    --ic-sky-mid: #383360;
    --ic-sky-low: #5A4A73;
    --ic-hill: #2B4434;
    --ic-hill-far: #32404A;
    --ic-moon: #F7E9A6;
    --ic-halo: #F7E9A6;
    --ic-halo-o: 0.45;
    --ic-petal: #F2AFB0;
    --ic-petal-edge: #FFD6D8;
    --ic-leaf: #86AC88;
    --ic-stem: #86AC88;
    --ic-pot: #D4A08E;
    --ic-pot-edge: #F1C9B8;
    --ic-under: #2A2A40;
    --ic-heart: #FFE3E6;
    --ic-sill-glow: #8C6E8E;
    --ic-sill-glow-o: 0.55;
    --ic-wash-a: #35564F;
    --ic-wash-a-o: 0.5;
    --ic-wash-b: #2F4B37;
    --ic-wash-b-o: 0.5;
    --ic-shadow-o: 0.4;
    --ic-night: inline;
    --ic-tile-edge: rgb(255 255 255 / 0.1);

    --bs-stem: #7E9A7C;
    --bs-edge: #4E6B53;
    --bs-leaf-base: #5F8463;
    --bs-leaf-tip: #93B892;
    --bs-wash: #2F4B37;
    --bs-shine: #E9EFE2;
    --bs-calyx: #6E9070;
    --bs-flower: #F4F1E6;
    --bs-flower-edge: #B3A2D8;

    --grain: var(--grain-night);
  }
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  overflow-x: hidden;
  overflow-x: clip;
}

/* the sky turns to dusk behind the last of the page, above the night garden */
main {
  flex: 1 0 auto;
  background-image: linear-gradient(to bottom, transparent calc(100% - var(--dusk-height)), var(--night-dusk));
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100;
  color: var(--ink);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px var(--shadow);
}

.skip:focus-visible {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- washes behind the page ---------- */

.washed {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.wash {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: var(--wash-page);
}

.wash--a { fill: var(--wash-a); }
.wash--b { fill: var(--wash-b); }
.wash--c { fill: var(--wash-c); }
.wash--sun { fill: var(--wash-sun); }

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgb(62 86 65 / 0.6);
  transition: transform 0.42s var(--spring), background-color 0.2s ease;
}

.button svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.button:hover {
  background: var(--button-hover);
}

.button:active {
  transform: scale(0.96);
  transition-duration: 0.18s;
}

.button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 999px;
}

/* ---------- the hero: her icon, the name, how to get it ---------- */

.hero {
  padding-block: clamp(56px, 10vw, 112px) clamp(48px, 8vw, 96px);
  text-align: center;
}

.hero .wash--a { width: clamp(340px, 52vw, 680px); left: -14%; top: -18%; }
.hero .wash--sun { width: clamp(240px, 34vw, 460px); right: -8%; top: 4%; }
.hero .wash--b { width: clamp(220px, 30vw, 400px); right: 6%; bottom: -16%; }

.hero-art {
  position: relative;
  isolation: isolate;
  width: clamp(132px, 30vw, 184px);
  aspect-ratio: 1;
  margin: 0 auto clamp(28px, 4vw, 40px);
}

.hero-art .tile {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 22px rgb(62 86 65 / 0.2));
}

.hero-art .sprig {
  position: absolute;
  z-index: -1;
  left: 70%;
  bottom: 2%;
  width: 64%;
  height: auto;
  overflow: visible;
  transform: rotate(15deg);
  transform-origin: 50% 100%;
}

.hero hgroup {
  margin: 0;
}

.arabic {
  margin: 0;
  font-family: var(--arabic);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  line-height: 1.5;
  color: var(--honey);
}

.hero h1 {
  margin: 0;
  font-size: clamp(4.5rem, 2.4rem + 9vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.012em;
  padding-inline: 0.06em;
}

.gloss {
  margin: 0.7em 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  color: var(--ink-soft);
}

.lede {
  max-width: 30ch;
  margin: clamp(24px, 3vw, 32px) auto 0;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.5;
}

.get {
  margin-top: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.beta-note {
  margin: 0;
  max-width: 34ch;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* one gentle arrival when the page opens; still under Reduce Motion */
@media (prefers-reduced-motion: no-preference) {
  .hero-art .tile {
    animation: tile-in 0.9s var(--spring) 0.1s both;
  }

  .hero-art .sprig {
    animation: sprig-in 1.3s cubic-bezier(0.22, 1.2, 0.36, 1) 0.45s both;
  }

  .hero hgroup,
  .hero .lede,
  .hero .get {
    animation: settle 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero hgroup { animation-delay: 0.5s; }
  .hero .lede { animation-delay: 0.62s; }
  .hero .get { animation-delay: 0.74s; }
}

@keyframes tile-in {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: none; }
}

@keyframes sprig-in {
  from { opacity: 0; transform: rotate(2deg) scale(0.6); }
  to { opacity: 1; transform: rotate(15deg); }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- a day with Rayhana ---------- */

.day {
  padding-block: clamp(32px, 6vw, 72px) clamp(16px, 3vw, 40px);
}

.day .wash--c { width: clamp(300px, 44vw, 560px); left: -18%; top: 22%; }
.day .wash--b { width: clamp(300px, 44vw, 560px); right: -20%; top: 52%; }
.day .wash--a { width: clamp(260px, 36vw, 480px); left: -12%; bottom: -4%; }

.day-intro {
  max-width: 36rem;
  margin: 0 auto clamp(16px, 4vw, 40px);
  text-align: center;
}

.day-intro h2 {
  margin: 0 0 0.3em;
  font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  line-height: 1.1;
}

.day-intro p {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--ink-soft);
}

.moments {
  list-style: none;
  margin: 0;
  padding: 0;
}

.moment {
  display: grid;
  gap: 18px;
  max-width: 940px;
  margin-inline: auto;
  padding-block: clamp(28px, 5vw, 52px);
}

.moment-art {
  margin: 0 auto;
  width: 100%;
  max-width: 340px;
}

.moment-art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.when {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

.when svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.moment h3 {
  margin: 0 0 0.4em;
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.375rem);
  font-weight: 450;
  line-height: 1.12;
}

.moment p:not(.when) {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.15rem);
  line-height: 1.68;
}

@media (min-width: 760px) {
  .moment {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
  }

  .moment-art {
    margin: 0;
  }
}

/* ---------- the night garden: the privacy promise and the footer ---------- */

.night {
  position: relative;
  isolation: isolate;
  margin-top: var(--night-gap);
  background-color: var(--night);
  background-image: var(--grain-night);
  color: var(--night-ink);
  overflow-x: clip;
}

.night::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--night-gap);
  background: var(--night-dusk);
  pointer-events: none;
}

.horizon {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: calc(100% - 3px);
  display: block;
  width: 100%;
  height: clamp(48px, 8vw, 112px);
}

.horizon .far { fill: var(--night-far); }
.horizon .near { fill: var(--night); }

.night h2,
.night h3 {
  color: var(--night-ink);
}

.night a {
  text-decoration-color: rgb(247 233 166 / 0.55);
}

.night a:hover {
  text-decoration-color: var(--glow);
}

.night a:focus-visible {
  outline-color: var(--glow);
}

.promise {
  display: grid;
  gap: 20px;
  padding-block: clamp(36px, 6vw, 72px) clamp(36px, 6vw, 64px);
}

.promise h2 {
  margin: 0 0 0.35em;
  font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  line-height: 1.1;
}

.promise p,
.promise li {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.15rem);
  line-height: 1.65;
}

.promise p {
  margin: 0;
}

.promise ul {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 22px 0 26px;
  padding: 0;
}

.promise li {
  position: relative;
  padding-left: 28px;
  color: var(--night-soft);
}

/* each line of the promise carries a firefly */
.promise li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFDF0;
  box-shadow: 0 0 0 3px rgb(247 233 166 / 0.28), 0 0 14px 5px rgb(247 233 166 / 0.4);
}

.moon {
  width: clamp(64px, 9vw, 104px);
  height: auto;
  overflow: visible;
}

@media (min-width: 760px) {
  .promise {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .moon {
    grid-column: 2;
    grid-row: 1;
    margin: 8px clamp(0px, 4vw, 64px) 0 0;
  }
}

.fireflies {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.fireflies span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFFDF0;
  box-shadow: 0 0 10px 5px rgb(247 233 166 / 0.38), 0 0 26px 10px rgb(247 233 166 / 0.14);
  opacity: 0.85;
}

/* fireflies sit only where there are no words: the band's top, its right side, and between the promise and the footer */
.fireflies span:nth-child(1) { left: 78%; top: 34px; }
.fireflies span:nth-child(2) { left: 93%; top: 92px; }
.fireflies span:nth-child(3) { left: 46%; top: 12px; }
.fireflies span:nth-child(4) { left: 84%; bottom: 96px; }
.fireflies span:nth-child(5) { left: 88%; bottom: 190px; }

.night--plain .fireflies span:nth-child(1) { left: 70%; top: 30px; }
.night--plain .fireflies span:nth-child(2) { left: 88%; top: 66px; }
.night--plain .fireflies span:nth-child(3) { left: 52%; top: 12px; }
.night--plain .fireflies span:nth-child(n + 4) { display: none; }

@media (min-width: 760px) {
  .fireflies span:nth-child(1) { left: 4%; top: 20%; }
  .fireflies span:nth-child(2) { left: 93%; top: 58%; }
  .fireflies span:nth-child(3) { left: 60%; top: 8%; }
  .fireflies span:nth-child(4) { left: 72%; top: 74%; bottom: auto; }
  .fireflies span:nth-child(5) { left: 44%; top: 93%; bottom: auto; }

  .night--plain .fireflies span:nth-child(1) { left: 30%; top: 26%; }
  .night--plain .fireflies span:nth-child(2) { left: 56%; top: 70%; }
  .night--plain .fireflies span:nth-child(3) { left: 91%; top: 16%; }
}

@media (prefers-reduced-motion: no-preference) {
  .fireflies span {
    animation: firefly 6s ease-in-out infinite;
  }

  .fireflies span:nth-child(2) { animation-duration: 7.5s; animation-delay: -2s; }
  .fireflies span:nth-child(3) { animation-duration: 5.2s; animation-delay: -4s; }
  .fireflies span:nth-child(4) { animation-duration: 8s; animation-delay: -1s; }
  .fireflies span:nth-child(5) { animation-duration: 6.6s; animation-delay: -3s; }
}

@keyframes firefly {
  0%, 100% { opacity: 0.35; transform: translate(0, 0); }
  50% { opacity: 1; transform: translate(6px, -8px); }
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 40px;
  padding-block: 28px 44px;
  border-top: 1px solid var(--night-line);
}

.night--plain .site-foot {
  border-top: 0;
  padding-top: clamp(40px, 6vw, 64px);
}

.made {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: 1.375rem;
  color: var(--night-ink);
}

.foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  color: var(--night-soft);
  font-size: 0.9375rem;
}

.foot-meta p {
  margin: 0;
}

.foot-meta ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-meta a {
  color: var(--night-ink);
  font-weight: 600;
}

/* ---------- inner pages: the privacy policy and not found ---------- */

.site-head {
  position: relative;
  z-index: 1;
  padding-block: 20px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: 1.5rem;
  color: var(--ink);
  text-decoration: none;
}

.brand svg {
  width: 44px;
  height: 44px;
  flex: none;
  filter: drop-shadow(0 4px 6px rgb(62 86 65 / 0.18));
}

.inner .wash--a { width: clamp(300px, 46vw, 600px); left: -16%; top: -6%; }
.inner .wash--b { width: clamp(260px, 36vw, 480px); right: -14%; top: 30%; }
.inner .wash--c { width: clamp(260px, 36vw, 480px); left: -18%; top: 70%; }

.policy {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 48px);
}

.policy h1 {
  margin: 0;
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4.5rem);
  line-height: 1.02;
}

.policy .effective {
  margin: 0.8em 0 0;
  color: var(--ink-soft);
}

.policy .lead {
  margin: 1.4em 0 0;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  line-height: 1.55;
}

.policy h2 {
  margin: 2.2em 0 0.45em;
  font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
  line-height: 1.15;
}

.policy h3 {
  margin: 0 0 0.35em;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
}

.policy p,
.policy li {
  line-height: 1.7;
}

.policy p {
  margin: 0 0 1em;
}

.policy ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.policy li {
  margin-bottom: 0.45em;
}

.policy li::marker {
  color: var(--sage);
}

.policy code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  padding: 0.12em 0.42em;
  border-radius: 6px;
  background: var(--code-wash);
  white-space: nowrap;
}

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  box-shadow: 0 7px 16px var(--shadow);
}

.in-short {
  margin: 2em 0 0;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.4vw, 32px);
}

.in-short h2 {
  margin: 0 0 0.4em;
}

.in-short ul {
  margin: 0;
}

.in-short li:last-child {
  margin-bottom: 0;
}

.policy .connections {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  display: grid;
  gap: 14px;
}

.connections ul {
  list-style: disc;
}

.connections > li {
  margin: 0;
  padding: clamp(18px, 3vw, 24px) clamp(18px, 3.2vw, 28px);
}

.connections > li > :last-child,
.connections ul:last-child {
  margin-bottom: 0;
}

.lost {
  max-width: 34rem;
  margin-inline: auto;
  padding-block: clamp(40px, 8vw, 96px) clamp(40px, 6vw, 72px);
  text-align: center;
}

.lost svg {
  display: block;
  width: min(240px, 70%);
  height: auto;
  margin: 0 auto 8px;
  overflow: visible;
}

.lost h1 {
  margin: 0 0 0.35em;
  font-size: clamp(2.5rem, 1.9rem + 2.8vw, 3.75rem);
  line-height: 1.08;
}

.lost p {
  margin: 0 auto 1.8em;
  max-width: 30ch;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

/* ---------- drawings ---------- */

.art-wash { opacity: var(--wash-art); }
.art-wash.f-blush { fill: var(--art-blush); }
.art-wash.f-butter { fill: var(--art-butter); }
.art-wash.f-lilac { fill: var(--art-lilac); }
.art-wash.f-sage { fill: var(--art-sage); }
.art-wash.f-dew { fill: var(--art-dew); }
.f-blush { fill: var(--blush); }
.f-butter { fill: var(--butter); }
.f-lilac { fill: var(--lilac); }
.f-sage { fill: var(--sage); }
.f-dew { fill: var(--dew); }
.f-dusk { fill: var(--dusk); }
.f-card { fill: var(--card); }
.f-ink { fill: var(--ink); }
.f-paper { fill: var(--paper); }
.f-gold { fill: var(--gold); }
.gs-blush { stop-color: var(--blush); }
.gs-butter { stop-color: var(--butter); }
.gs-lilac { stop-color: var(--lilac); }
.gs-leaf { stop-color: var(--leaf); }
.stem-thin { fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-linecap: round; }
.sparkle-night { fill: var(--glow); }

.soil { fill: var(--earth); opacity: 0.6; }
.grass { fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.stem { fill: none; stroke: var(--sage); stroke-width: 2.6; stroke-linecap: round; }
.leafy use, .leafy path { fill: url(#g-leaf); stroke: var(--leaf); stroke-width: 1.2; }
.petals-blush use { fill: url(#g-blush); stroke: var(--rose); stroke-width: 1.3; }
.petals-butter use { fill: url(#g-butter); stroke: var(--gold); stroke-width: 1.1; }
.petals-lilac use { fill: url(#g-lilac); stroke: var(--lavender); stroke-width: 1.3; }
.petals-rose use { fill: url(#g-blush); stroke: var(--rose); stroke-width: 1.1; }
.heart-butter { fill: var(--butter); stroke: #D9A74E; stroke-width: 1.1; }
.heart-gold { fill: var(--gold); stroke: #C68E3A; stroke-width: 1; }
.pollen { fill: var(--pollen); opacity: 0.6; }
.drop-full { fill: var(--dew); }
.drop-empty { fill: none; stroke: var(--dew); stroke-width: 1.2; }
.sparkle { fill: var(--sparkle); }
.wing { fill: var(--lilac); stroke: var(--lavender); stroke-width: 1; }
.wing-body { fill: none; stroke: var(--lavender); stroke-width: 1.6; stroke-linecap: round; }

.path-dots { fill: none; stroke: var(--ink-faint); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 0.1 7; opacity: 0.7; }
.sun { fill: var(--butter); stroke: var(--gold); stroke-width: 1.2; }
.sun-rays { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.sun-low { fill: var(--blush); stroke: var(--rose); stroke-width: 1.2; }
.horizon-line { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; stroke-linecap: round; opacity: 0.6; }
.moon-lilac { fill: var(--lavender); }
.moon-butter { fill: var(--butter); }
.moon-glow { fill: var(--glow); }
.halo-glow { fill: var(--glow); opacity: 0.5; }

.st-edge { fill: var(--st-edge); stroke: var(--st-edge); stroke-width: 5; stroke-linejoin: round; }
.st-heavy { fill: var(--st-heavy); }
.st-low { fill: var(--st-low); }
.st-okay { fill: var(--st-okay); }
.st-calm { fill: var(--st-calm); }
.st-joyful { fill: var(--st-joyful); }
.st-shine { fill: #FFFFFF; opacity: 0.55; }
.st-cheek { fill: #F28FA8; opacity: 0.55; }
.st-line { fill: none; stroke: var(--st-face); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.st-dot { fill: var(--st-face); }
.st-tongue { fill: #F07A96; }
.fl-sticker { flood-color: var(--st-shadow); flood-opacity: var(--st-shadow-o); }
.fl-card { flood-color: var(--st-shadow); flood-opacity: calc(var(--st-shadow-o) * 0.5); }

.art-label { font-family: var(--sans); font-size: 12.5px; fill: var(--ink-soft); }
.art-label--on { font-weight: 700; fill: var(--ink); }
.art-voice { font-family: var(--serif); font-style: italic; font-variation-settings: "SOFT" 100; fill: var(--ink); }
.art-count { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 500; fill: var(--ink); }

.cr-vine { fill: none; stroke: var(--sage); stroke-width: 1.3; opacity: 0.9; }
.cr-leaf { fill: var(--leaf); opacity: 0.85; }
.cr-p1 { fill: var(--blush); stroke: var(--rose); stroke-width: 0.6; }
.cr-p2 { fill: var(--lilac); stroke: var(--lavender); stroke-width: 0.6; }
.cr-p3 { fill: #F7C6C4; stroke: var(--rose); stroke-width: 0.6; }
.cr-heart { fill: var(--butter); }
.crown-glow-a { stop-color: var(--crown-glow); stop-opacity: var(--crown-glow-o); }
.crown-glow-b { stop-color: var(--crown-glow); stop-opacity: 0; }

.ask-card { fill: var(--card); stroke: var(--hairline); stroke-width: 1; }
.ask-bar { fill: var(--ink-faint); opacity: 0.3; }
.ask-quiet { fill: var(--paper); stroke: var(--ink-faint); stroke-opacity: 0.35; stroke-width: 1; }
.ask-allow { fill: var(--button); }
.ask-quiet-text { font-family: var(--sans); font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.ask-allow-text { font-family: var(--sans); font-size: 12.5px; font-weight: 700; fill: var(--button-text); }

.jr-pages { fill: var(--page-edge); stroke: var(--hairline); stroke-width: 1; }
.jr-cover { fill: var(--cover); stroke: var(--hairline); stroke-width: 1; }
.jr-wash { fill: var(--cover-wash); opacity: 0.4; }
.jr-spine { fill: var(--cover-wash); opacity: 0.35; }
.jr-label { fill: var(--paper); stroke: var(--hairline); stroke-width: 1; }
.jr-strap { fill: var(--strap); }
.jr-lock { fill: var(--lock); }
.jr-shackle { fill: none; stroke: var(--lock); stroke-width: 2.4; }
.jr-keyhole { fill: var(--keyhole); }
.jr-forget use { fill: var(--forget); }
.jr-forget circle { fill: var(--butter); }

.gl-line { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-linecap: round; }
.gl-sun { fill: var(--butter); stroke: var(--gold); stroke-width: 1.2; }
.gl-rays { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; }
.gl-arch { fill: var(--lilac); stroke: #7E9A7C; stroke-width: 1.3; }
.gl-heart { fill: var(--blush); stroke: var(--rose); stroke-width: 1.2; }

/* her icon */
.ic-s-wall-top { stop-color: var(--ic-wall-top); }
.ic-s-wall-bottom { stop-color: var(--ic-wall-bottom); }
.ic-s-sky-top { stop-color: var(--ic-sky-top); }
.ic-s-sky-mid { stop-color: var(--ic-sky-mid); }
.ic-s-sky-low { stop-color: var(--ic-sky-low); }
.ic-s-petal { stop-color: var(--ic-petal); }
.ic-s-leaf { stop-color: var(--ic-leaf); }
.ic-s-wa { stop-color: var(--ic-wash-a); }
.ic-s-wb { stop-color: var(--ic-wash-b); }
.ic-s-sill { stop-color: var(--ic-sill-glow); }
.ic-s-halo { stop-color: var(--ic-halo); }
.ic-wash-a { fill: url(#ic-wa); opacity: var(--ic-wash-a-o); }
.ic-wash-b { fill: url(#ic-wb); opacity: var(--ic-wash-b-o); }
.ic-night { display: var(--ic-night); }
.ic-firefly { fill: #FFFFFF; }
.ic-firefly-halo { fill: url(#ic-glow-ff); opacity: 0.6; }
.ic-shadow { fill: #000000; opacity: var(--ic-shadow-o); }
.ic-inner-glow { fill: none; stroke: #8C7FC0; stroke-width: 14; stroke-linejoin: round; opacity: 0.22; }
.ic-tile-edge { fill: none; stroke: var(--ic-tile-edge); stroke-width: 1; }
.ic-frame { fill: var(--ic-frame); stroke: var(--ic-frame-edge); stroke-opacity: 0.8; stroke-width: 1.4; }
.ic-sill-glow { fill: url(#ic-glow-sill); opacity: var(--ic-sill-glow-o); }
.ic-star { fill: #FFFFFF; opacity: 0.9; }
.ic-halo { fill: url(#ic-glow-halo); opacity: var(--ic-halo-o); }
.ic-moon { fill: var(--ic-moon); }
.ic-hill-far { fill: var(--ic-hill-far); }
.ic-hill { fill: var(--ic-hill); }
.ic-inner-edge { fill: none; stroke: var(--ic-frame-edge); stroke-opacity: 0.7; stroke-width: 1.2; }
.ic-inner-shine { fill: none; stroke: #F7E9A6; stroke-opacity: 0.18; stroke-width: 3; }
.ic-stem { fill: none; stroke: var(--ic-stem); stroke-width: 3.4; stroke-linecap: round; }
.ic-leaf { fill: url(#ic-leaf); stroke: var(--ic-stem); stroke-opacity: 0.9; stroke-width: 1.6; }
.ic-rib { fill: none; stroke: var(--ic-stem); stroke-opacity: 0.55; stroke-width: 1.2; }
.ic-flower-glow { fill: url(#ic-glow-petal); opacity: 0.55; }
.ic-under use { fill: var(--ic-under); }
.ic-petal use { fill: url(#ic-petal); stroke: var(--ic-petal-edge); stroke-opacity: 0.9; stroke-width: 1.5; }
.ic-centre { fill: #F4D58D; stroke: #D9A74E; stroke-width: 1.2; }
.ic-pollen { fill: #B98A3E; opacity: 0.6; }
.ic-pot { fill: var(--ic-pot); stroke: var(--ic-pot-edge); stroke-width: 1.3; stroke-linejoin: round; }
.ic-pot-heart { fill: var(--ic-heart); opacity: 0.9; }

/* the sprig of sweet basil */
.bs-s-base { stop-color: var(--bs-leaf-base); }
.bs-s-tip { stop-color: var(--bs-leaf-tip); }
.bs-stem { fill: none; stroke: var(--bs-stem); stroke-width: 3.2; stroke-linecap: round; }
.bs-stalk { fill: none; stroke: var(--bs-stem); stroke-width: 2.2; stroke-linecap: round; }
.bs-wash { fill: var(--bs-wash); opacity: 0.45; filter: url(#bs-soft); }
.bs-leaf { fill: url(#bs-leaf); stroke: var(--bs-edge); stroke-width: 1; stroke-opacity: 0.6; }
.bs-shine { fill: var(--bs-shine); opacity: 0.3; }
.bs-vein { fill: none; stroke: var(--bs-edge); stroke-width: 0.8; stroke-opacity: 0.5; stroke-linecap: round; }
.bs-calyx,
.bs-bud { fill: var(--bs-calyx); }
.bs-flower { fill: var(--bs-flower); stroke: var(--bs-flower-edge); stroke-width: 0.7; }
.bs-lip { fill: none; stroke: var(--bs-flower-edge); stroke-width: 0.6; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}