/* Symbiosis Living: prototype stylesheet (October 2026, second round)
   Calm with energy. The page stays quiet; six muted aspect colours, taken from
   the light in the glass house, mark the aspects wherever they appear. */

:root {
  --chip-radius: 2px;      /* every category button, filter and word chip: nearly square, like the site's buttons */
  --hover: #8a6a3e;        /* a quiet warm ochre: the one colour a link turns to when the pointer is over it */
  --paper: #f4f1ec;        /* warm off-white page */
  --paper-deep: #ebe6de;   /* quiet bands and cards */
  --ink: #2f2d2a;          /* body text, soft charcoal */
  --ink-strong: #1c1b19;   /* headings, near-black */
  --muted: #66615a;        /* small text, about 5.4:1 on paper */
  --line: #d8d2c8;         /* hairlines */
  --line-strong: #aaa398;

  /* the six aspects: muted, drawn from the prism's light. Marks and large type only, never body text */
  --storage: #a8834f;       /* ochre */
  --restoration: #7f9b8e;   /* sage */
  --kinship: #b4705a;       /* terracotta */
  --intimacy: #93708a;      /* dusk plum */
  --productivity: #3664a1;  /* ink blue (Dorothy, 28 Oct 2026: the slate felt too relaxing for focus) */
  --productivity-text: #38598a;
  --stimulation: #a3a052;   /* citrine */

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Karla", "Helvetica Neue", Arial, sans-serif;

  --measure: 38rem;        /* reading column, about 66 characters */
  --wide: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --slow: 900ms cubic-bezier(.2, .6, .2, 1);
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='360'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='3' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .49  0 0 0 0 .47  .1 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3Cfilter id='g6' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .34  0 0 0 0 .32  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g6)'/%3E%3Ccircle cx='85.8' cy='248.3' r='1.2' fill='%236d665c' fill-opacity='0.24'/%3E%3Ccircle cx='438.5' cy='356.3' r='0.8' fill='%236d665c' fill-opacity='0.34'/%3E%3Ccircle cx='266.5' cy='181.8' r='0.6' fill='%236d665c' fill-opacity='0.34'/%3E%3Ccircle cx='7.3' cy='335.8' r='0.8' fill='%236d665c' fill-opacity='0.19'/%3E%3Ccircle cx='412.8' cy='83.6' r='0.6' fill='%236d665c' fill-opacity='0.32'/%3E%3Ccircle cx='227.2' cy='358.3' r='1.6' fill='%236d665c' fill-opacity='0.36'/%3E%3Ccircle cx='320.3' cy='12.3' r='0.7' fill='%236d665c' fill-opacity='0.29'/%3E%3Ccircle cx='360.8' cy='233.6' r='0.7' fill='%236d665c' fill-opacity='0.18'/%3E%3Ccircle cx='385.3' cy='31.8' r='1.6' fill='%236d665c' fill-opacity='0.37'/%3E%3Ccircle cx='235.6' cy='198.7' r='0.7' fill='%236d665c' fill-opacity='0.26'/%3E%3Ccircle cx='78.6' cy='239.4' r='0.8' fill='%236d665c' fill-opacity='0.35'/%3E%3Ccircle cx='122.1' cy='280.9' r='0.6' fill='%236d665c' fill-opacity='0.31'/%3E%3Ccircle cx='417.5' cy='236.9' r='1.6' fill='%236d665c' fill-opacity='0.36'/%3E%3Ccircle cx='514.2' cy='25.5' r='1' fill='%236d665c' fill-opacity='0.28'/%3E%3Ccircle cx='430.0' cy='72.4' r='0.6' fill='%236d665c' fill-opacity='0.36'/%3E%3Ccircle cx='213.0' cy='131.5' r='0.8' fill='%236d665c' fill-opacity='0.28'/%3E%3Ccircle cx='165.3' cy='174.4' r='0.7' fill='%236d665c' fill-opacity='0.19'/%3E%3Ccircle cx='48.5' cy='258.5' r='0.8' fill='%236d665c' fill-opacity='0.18'/%3E%3Ccircle cx='36.5' cy='215.8' r='1' fill='%236d665c' fill-opacity='0.22'/%3E%3Ccircle cx='316.6' cy='200.3' r='1' fill='%236d665c' fill-opacity='0.20'/%3E%3Ccircle cx='348.2' cy='225.5' r='1.6' fill='%236d665c' fill-opacity='0.37'/%3E%3Ccircle cx='180.2' cy='215.0' r='0.7' fill='%236d665c' fill-opacity='0.23'/%3E%3Ccircle cx='87.7' cy='332.3' r='0.6' fill='%236d665c' fill-opacity='0.34'/%3E%3Ccircle cx='194.9' cy='246.0' r='1.2' fill='%236d665c' fill-opacity='0.28'/%3E%3Ccircle cx='342.1' cy='87.0' r='0.6' fill='%236d665c' fill-opacity='0.37'/%3E%3Ccircle cx='307.1' cy='317.9' r='0.8' fill='%236d665c' fill-opacity='0.28'/%3E%3Ccircle cx='346.8' cy='337.1' r='0.6' fill='%236d665c' fill-opacity='0.21'/%3E%3Ccircle cx='36.1' cy='289.9' r='1.6' fill='%236d665c' fill-opacity='0.33'/%3E%3Ccircle cx='29.9' cy='103.7' r='1.6' fill='%236d665c' fill-opacity='0.23'/%3E%3Ccircle cx='150.7' cy='151.0' r='0.6' fill='%236d665c' fill-opacity='0.26'/%3E%3Ccircle cx='452.6' cy='232.4' r='0.6' fill='%236d665c' fill-opacity='0.38'/%3E%3Ccircle cx='387.8' cy='172.4' r='0.7' fill='%236d665c' fill-opacity='0.21'/%3E%3Ccircle cx='338.1' cy='328.1' r='0.8' fill='%236d665c' fill-opacity='0.19'/%3E%3Ccircle cx='110.3' cy='301.8' r='1.6' fill='%236d665c' fill-opacity='0.21'/%3E%3Ccircle cx='191.8' cy='278.2' r='0.8' fill='%236d665c' fill-opacity='0.30'/%3E%3Ccircle cx='441.7' cy='110.9' r='1' fill='%236d665c' fill-opacity='0.30'/%3E%3Ccircle cx='72.4' cy='259.5' r='0.8' fill='%236d665c' fill-opacity='0.32'/%3E%3Ccircle cx='496.1' cy='8.5' r='1' fill='%236d665c' fill-opacity='0.25'/%3E%3Ccircle cx='129.9' cy='344.0' r='0.8' fill='%236d665c' fill-opacity='0.23'/%3E%3Ccircle cx='210.9' cy='345.1' r='0.6' fill='%236d665c' fill-opacity='0.21'/%3E%3Ccircle cx='49.3' cy='33.8' r='0.5' fill='%236d665c' fill-opacity='0.31'/%3E%3Ccircle cx='408.8' cy='25.9' r='0.5' fill='%236d665c' fill-opacity='0.31'/%3E%3Ccircle cx='65.8' cy='193.9' r='0.7' fill='%236d665c' fill-opacity='0.26'/%3E%3Ccircle cx='461.7' cy='223.6' r='0.6' fill='%236d665c' fill-opacity='0.22'/%3E%3Ccircle cx='196.5' cy='255.6' r='1' fill='%236d665c' fill-opacity='0.33'/%3E%3Ccircle cx='314.0' cy='181.8' r='1.2' fill='%236d665c' fill-opacity='0.33'/%3E%3Cpath d='M363.7 2.8l37.5 -2.6' stroke='%238a8276' stroke-opacity='.10' stroke-width='.6'/%3E%3Cpath d='M351.4 63.1l47.9 -1.5' stroke='%238a8276' stroke-opacity='.10' stroke-width='.6'/%3E%3Cpath d='M320.5 112.9l19.8 -0.7' stroke='%238a8276' stroke-opacity='.10' stroke-width='.6'/%3E%3Cpath d='M142.3 324.3l30.4 0.0' stroke='%238a8276' stroke-opacity='.10' stroke-width='.6'/%3E%3Cpath d='M252.7 341.4l22.1 0.6' stroke='%238a8276' stroke-opacity='.10' stroke-width='.6'/%3E%3C/svg%3E");
}
/* tick boxes, radios and sliders in the site's charcoal, never the browser's own blue (30 Oct 2026) */
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--ink); }

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

/* no smooth scrolling: a link to a section opens there at once, without the page running past (Dorothy, 29 Oct 2026) */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* white concrete: an almost even pale surface with scattered pinholes and a few hairline marks (chosen by Dorothy, 28 Oct 2026) */
  background-image: var(--texture);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink-strong);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }

p { margin: 0 0 1.1em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.read { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.section { padding: clamp(4rem, 10vw, 8rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.band { background: var(--texture), var(--paper-deep); }

.label {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.2rem;
  display: flex; align-items: center; gap: .8rem;
}
.label::before { content: ""; width: 1.8rem; height: 1px; background: currentColor; flex: none; }
.lede { font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.65rem); line-height: 1.45; color: var(--ink-strong); }
.small { font-size: .9rem; color: var(--muted); }

/* ---------- header and folded menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--slow);
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; max-width: none; }   /* full width: the logo at the left edge, search and menu at the right, on any screen (30 Oct 2026) */

/* The brush-drawn Symbiosis logo, as on the current site. Its transparent file is used as a stencil,
   so the letters take the ink colour and nothing shows behind them. */
.wordmark { display: block; line-height: 0; text-decoration: none; }
.logo { display: block; width: 8.2rem; aspect-ratio: 800 / 325; background: var(--ink-strong);
  -webkit-mask: url("/images/logo-symbiosis-mask.png") center / contain no-repeat; mask: url("/images/logo-symbiosis-mask.png") center / contain no-repeat; }

.menu-button {
  display: inline-flex; align-items: center; gap: .7rem;
  background: none; border: 0; padding: .6rem 0; cursor: pointer;
  font: inherit; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.menu-button .bars { width: 1.4rem; height: .5rem; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }

.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--paper);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity 500ms ease; }
.menu .wrap.top { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; width: 100%; max-width: none; }   /* the same place as the header, so the logo does not jump when the menu opens */
.menu nav { flex: 1; overflow-y: auto; }
/* big links on the left; shop and help as two quiet lists on the right, so every page is one step away */
.menu-nav { display: grid; gap: 2.5rem; align-content: start; padding-top: 1rem; padding-bottom: 2rem; }
/* centred only when the whole menu fits; otherwise it starts at the top, so nothing is cut off */
@media (min-width: 860px) and (min-height: 700px) { .menu-nav { align-content: center; } }
@media (min-width: 860px) { .menu-nav { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.menu-side { display: grid; gap: 2rem; align-content: center; }
@media (min-width: 520px) and (max-width: 859px) { .menu-side { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .menu-side { border-left: 1px solid var(--line); padding-left: 2.5rem; } }
.menu-head { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.menu-side li { margin: 0 0 .3rem; }
.menu-side a { font-size: .98rem; color: var(--ink); text-decoration: none; }
.menu-side a { transition: color 400ms ease; }
.menu-side a:hover, .menu-side a:focus-visible { color: var(--hover); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0 0 .35rem; }
.menu .main-links > li > a {
  font-family: var(--serif); font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.2;
  color: var(--ink-strong);
  /* on hover the word warms slowly to ochre: calmer than a line, and it never moves the menu (30 Oct 2026) */
  text-decoration: none; transition: color 400ms ease;
}
.menu .main-links > li > a:hover, .menu .main-links > li > a:focus-visible { color: var(--hover); }
.menu .sub { margin: .2rem 0 .8rem 1.1rem; }
.menu .sub a { font-size: 1rem; color: var(--muted); text-decoration: none; }
.menu .sub a { transition: color 400ms ease; }
.menu .sub a:hover, .menu .sub a:focus-visible { color: var(--hover); }
.menu .shop-link { margin-top: 1.6rem; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.menu .shop-link a { text-decoration: none; color: var(--muted); }
.menu .menu-foot { padding: 1.5rem var(--gutter) 2rem; width: 100%; font-family: var(--serif); font-style: italic; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
body.menu-open { overflow: hidden; }

/* ---------- buttons ---------- */
.button {
  display: inline-block; padding: .85rem 1.6rem;
  border: 1px solid var(--ink); color: var(--ink-strong); background: transparent;
  font: inherit; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background var(--slow), color var(--slow);
}
.button:hover { background: var(--ink-strong); color: var(--paper); }
.textlink { font-size: .95rem; text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2rem; }

/* ---------- veiled image (a light overlay that lets the air in) ---------- */
.veil { position: relative; overflow: hidden; background: var(--paper-deep); }
.veil img { width: 100%; height: 100%; object-fit: cover; }
.veil::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,241,236,.32), rgba(244,241,236,.12) 40%, rgba(244,241,236,.38));
}
.caption { font-size: .85rem; color: var(--muted); margin-top: .7rem; }

/* ---------- home ---------- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem); }
.hero .wrap { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 860px) { .hero .wrap { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { max-width: 11ch; }
.hero .veil { aspect-ratio: 4 / 5; max-height: 78vh; }

.doors { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 3rem; }
@media (min-width: 640px) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .doors { grid-template-columns: repeat(3, 1fr); } }
.door { --a: var(--ink); display: block; position: relative; padding: 2rem 1.6rem 2.2rem; text-decoration: none; background: var(--paper); transition: background var(--slow); }
.door::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--a); transform: scaleX(.18); transform-origin: left; transition: transform var(--slow); }
.door:hover::before, .door:focus-visible::before { transform: scaleX(1); }
.door .big { display: block; font-family: var(--serif); font-style: italic; font-size: 3.6rem; line-height: 1; color: var(--a); opacity: .85; margin-bottom: .4rem; }
.door:hover { background: var(--paper-deep); }
.door .num { font-size: .78rem; letter-spacing: .16em; color: var(--muted); }
.door h3 { margin: .6rem 0 .5rem; transition: font-style var(--slow); }
.door p { margin: 0; font-size: 1rem; color: var(--ink); }
.door .go { display: inline-block; margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.door:hover h3 { font-style: italic; }
.door:hover .go { color: var(--ink); }

.quote { text-align: center; }
.quote blockquote { margin: 0 auto; max-width: 30ch; font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.25; color: var(--ink-strong); font-style: italic; }
.quote cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: .9rem; letter-spacing: .1em; color: var(--muted); }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
.split .veil { aspect-ratio: 4 / 3; }

.ways { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 860px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.ways a { text-decoration: none; display: block; border-top: 1px solid var(--ink); padding-top: 1.2rem; }
.ways h3 { font-size: 1.6rem; }
.ways p { font-size: 1rem; margin: 0; }
.ways a:hover h3 { font-style: italic; }

/* ---------- journal ---------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-top: 1px solid var(--line); }
.post-list li:last-child { border-bottom: 1px solid var(--line); }
.post-list a { display: grid; gap: .4rem; padding: 2rem 0; text-decoration: none; }
@media (min-width: 760px) { .post-list a { grid-template-columns: 11rem 1fr; gap: 2rem; } }
.post-list .meta { font-size: .85rem; color: var(--muted); padding-top: .45rem; }
.post-list h3 { margin: 0 0 .4rem; }
.post-list p { margin: 0; font-size: 1rem; }
.post-list a:hover h3 { font-style: italic; }
.year { font-family: var(--serif); font-size: 1.3rem; color: var(--muted); margin: 3.5rem 0 1rem; }

.article-head { padding: clamp(3rem, 8vw, 6rem) 0 2.5rem; text-align: center; }
.article-head h1 { max-width: 16ch; margin: 0 auto .6rem; }
.article-head .meta { font-size: .9rem; color: var(--muted); }
.article-image { max-width: 60rem; margin: 0 auto clamp(3rem, 7vw, 5rem); padding: 0 var(--gutter); }
.article-image .veil { aspect-ratio: 3 / 2; }
.prose { font-size: 1.15rem; line-height: 1.8; }
.prose > p:first-of-type:not(.pull):not(.page-dates)::first-letter { font-family: var(--serif); float: left; font-size: 4.2em; line-height: .82; padding: .08em .1em 0 0; color: var(--ink-strong); }
.prose .pull { font-family: var(--serif); font-size: 1.7rem; line-height: 1.35; font-style: italic; color: var(--ink-strong); margin: 2.4rem 0; padding-left: 1.4rem; border-left: 1px solid var(--ink); }
.companion { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 1rem; }
.tags { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.tag { font-size: .8rem; color: var(--muted); border: 1px solid var(--line); padding: .25rem .7rem; border-radius: var(--chip-radius); }
.next-prev { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.next-prev a { text-decoration: none; }
.next-prev small { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.next-prev span { font-family: var(--serif); font-size: 1.5rem; color: var(--ink-strong); }

/* ---------- click-to-reveal (details) ---------- */
details.reveal { border-top: 1px solid var(--line); }
details.reveal:last-of-type { border-bottom: 1px solid var(--line); }
details.reveal summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--serif); font-size: 1.4rem; color: var(--ink-strong);
}
details.reveal summary::-webkit-details-marker { display: none; }
details.reveal summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%; width: .8rem; height: .8rem;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: translateY(-70%) rotate(45deg); transition: transform 400ms ease;
}
details.reveal[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details.reveal .inner { padding: 0 0 1.6rem; }
details.reveal h4 { font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .3rem; }
details.reveal ul { padding-left: 1.1rem; margin: 0; }
details.reveal li { margin-bottom: .6rem; }

/* ---------- six aspects: "you are here" strip ---------- */
.station {
  position: sticky; top: 4.5rem; z-index: 10;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.station ol { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--wide); display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; }
.station ol::-webkit-scrollbar { display: none; }
.station a { display: block; padding: .9rem 0; font-size: .85rem; letter-spacing: .06em; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; }
.station a[aria-current="true"] { color: var(--ink-strong); border-bottom: 2px solid var(--a, var(--ink-strong)); }

.aspect { scroll-margin-top: 9rem; padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); }
.aspect:first-of-type { border-top: 0; }
.aspect h2::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--a, var(--ink)); margin-right: .45em; vertical-align: .12em; }
.aspect .count { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.aspect h2 { margin: .6rem 0 .2rem; }
.aspect .sub { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--muted); margin-bottom: 2rem; }
.aspect .closing { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--ink-strong); margin-top: 2.2rem; }
.aspect-nav { display: flex; justify-content: space-between; margin-top: 2.5rem; font-size: .9rem; color: var(--muted); }
.aspect-nav a { text-decoration: none; }
.aspect-nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- scent atlas ---------- */
.filters { display: grid; gap: .8rem; margin: 2.5rem 0 1rem; }
@media (min-width: 760px) { .filters { grid-template-columns: 1.3fr 1fr 1fr 1fr auto; align-items: end; } }
.filters label { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.filters input, .filters select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 0;
  padding: .65rem .75rem; appearance: none;
}
.filters select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.filters button { font: inherit; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; background: none; border: 0; padding: .7rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; color: var(--ink); }
.atlas-count { font-size: .9rem; color: var(--muted); margin: 0 0 2rem; }

.oils { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .oils { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .oils { grid-template-columns: repeat(3, 1fr); } }
.oil { padding: 2rem 1.5rem; background: var(--paper); scroll-margin-top: 6rem; }
.oils .empty { background: var(--paper); padding: 3rem 1.5rem; grid-column: 1 / -1; }
.oil h3 { margin-bottom: .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.chip { font: inherit; font-size: .78rem; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--chip-radius); padding: .2rem .7rem; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.oil dl { margin: 0; font-size: .98rem; }
.oil dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 1rem; }
.oil dd { margin: .2rem 0 0; }
.oil details { margin-top: 1.2rem; font-size: .95rem; }
.oil summary { cursor: pointer; color: var(--muted); }
.oil summary:hover { color: var(--ink); }
.oil details p { margin: .7rem 0 0; }
.empty { padding: 3rem 0; color: var(--muted); }

/* ---------- quiz ---------- */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 2rem 0; }
.steps li { counter-increment: s; position: relative; padding: 1.2rem 0 1.2rem 3rem; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 1.05rem; font-family: var(--serif); font-size: 1.6rem; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-size: .9rem; color: var(--muted); margin-top: 1.5rem; }

/* ---------- rooms (emotional topography) ---------- */
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.aspect-notes { margin: 2rem 0; }
.aspect-notes p strong { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ink-strong); }
.questions { list-style: none; padding: 0; margin: 2rem 0; }
.questions li { font-family: var(--serif); font-style: italic; font-size: 1.45rem; line-height: 1.35; color: var(--ink-strong); padding: .9rem 0; border-top: 1px solid var(--line); }
.room-list { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.room-list a { text-decoration: none; color: var(--muted); }
.room-list a:hover, .room-list a[aria-current="page"] { color: var(--ink-strong); text-decoration: underline; }

/* ---------- footer ---------- */
/* a deep, warm charcoal footer: it closes the page clearly, like the floor under a room */
.site-footer { background: #2b2926; color: #e9e4db; padding: 4.5rem 0 3rem; font-size: .92rem;
  --ink-strong: #f4f1ec; --ink: #e9e4db; --muted: #b9b1a5; --line: #4a4641; }
.site-footer .wrap { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .site-footer .wrap { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer .tagline { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--ink-strong); }
.site-footer .tagline span { display: block; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { text-decoration: none; color: var(--muted); }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-logo { width: 11rem; margin-bottom: 1.4rem; }
.social { display: flex; gap: 1.2rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.social a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--muted); font-family: var(--sans); font-style: normal; font-size: .85rem; }
.social a:hover { color: var(--ink-strong); }
.social svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.social svg .fill { fill: currentColor; stroke: none; }
.site-footer .legal { grid-column: 1 / -1; color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }

/* ---------- slow fade as the page scrolls ---------- */
.js-fade .fade { opacity: 0; transform: translateY(10px); transition: opacity var(--slow), transform var(--slow); }
.js-fade .fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-fade .fade { opacity: 1; transform: none; transition: none; }
}

/* ---------- aspect colour hooks ---------- */
.a-storage { --a: var(--storage); --at: var(--storage-text, var(--storage)); }
.a-restoration { --a: var(--restoration); --at: var(--restoration-text, var(--restoration)); }
.a-kinship { --a: var(--kinship); --at: var(--kinship-text, var(--kinship)); }
.a-intimacy { --a: var(--intimacy); --at: var(--intimacy-text, var(--intimacy)); }
.a-productivity { --a: var(--productivity); --at: var(--productivity-text, var(--productivity)); }
.a-stimulation { --a: var(--stimulation); --at: var(--stimulation-text, var(--stimulation)); }
/* adjusted aspect colours, for comparison (28 Oct 2026): spread more evenly round the colour wheel,
   sage and plum a little stronger, Productivity a clearer ink blue (Dorothy: the slate felt too relaxing), and a deeper shade of each for text, at least 4:1 on the page */
:root[data-palette="adjusted"] {
  --storage: #a6834e; --kinship: #b05c4f; --stimulation: #849b50; --restoration: #639c81; --productivity: #3664a1; --intimacy: #9c6390;
  --storage-text: #92713f; --kinship-text: #b05c4f; --stimulation-text: #697d3b; --restoration-text: #4b8168; --productivity-text: #38598a; --intimacy-text: #9c6390; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--a, var(--ink)); flex: none; }

/* ---------- home: the glass house on concrete, its light shifting through six atmospheres ---------- */
.prism-hero { padding: 0 0 clamp(4rem, 9vw, 7rem); }
.prism { position: relative; margin: 0; overflow: hidden; background: #8d8a84; aspect-ratio: 4 / 3; }
.prism img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 24% 50%; }
/* the second copy only changes the hue; the concrete is grey, so only the glass and its light really move */
.prism .shift { filter: saturate(1.2);
  /* the colour changes only inside the glass house: the mask (set by site.js) is the house's outline */
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* each aspect's own colour washes through the glass house, the same colour as "feel" and its dot.
   'color' keeps the light and shade of the glass and gives it the aspect's hue */
.prism .house-tint { position: absolute; inset: 0; pointer-events: none; background: var(--tint, transparent);
  mix-blend-mode: color; opacity: .62; transition: background-color 3.2s ease-in-out;
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* the light the glass casts on the ground takes the colour more fully, so no bright blue is left behind */
.prism .house-tint.ground { opacity: .8; }
.prism-text { padding: 2.5rem var(--gutter) 0; }
@media (min-width: 900px) {
  .prism-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(24rem, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  /* a lower frame on large screens keeps the little house small, with stone and light around it (Dorothy, 29 Oct 2026) */
  .prism { aspect-ratio: auto; height: min(66vh, 40rem); min-height: 26rem; }
  /* the concrete fades into the paper, so photo and page feel like one surface */
  .prism::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(244,241,236,0) 55%, rgba(244,241,236,.55) 85%, var(--paper)); }
  .prism-text { padding: 2rem var(--gutter) 2rem 0; }
}
.prism-text h1 { max-width: 11ch; }
/* the one sentence: under the question, before the explanation */
.prism-text .one-line { font-family: var(--serif); font-size: clamp(1.2rem, 4.6vw, 1.5rem); line-height: 1.45; color: var(--ink-strong); margin: 0 0 1rem; }
.prism-text .one-line span { display: block; }
/* on a wide screen each sentence keeps to one line, sized to fit the column */
@media (min-width: 900px) { .prism-text .one-line { font-size: clamp(1rem, 1.42vw, 1.45rem); } .prism-text .one-line span { white-space: nowrap; } }
.prism-text .atmos { margin-top: 1.6rem; }
.prism-text .hero-quiz { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); max-width: 34rem; }
.prism-text .hero-quiz p { font-size: 1.02rem; margin: 0 0 1.1rem; }
.prism-text .hero-sub { font-size: 1.02rem; color: var(--ink); max-width: 34rem; margin-bottom: 1.6rem; }
.prism-text h1 em { font-style: italic; color: var(--a, var(--ink-strong)); transition: color 3.2s ease-in-out; }

.atmos { display: flex; flex-wrap: wrap; gap: .2rem 1rem; list-style: none; padding: 0; margin: 1.8rem 0 0; }
.atmos button { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; padding: .25rem 0; cursor: pointer; font: inherit; font-size: .85rem; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid transparent; transition: color var(--slow), border-color var(--slow); }
.atmos button[aria-pressed="true"] { color: var(--ink-strong); border-bottom-color: var(--a); }
.atmos-note { font-size: .95rem; letter-spacing: .02em; color: var(--muted); margin: .7rem 0 0; min-height: 1.6em; }   /* the same font and grey as the six aspects, a little larger, so they read as one group (30 Oct 2026) */

/* ---------- quiz (built in, no outside service) ---------- */
.quiz { max-width: 44rem; margin: 0 auto; scroll-margin-top: 6rem; }
.quiz[hidden] { display: none; }
.quiz-progress { display: flex; gap: .35rem; margin-bottom: 2.2rem; }
.quiz-progress span { flex: 1; height: 3px; background: var(--line); transition: background var(--slow); }
.quiz-progress span.done { background: var(--a, var(--ink)); }
.quiz-step h2 { display: flex; align-items: center; gap: .8rem; margin-bottom: .2rem; }
.quiz-step h2 .dot { width: .9rem; height: .9rem; }
.quiz-step .sub { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--muted); margin-bottom: 2rem; }
.statement { border: 0; margin: 0; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.statement legend { float: left; width: 100%; padding: 0; font-size: 1.08rem; color: var(--ink-strong); margin-bottom: .9rem; }
.statement .scale { clear: both; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.scale label { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; cursor: pointer; font-size: .74rem; line-height: 1.25; color: var(--muted); text-align: center; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale .ring { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; color: var(--muted); background: var(--paper); transition: background var(--slow), border-color var(--slow), color var(--slow); }
.scale label:hover .ring { border-color: var(--ink); }
.scale input:checked + .ring { background: var(--a, var(--ink)); border-color: var(--a, var(--ink)); color: #fff; }
.scale input:focus-visible + .ring { outline: 2px solid var(--ink); outline-offset: 3px; }
.quiz-ponder { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-strong); margin: 2rem 0 0; padding-left: 1.2rem; border-left: 2px solid var(--a, var(--ink)); }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.quiz-nav .back { background: none; border: 0; font: inherit; font-size: .9rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: .22em; }
.quiz-nav .button[disabled] { opacity: .35; cursor: not-allowed; }
.quiz-nav .hint { font-size: .85rem; color: var(--muted); }

.result-head { text-align: center; margin-bottom: 2rem; }
.radar { display: block; width: min(100%, 26rem); margin: 0 auto 1rem; overflow: visible; }
.radar text { font-family: var(--sans); font-size: 11px; fill: var(--muted); }
.result-list { list-style: none; padding: 0; margin: 2.5rem 0; }
.result-list > li { border-top: 1px solid var(--line); padding: 1.6rem 0; }
.result-list > li:last-child { border-bottom: 1px solid var(--line); }
.result-row { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.result-row h3 { margin: 0; font-size: 1.6rem; }
.result-row .tier { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.result-row .pct { margin-left: auto; font-family: var(--serif); font-size: 1.4rem; color: var(--a); }
.bar { height: 3px; background: var(--line); margin: .7rem 0 1rem; }
.bar span { display: block; height: 100%; background: var(--a); }
.result-list blockquote { margin: 0; font-size: 1.02rem; }
.result-list .ask { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink-strong); margin-top: .8rem; }
.begin-here { background: var(--paper-deep); padding: 2rem 1.6rem; border-top: 3px solid var(--a); margin: 2.5rem 0; }
.outro p { font-family: var(--serif); font-size: 1.4rem; line-height: 1.45; color: var(--ink-strong); margin-bottom: .6em; }
.privacy-note { font-size: .85rem; color: var(--muted); }

/* ---------- emotional topography: the floor plan ---------- */
.plan-wrap { display: grid; gap: 2.5rem; margin-top: 3rem; align-items: start; }
@media (min-width: 1000px) { .plan-wrap { grid-template-columns: 1fr 19rem; } }
.plan { position: relative; display: grid; gap: 7px; padding: 10px; border-radius: 0;
  /* hand-drawn (30 Oct 2026): faint grid paper; the walls and furniture are pencil lines drawn by plan-sketch.js */
  background-color: #f7f4ee; background-image: linear-gradient(rgba(170,163,152,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(170,163,152,.16) 1px, transparent 1px); background-size: 14px 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "attic attic attic attic"
    "bed bed bath bath"
    "bed bed nook nook"
    "balc study study desk"
    "balc study study desk"
    "thr thr thr thr"
    "liv liv kit kit"
    "liv liv kit kit"
    "hall hall hall hall"
    "base base base base";
  grid-auto-rows: minmax(4.4rem, auto); }
@media (min-width: 700px) {
  .plan { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(4.6rem, auto);
    grid-template-areas:
      "attic attic attic attic attic attic attic attic attic attic attic attic"
      "balc bed bed bed bed bath bath study study study desk desk"
      "balc bed bed bed bed bath bath study study study desk desk"
      "balc bed bed bed bed nook nook study study study desk desk"
      "thr thr thr thr thr thr thr thr thr thr thr thr"
      "liv liv liv liv liv liv kit kit kit kit hall hall"
      "liv liv liv liv liv liv kit kit kit kit hall hall"
      "base base base base base base base base base base base base"; }
}
.room { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem;
  padding: .8rem .9rem; background: rgba(244,241,236,.55); text-decoration: none; color: var(--ink-strong);
  transition: background var(--slow); overflow: hidden; }
.room::after { content: ""; position: absolute; inset: 0; background: var(--a, transparent); opacity: 0; transition: opacity var(--slow); pointer-events: none; }
.room:hover, .room:focus-visible, .room.is-active { background: #fbf9f5; }
.room:hover::after, .room:focus-visible::after, .room.is-active::after { opacity: .13; }
.room .name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.1; position: relative; z-index: 1; }
.room:hover .name, .room:focus-visible .name { font-style: italic; }
.room .dots { display: flex; gap: .3rem; position: relative; z-index: 1; }
.room .dots .dot { width: .45rem; height: .45rem; }
.room.level { background: var(--paper-deep); flex-direction: row; align-items: center; }
.room.outside { background: var(--paper); background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 8px); }
.room.outside .name { writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; }
.room.passage { min-height: 2.6rem; flex-direction: row; align-items: center; }
.room.passage .name { font-size: 1rem; }
.room .door-mark { display: none; }   /* the hallway door is now drawn in pencil */
/* the vertical house: lighter above, deeper and quieter below (after Bachelard's attic and cellar) */
.room[style*="grid-area:attic"] { background: rgba(253,252,249,.6); }
.room[style*="grid-area:attic"] .name { letter-spacing: .03em; }
.room[style*="grid-area:bed"], .room[style*="grid-area:bath"], .room[style*="grid-area:nook"],
.room[style*="grid-area:study"], .room[style*="grid-area:desk"] { background: rgba(248,246,241,.55); }
.room[style*="grid-area:thr"] { background: rgba(241,237,230,.6); }
.room[style*="grid-area:liv"], .room[style*="grid-area:kit"], .room[style*="grid-area:hall"] { background: rgba(235,230,221,.6); }
.room[style*="grid-area:base"] { background: rgba(216,208,195,.62); }
.room[style*="grid-area:base"] .name { color: #4a4540; font-style: italic; }
.room[style*="grid-area:base"]:hover, .room[style*="grid-area:base"]:focus-visible, .room[style*="grid-area:base"].is-active { background: #d2c9bb; }
.plan-depth { display: flex; justify-content: space-between; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: .7rem 0 0; }
.plan-key { font-size: .82rem; color: var(--muted); margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.plan-key span { display: inline-flex; align-items: center; gap: .4rem; }
.room-preview { position: sticky; top: 6rem; border-top: 1px solid var(--ink); padding-top: 1.2rem; min-height: 14rem; }
.room-preview h3 { margin-bottom: .2rem; }
.room-preview .sub { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1.15rem; margin-bottom: 1rem; }
.room-preview .open { font-size: .9rem; }
@media (max-width: 999px) { .room-preview { position: static; min-height: 0; } }

/* ---------- product page ---------- */
.product { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-top: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .product { grid-template-columns: 1.1fr .9fr; } }
.gallery { display: grid; gap: .8rem; }
.gallery .main { margin: 0; background: var(--paper-deep); aspect-ratio: 1; overflow: hidden; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: .6rem; }
.thumbs button { padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; width: 4.6rem; aspect-ratio: 1; overflow: hidden; }
.thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.buy h1 { margin-bottom: .1rem; }
.buy .latin { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--muted); margin-bottom: 1.4rem; }
.price { font-family: var(--serif); font-size: 2rem; color: var(--ink-strong); margin: 0 0 1.4rem; }
.price small { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin-left: .5rem; }
.buy-row { display: flex; gap: .8rem; align-items: stretch; flex-wrap: wrap; }
.qty { display: inline-flex; border: 1px solid var(--ink); }
.qty button { width: 2.6rem; background: none; border: 0; font: inherit; font-size: 1.1rem; cursor: pointer; color: var(--ink); }
.qty input { width: 2.6rem; border: 0; text-align: center; font: inherit; background: transparent; color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-note { font-size: .85rem; color: var(--muted); margin-top: .9rem; }
.facts-list { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.4rem; margin: 2rem 0; font-size: .95rem; }
.facts-list dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
.facts-list dd { margin: 0; }
.behaves { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1rem 0 1.5rem; }
@media (min-width: 700px) { .behaves { grid-template-columns: repeat(3, 1fr); } }
.behaves div { background: var(--paper); padding: 1.1rem 1rem; }
.behaves strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink-strong); }
.behaves span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reveal .sense { margin-bottom: 1.2rem; }
.related { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2rem; }
@media (min-width: 700px) { .related { grid-template-columns: repeat(4, 1fr); } }
.related a { background: var(--paper); padding: 1.3rem 1.1rem; text-decoration: none; }
.related a:hover h3 { font-style: italic; }
.related h3 { font-size: 1.35rem; margin: 0; }
.related p { margin: .2rem 0 0; font-size: .9rem; color: var(--muted); }

/* ---------- Scent Atlas: drifting title, name links, family tags ---------- */
.drift-title { position: relative; }
.drift-canvas { position: absolute; left: 0; top: -20px; pointer-events: none; }
.drifting .drift-word { animation: haze 7s ease-in-out infinite; }
@keyframes haze { 0%, 100% { text-shadow: 0 0 0 rgba(226,186,116,0); } 50% { text-shadow: 0 0 .3em rgba(226,186,116,.55); } }
/* no underline on hover: the arrow moves forward a little instead, a simpler sign that the name opens its page (30 Oct 2026) */
.oil h3 a { text-decoration: none; color: inherit; }
.oil h3 a::after { content: ""; display: inline-block; width: .8em; height: .5em; margin-left: .35em; vertical-align: .12em; background: var(--muted);
  -webkit-mask: var(--brush-arrow) center / contain no-repeat; mask: var(--brush-arrow) center / contain no-repeat; transition: transform 400ms ease, background-color 400ms ease; }
.oil h3 a:hover::after, .oil h3 a:focus-visible::after { transform: translateX(.3em); background: var(--ink-strong); }
@media (prefers-reduced-motion: reduce) { .oil h3 a::after { transition: background-color 400ms ease; } .oil h3 a:hover::after, .oil h3 a:focus-visible::after { transform: none; } }
.family-tag { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; letter-spacing: .08em; color: var(--muted); text-decoration: none; margin: -.3rem 0 .9rem; }
.family-tag:hover { color: var(--ink); text-decoration: underline; }
.fam-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--f, var(--line-strong)); flex: none; display: inline-block; }

/* ---------- scent family wheel ---------- */
.families { display: grid; gap: 2.5rem; padding-bottom: 5rem; }
@media (min-width: 960px) { .families { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; } }
/* on a wide, tall screen the wheel stays in view while the panel and reading scroll beside it */
@media (min-width: 960px) and (min-height: 760px) { .wheel-stick { position: sticky; top: 5.5rem; } }
.wheel { width: 100%; max-width: min(36rem, 72vh); height: auto; display: block; margin: 0 auto; overflow: visible; }
.wheel .hub { fill: var(--paper-deep); }
.wheel .hub-text { font-family: var(--serif); font-style: italic; font-size: 14px; fill: var(--ink-strong); }
.wheel .hub-note { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1; transition: fill 400ms ease; }
.wheel .hub-note.on { fill: var(--ink-strong); stroke: var(--ink-strong); }
.wheel .hub-letter { font-family: var(--sans); font-size: 8.5px; letter-spacing: .08em; fill: var(--muted); }
.seg { cursor: pointer; outline: none; transition: opacity 500ms ease, transform 400ms ease; transform-origin: 0 0; }
.has-choice .seg.chosen { transform: scale(1.035); }
.seg .ring-fam { fill: var(--f); opacity: .62; }
.seg .ring-oil { fill: var(--f); opacity: .2; transition: opacity 300ms ease; }
.seg .oil-hit:hover .ring-oil { opacity: .42; }
.seg .ring-note { fill: var(--f); opacity: .08; }
.seg .ring-note.on { opacity: .75; }
.seg .t-fam { font-family: var(--sans); font-size: 11.5px; letter-spacing: .03em; fill: var(--ink-strong); }
.seg .t-oil { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--ink-strong); }
.seg.picked .ring-oil { opacity: .6; stroke: var(--ink-strong); stroke-width: 1.5; }
.seg.picked .t-oil { font-style: normal; font-weight: 500; }
.has-choice .seg { opacity: .45; }
.has-choice .seg.chosen, .has-choice .seg.has-picked, .seg:focus-visible { opacity: 1; }
.seg:focus-visible .ring-fam { stroke: var(--ink); stroke-width: 1.5; }
.wheel-callout { max-width: 36rem; margin: .8rem auto 0; padding: .8rem 1rem; border-left: 3px solid var(--f); background: var(--paper-deep); }
.wheel-callout p { margin: 0; }
.callout-name { display: flex; align-items: center; gap: .5rem; font-family: var(--serif); font-size: 1.35rem; color: var(--ink-strong); }
.callout-actions { display: flex; align-items: center; gap: 1rem; margin-top: .6rem !important; }
.wheel-callout .add { font: inherit; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; background: none; border: 1px solid var(--ink); padding: .3rem .8rem; cursor: pointer; color: var(--ink); }
.wheel-callout .add.on { background: var(--ink); color: var(--paper); }
/* the wide wheel is easy to read, and the panel sits beside it, so the callout is for phones */
@media (min-width: 960px) { .wheel-callout { display: none; } }
.tray { max-width: 36rem; margin: 1.2rem auto 0; border-top: 1px solid var(--line); padding-top: .9rem; }
.tray-head { display: flex; justify-content: space-between; margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tray-reset { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.tray-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tray-list li { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .3rem .2rem .75rem; border: 1px solid var(--ink); border-radius: var(--chip-radius); font-family: var(--serif); font-size: 1.1rem; color: var(--ink-strong); }
.tray-list .remove { font: inherit; font-size: 1.1rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--muted); padding: 0 .35rem; }
.tray-status { margin: .5rem 0 0; min-height: 1.5em; }
.wheel-key p { margin: 0 0 .6rem; }
.notes-key { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.notes-key li { display: flex; align-items: baseline; gap: .6rem; }
.note-swatch { display: inline-block; width: 1.4rem; height: .45rem; background: var(--ink); flex: none; }
.note-swatch.b-top { opacity: .75; } .note-swatch.b-middle { opacity: .45; } .note-swatch.b-base { opacity: .2; }
.family-list { list-style: none; padding: 0; margin: 1.4rem 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.family-list button { font: inherit; font-size: .82rem; display: inline-flex; align-items: center; gap: .45rem; background: none; border: 1px solid var(--line-strong); border-radius: var(--chip-radius); padding: .25rem .75rem; cursor: pointer; color: var(--ink); }
.family-list button:hover, .family-list button[aria-pressed="true"] { border-color: var(--ink); }
.family-panel { border-top: 3px solid var(--f, var(--line)); padding-top: 1.4rem; transition: border-color 500ms ease; }
.family-panel h2 { font-size: 2.2rem; margin: 0 0 .4rem; }
.family-panel h3 { font-size: 1.7rem; margin: 1.6rem 0 0; }
.family-panel h3 a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.family-panel h3 + .small { margin-top: .1rem; }
.fam-line { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--muted); }
.fam-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.2rem 0; }
.fam-facts div { background: var(--paper); padding: .7rem .8rem; }
.fam-facts dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fam-facts dd { margin: .2rem 0 0; font-family: var(--serif); font-size: 1.1rem; color: var(--ink-strong); line-height: 1.25; }
.fam-sub { margin: 1.4rem 0 .4rem; }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin: 1.2rem 0 1.6rem; }
.fam-oils { list-style: none; padding: 0; margin: 0; }
.fam-oils li { display: flex; align-items: baseline; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.fam-oils .oil-name { font: inherit; font-family: var(--serif); font-size: 1.2rem; color: var(--ink-strong); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.fam-oils .oil-name:hover { text-decoration: underline; text-underline-offset: .18em; }
.fam-oils .oil-name[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--f); text-underline-offset: .22em; }
.oil-detail .add { font: inherit; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; background: none; border: 1px solid var(--ink); padding: .45rem 1rem; cursor: pointer; color: var(--ink); }
.oil-detail .add.on { background: var(--ink); color: var(--paper); }
.fam-oils small { font-size: .8rem; color: var(--muted); }
.fam-oils .add { margin-left: auto; font: inherit; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; background: none; border: 1px solid var(--line-strong); padding: .2rem .7rem; cursor: pointer; color: var(--ink); white-space: nowrap; }
.fam-oils .add:hover { border-color: var(--ink); }
.fam-oils .add.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pairing-tool { padding-bottom: 2rem; }
.pairing-tool h2 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin: 1rem 0 1.6rem; }
.step { max-width: 40rem; margin-bottom: 1.6rem; }
.step-label { display: flex; align-items: center; gap: .7rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 .6rem; }
.step-label span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--serif); font-size: 1rem; letter-spacing: 0; }
.step select { font: inherit; font-size: 1rem; width: 100%; padding: .6rem .7rem; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: 0; }
.step-help { margin: 0; }
.key-inline { display: block; margin-top: .3rem; }
.step-read { margin-top: 3rem; max-width: none; scroll-margin-top: 6rem; }
/* the family buttons help on a phone, where the wheel's words are small; on a wide screen the wheel is enough */
@media (min-width: 960px) { .family-list { display: none; } }
.composer-read { background: var(--paper-deep); padding: 1.6rem 1.5rem; }
.composer-read p:last-child { margin-bottom: 0; }
.read-block { border-top: 1px solid var(--line-strong); padding-top: .8rem; margin-top: 1.1rem; }
.read-block h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem; }
.read-block p { margin: 0; }
.note-row { display: flex; gap: .5rem; margin: .4rem 0 1.2rem; }
.note-row span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .7rem; border: 1px solid var(--ink); }
.note-row .miss { border-style: dashed; border-color: var(--line-strong); color: var(--muted); }
.note-row .have { background: var(--ink); color: var(--paper); }

/* ---------- the 365-day journal ---------- */
.journal-parts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 2rem 0; }
@media (min-width: 860px) { .journal-parts { grid-template-columns: repeat(3, 1fr); } }
.journal-parts > div { background: var(--paper-deep); padding: 1.5rem 1.4rem; }
.journal-parts h3 { font-size: 1.45rem; margin: 0 0 .5rem; }
.journal-parts p { margin: 0; }
.journal-tiers { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--ink-strong); max-width: 40rem; }
/* the journal as a small book. Each page scales as one piece (container units), like a printed A5 page */
.book-wrap { max-width: 62rem; margin-top: 2rem; }
.book-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.book-where { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink-strong); text-align: center; }
@media (max-width: 699px) { .book-where { font-size: 1rem; } }
.book-nav { font: inherit; font-size: 1.2rem; width: 2.6rem; height: 2.6rem; border: 1px solid var(--ink); border-radius: 50%; background: none; cursor: pointer; color: var(--ink); }
.book-nav:disabled { opacity: .25; cursor: default; }
.book { position: relative; padding: clamp(.8rem, 3vw, 2rem); background: var(--paper-deep); }
.spread-view { display: grid; grid-template-columns: 1fr 1fr; margin: 0 auto;
  /* both pages fit on one screen: the spread is never taller than the window allows */
  width: min(100%, calc((100svh - 14rem) * 1.41)); box-shadow: 0 2px 4px rgba(40,34,26,.08), 0 18px 40px rgba(40,34,26,.16); }
.spread-view[hidden] { display: none; }
@media (max-width: 699px) { .spread-view { grid-template-columns: 1fr; width: min(100%, calc((100svh - 13rem) * .705)); } .jpage.off { display: none; } }
.book.zoomed { overflow-x: auto; }
.book.zoomed .spread-view { width: 200%; }
.book-tools { display: flex; gap: 1.6rem; margin-top: .9rem; }
.textlink-button { font: inherit; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; background: none; border: 0; padding: .4rem 0; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
.hint-touch, [data-zoom] { display: none; }
.book .jpage { cursor: zoom-in; }
.book.lens-off .jpage { cursor: auto; }
@media (hover: none), (pointer: coarse) { .hint-touch, [data-zoom] { display: inline; } .hint-fine, [data-lens] { display: none; } .book .jpage { cursor: auto; } }

.jpage { container-type: inline-size; position: relative; aspect-ratio: 148 / 210; overflow: hidden;
  background: #fbf8f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #4d4842; font-family: var(--sans); padding: 8% 8% 10%; }
/* (padding in %, because container units inside a page measure its content box, not the page itself) */
.jpage > * { font-size: 2.85cqw; line-height: 1.5; }
/* the fold: a soft shadow on each page's inner edge */
.spread-view .jpage:first-child { box-shadow: inset -3cqw 0 4cqw -3cqw rgba(60,50,38,.12); }
.spread-view .jpage:last-child { box-shadow: inset 3cqw 0 4cqw -3cqw rgba(60,50,38,.12); }
@media (max-width: 699px) { .spread-view .jpage:first-child, .spread-view .jpage:last-child { box-shadow: 0 8px 24px rgba(40,34,26,.14); } }
.jpage p, .jpage ul, .jpage ol { margin: 0 0 1.6cqw; }
.jpage.dense > * { font-size: 2.2cqw; line-height: 1.38; }
.jpage.dense .hand { font-size: 3.1cqw; }
.jpage.dense .j-postures li { margin-bottom: .2cqw; }
.jpage.dense .j-closing { margin-top: 1.6cqw; font-size: 2.8cqw; }
.jpage.dense .j-caps { font-size: 4.2cqw; margin-bottom: 1.6cqw; }
.jpage.dense p, .jpage.dense ul { margin-bottom: 1.1cqw; }
.jpage.dense .j-h2 { margin: 2.2cqw 0 .6cqw; padding-top: 1.2cqw; font-size: 3.3cqw; }
.jpage.dense .j-blank.wide { height: 2.8cqw; }
.jpage .j-h1 { font-family: var(--serif); font-weight: 400; font-size: 6cqw; line-height: 1.15; color: #26231f; margin: 0 0 2.4cqw; }
.jpage .j-caps { font-size: 4.6cqw; letter-spacing: .16em; text-transform: uppercase; }
.jpage .j-sub { font-style: italic; font-size: .7em; color: #6f675d; }
.jpage .j-h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 3.7cqw; color: #26231f; margin: 3.4cqw 0 1cqw; padding-top: 1.6cqw; border-top: 1px solid #e3dccf; }
.jpage .j-h3 { font-family: var(--sans); font-weight: 500; font-size: 2cqw; letter-spacing: .16em; text-transform: uppercase; color: #6f675d; margin: 3cqw 0 1cqw; }
.jpage .j-gap { margin-top: 5cqw; }
.jpage .j-small { font-size: 2.1cqw; color: #7a7267; }
.jpage .j-note { font-size: 2.1cqw; font-style: italic; color: #7a7267; margin-top: 5cqw; }
.jpage .j-lead { font-family: var(--serif); font-style: italic; font-size: 3.2cqw; color: #26231f; }
.jpage strong { font-weight: 500; color: #2e2a25; }
.jpage .j-folio { position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 2.6cqw; color: #9a9185; margin: 0; }
.jpage .j-example { font-family: var(--serif); font-size: 3.6cqw; color: #26231f; margin: 0; }
.jpage .j-scene { font-family: var(--serif); font-style: italic; font-size: 3cqw; color: #6f675d; margin-bottom: 3cqw; }
.jpage .j-day { font-family: var(--serif); font-size: 3.2cqw; color: #26231f; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.2cqw; padding-bottom: 1.6cqw; border-bottom: 1px solid #e3dccf; }
.jpage .j-week { margin-left: auto; font-family: var(--sans); font-size: 2.1cqw; letter-spacing: .5em; color: #8a8276; }
.jpage .j-sep { color: #b9b1a5; }
.jpage .j-key { font-size: 2cqw; color: #7a7267; display: flex; flex-wrap: wrap; align-items: center; gap: .8cqw 1cqw; }
.jpage .j-blank { display: inline-block; vertical-align: baseline; width: 18cqw; height: 1em; border-bottom: 1px dotted #a99f92; }
.jpage .j-blank.wide { display: block; width: 100%; height: 3.4cqw; }
.jpage .j-box { display: inline-block; width: 2.1cqw; height: 2.1cqw; border: 1px solid #8a8276; border-radius: .5cqw; vertical-align: -.2cqw; margin: 0 .5cqw 0 1cqw; }
.jpage .j-postures { list-style: none; padding: 0; }
.jpage .j-postures li { margin-bottom: .5cqw; }
.jpage .j-postures .j-box { margin-left: 0; }
.jpage .ac { display: inline-grid; place-items: center; min-width: 3.4cqw; height: 3.4cqw; padding: 0 .6cqw; border-radius: 1.7cqw; background: var(--a); color: #fff; font-family: var(--sans); font-weight: 500; font-size: 1.7cqw; letter-spacing: .04em; opacity: .9; }
.jpage .j-table { width: 100%; border-collapse: collapse; margin: 2cqw 0 1cqw; font-size: 2.1cqw; }
.jpage .j-table th { font-weight: 400; font-size: 1.8cqw; letter-spacing: .12em; text-transform: uppercase; color: #8a8276; text-align: left; padding: 0 0 1cqw; border-bottom: 1px solid #cfc7b9; }
.jpage .j-table th:nth-child(2), .jpage .j-table td:nth-child(2) { width: 12cqw; text-align: center; }
.jpage .j-table th:nth-child(3) { width: 26cqw; }
.jpage .j-table td { height: 4.6cqw; border-bottom: 1px solid #e3dccf; padding: 0 .6cqw 0 0; }
.jpage .hand { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 3.5cqw; line-height: 1.1; color: #3b5a76; }
.jpage .j-answer { margin-top: 1cqw; }
.jpage .j-closing { font-family: var(--serif); font-style: italic; font-size: 3cqw; color: #26231f; margin-top: 3cqw; }
.jpage .j-quote { font-family: var(--serif); font-style: italic; font-size: 3.1cqw; color: #26231f; padding-left: 2.4cqw; border-left: 1px solid #b9b1a5; margin: 2cqw 0 3cqw; }
.jpage .j-contents { list-style: none; padding: 0; }
.jpage .j-contents li { display: flex; align-items: baseline; gap: 1.2cqw; margin-bottom: 1.4cqw; font-family: var(--serif); font-size: 3.1cqw; color: #8a8276; }
.jpage .j-contents li::after { content: ""; flex: 1; order: 1; border-bottom: 1px dotted #c9c0b2; transform: translateY(-.5cqw); }
.jpage .j-contents i { order: 2; font-size: 2.6cqw; }
.jpage .j-contents button { font: inherit; color: #26231f; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: #b4705a; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.jpage .j-contents button:hover { text-decoration-thickness: 2px; }
.jpage .j-glossary { font-size: 2.2cqw; color: #6f675d; line-height: 1.7; }
.jpage .j-list { padding-left: 4cqw; }
.jpage .j-tiers { list-style: none; padding: 0; }
.jpage .j-tiers li { margin-bottom: 1.8cqw; padding-left: 2.4cqw; border-left: 2px solid #e3dccf; }
.jpage .j-tiers strong { display: block; }
.jpage-grid { background-image: radial-gradient(circle, #c3b9a9 .9px, transparent 1.3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 3.38% 2.38%, auto; background-position: 1.69% 1.19%, 0 0; }
/* (a 5 mm dot grid on an A5 page: 148 / 5 dots across. Percentages, because the page measures itself) */
.jcover { display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding-top: 30%; }
.jpage .j-cover-quote { font-family: var(--serif); font-style: italic; font-size: 4.4cqw; line-height: 1.45; color: #3a352f; }
.jpage .j-cover-foot { display: flex; flex-direction: column; align-items: center; gap: 2cqw; padding-bottom: 8%; }
.jpage .j-cover-foot .logo { width: 34cqw; background: #2b2926; }
.jpage .j-cover-foot p { font-family: var(--serif); font-size: 3.2cqw; color: #6f675d; margin: 0; }
.jpage .j-cover-foot p.j-cover-title { font-size: 6cqw; color: #2b2926; margin-top: 1cqw; }
.jpage .j-aspects { list-style: none; padding: 0; }
.jpage .j-aspects li { margin-bottom: .8cqw; }
.jpage .j-threshold { display: flex; flex-direction: column; align-items: center; gap: 3cqw; margin-top: 18cqw; font-family: "Caveat", cursive; font-size: 3.6cqw; color: #8a8276; }
.jpage .j-threshold i { width: 70%; border-top: 1.5px solid #8a8276; }
.book-bar { justify-content: center; }
/* the page corners: a small curl that lifts when you point at it */
.turn { position: absolute; z-index: 4; width: 3.2rem; height: 3.2rem; border: 0; padding: 0; cursor: pointer; transition: width 250ms ease, height 250ms ease; filter: drop-shadow(-2px -2px 3px rgba(40,34,26,.18)); }
.turn-next { transform: translate(-100%, -100%); background: linear-gradient(315deg, transparent 50%, #eee8dc 50%, #fbf8f1 100%); }
.turn-prev { transform: translate(0, -100%); background: linear-gradient(45deg, transparent 50%, #eee8dc 50%, #fbf8f1 100%); filter: drop-shadow(2px -2px 3px rgba(40,34,26,.18)); }
.turn:hover, .turn:focus-visible { width: 4.6rem; height: 4.6rem; outline: none; }
.turn[hidden] { display: none; }
/* the turning page: thin strips hinged one to the next, so the page can bend as it turns */
.leaf { position: absolute; z-index: 6; perspective: 2600px; pointer-events: none; }
.leaf .strip { position: absolute; top: 0; transform-style: preserve-3d; }
.leaf .slice { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .slice-back { transform: rotateY(180deg); }
/* each slice reaches 1px into its neighbour, so no seam shows between strips */
.leaf .slice { right: -1px; }
.leaf.from-right .slice { right: 0; left: -1px; }
.leaf .slice .jpage { box-shadow: none !important; }
.leaf .slice-shade { position: absolute; inset: 0; }
.stage { position: relative; }
.stage .cast { position: absolute; top: 0; bottom: 0; width: 50%; opacity: 0; pointer-events: none; }
.stage .cast-right { left: 50%; background: linear-gradient(to right, rgba(45,36,26,.32), rgba(45,36,26,0) 45%); }
.stage .cast-left { left: 0; background: linear-gradient(to left, rgba(45,36,26,.32), rgba(45,36,26,0) 45%); }
@media (max-width: 699px) { .stage .cast-right { left: 0; width: 100%; } }
/* a soft fold at the spine, rather than a hard line between the pages */
.spread-view { position: relative; }
.spread-view::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 9%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to right, rgba(60,50,38,0), rgba(60,50,38,.07) 38%, rgba(60,50,38,.15) 50%, rgba(60,50,38,.07) 62%, rgba(60,50,38,0)); }
@media (max-width: 699px) { .spread-view::after { display: none; } }
.lens { display: none; position: absolute; z-index: 5; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; pointer-events: none; background: #fbf8f1; border: 1px solid rgba(40,34,26,.25); box-shadow: 0 10px 30px rgba(40,34,26,.25); }
.lens .jpage { box-shadow: none !important; }
.journal-buy { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.button[disabled] { opacity: .5; cursor: default; }

/* ---------- room pages ---------- */
.room-aspects { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.room-aspects > span { color: var(--muted); }
.room-aspects + .small { margin-top: -.6rem; }
.room-aspects a { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); text-decoration: none; }
.room-aspects a:hover { color: var(--ink); }
.aspect-notes p[class^="a-"] { border-left: 3px solid var(--a); padding-left: 1.1rem; }
/* the photo is kept mostly grey, so only the lamp's warmth stays: the brief's memory-and-present rule */
/* room photos: soft colour by default (Dorothy, 28 Oct 2026). The photo's own colours, quietened,
   so the light of the room still shows. "Memory and present" (black and white with one natural
   thing in colour) and "warm monochrome" remain as choices on the texture page. */
.veil.memory { position: relative; }
.veil.memory img.base { filter: saturate(.55) contrast(.94) brightness(1.03); transition: filter 1.6s ease; }
.veil.memory img.present { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: none;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 0, #000 var(--r0), transparent var(--r1));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 0, #000 var(--r0), transparent var(--r1)); transition: opacity 1.6s ease; }
:root[data-imgstyle="memory"] .veil.memory img.base { filter: grayscale(1) contrast(.94) brightness(1.03); }
:root[data-imgstyle="memory"] .veil.memory img.present { display: block; }
:root[data-imgstyle="warm"] .veil.memory img.base { filter: grayscale(1) sepia(.32) contrast(.94) brightness(1.02); }
/* the bedroom's hours change the light on the photo, in whichever treatment */
.room-light[data-hour="night"] img.base { filter: saturate(.5) brightness(.8) contrast(.95); }
.room-light[data-hour="morning"] img.base { filter: saturate(.4) brightness(1.12) contrast(.86); }
.room-light[data-hour="afternoon"] img.base { filter: saturate(.62) sepia(.1) brightness(1); }
:root[data-imgstyle="memory"] .room-light[data-hour="night"] img.base { filter: grayscale(1) brightness(.82) contrast(.95); }
:root[data-imgstyle="memory"] .room-light[data-hour="morning"] img.base { filter: grayscale(1) brightness(1.12) contrast(.86); }
:root[data-imgstyle="memory"] .room-light[data-hour="morning"] img.present { opacity: .45; }
:root[data-imgstyle="memory"] .room-light[data-hour="afternoon"] img.base { filter: grayscale(1) sepia(.12) brightness(1); }
:root[data-imgstyle="memory"] .room-light[data-hour="afternoon"] img.present { opacity: .8; }
:root[data-imgstyle="warm"] .room-light img.base { filter: grayscale(1) sepia(.32) contrast(.94) brightness(1.02); }
.room-light figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.5rem; padding-top: 1rem; }
.hours { display: flex; gap: .3rem; flex-wrap: wrap; }
.hours button { font: inherit; font-size: .8rem; letter-spacing: .08em; background: none; border: 1px solid var(--line-strong); border-radius: var(--chip-radius); padding: .25rem .8rem; cursor: pointer; color: var(--ink); }
.hours button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hour-line { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--muted); }
.on-wheel { margin-top: 2rem; padding: 1.3rem 1.3rem .4rem; background: var(--paper-deep); }
.on-wheel ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.on-wheel li { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-size: .92rem; color: var(--muted); }
.on-wheel li strong { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--ink-strong); }

@media print {
  .site-header, .site-footer, .menu, .quiz-nav, .no-print { display: none !important; }
  body { background: #fff; }
}
.section:has(> .wrap > .quiz[hidden]) { display: none; }

/* ---------- Wren, the chat companion ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wren { position: fixed; right: clamp(.8rem, 2.5vw, 1.6rem); bottom: clamp(.8rem, 2.5vw, 1.6rem); z-index: 40; }
.wren-open { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--serif); font-size: 1.12rem; color: var(--ink-strong);   /* sentence case, the serif: a quiet invitation rather than a label */
  background: rgba(244,241,236,.94); border: 1px solid var(--ink); border-radius: 3px;   /* nearly square, like the site's other buttons and the chat window */ padding: .5rem 1rem .5rem .7rem; cursor: pointer; box-shadow: 0 6px 18px rgba(40,34,26,.12); }
.wren-open:hover { background: var(--paper); }
.wren-open img { width: 2rem; height: 2rem; }   /* the curious Wren in charcoal (tools/wren_images.py) */
/* Chatbase draws its own round button; ours opens the chat instead, and the chat window has its own close button */
#chatbase-bubble-button, #chatbase-message-bubbles { display: none !important; }
/* the chat window: Chatbase draws the inside (set in its Display tab); the frame matches the site's panels:
   square corners, a hairline, a soft warm shadow, sitting just above our button */
#chatbase-bubble-window {
  right: clamp(.8rem, 2.5vw, 1.6rem) !important; bottom: calc(clamp(.8rem, 2.5vw, 1.6rem) + 3.6rem) !important;
  width: min(24rem, calc(100vw - 1.6rem)) !important; height: min(38rem, calc(100svh - 6.5rem)) !important;
  border-radius: 2px !important; border: 1px solid var(--line-strong) !important; background: var(--paper) !important;
  box-shadow: 0 18px 50px rgba(40,34,26,.2) !important; overflow: hidden !important; }
#chatbase-bubble-window iframe { border-radius: 0 !important; }
/* our "new chat" button, laid over Chatbase's three dots, beside its × (wren.js) */
.wren-new { position: absolute; top: 18px; right: 44px; width: 44px; height: 36px; z-index: 2; display: grid; place-items: center;
  background: #fff; border: 0; border-radius: 4px; padding: 0; cursor: pointer; color: #1c1b19; transition: background .3s ease; }
.wren-new:hover, .wren-new:focus-visible { background: #f1eee8; }
.wren-new svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px) { .wren-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wren-open { padding: .55rem; } }
.wren-panel { width: min(23rem, calc(100vw - 1.6rem)); background: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(40,34,26,.2); display: flex; flex-direction: column; max-height: min(34rem, calc(100svh - 2rem)); }
.wren-panel[hidden] { display: none; }
.wren-panel header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem .4rem; }
.wren-name { margin: 0; font-family: var(--serif); font-size: 1.4rem; color: var(--ink-strong); }
.wren-close { font: inherit; font-size: 1.4rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--muted); padding: .2rem .4rem; }
.wren-log { overflow-y: auto; padding: .4rem 1.1rem 1rem; }
.w-msg { font-family: var(--serif); font-size: 1.18rem; line-height: 1.5; color: var(--ink-strong); margin: 0 0 .9rem; }
.w-msg.w-you { font-family: var(--sans); font-size: .95rem; color: var(--ink); background: var(--paper-deep); padding: .6rem .8rem; margin-left: 2.5rem; }
.w-choices { list-style: none; padding: 0; margin: -.3rem 0 .9rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.w-choices[hidden] { display: none; }
.w-choices button { font: inherit; font-family: var(--serif); font-size: 1.02rem; background: none; border: 1px solid var(--line-strong); border-radius: var(--chip-radius); padding: .15rem .8rem; cursor: pointer; color: var(--ink-strong); }
.w-choices button:hover { border-color: var(--ink); }
.wren-privacy { margin: 0; padding: .6rem 1.1rem; font-size: .74rem; color: var(--muted); border-top: 1px solid var(--line); }
.wren-privacy a { color: inherit; }
.wren-form { display: flex; border-top: 1px solid var(--line); }
.wren-form input { flex: 1; min-width: 0; font: inherit; font-size: .95rem; border: 0; padding: .9rem 1.1rem; background: transparent; color: var(--ink); }
.wren-form input:focus { outline: none; background: #fbf9f5; }
.wren-form button { font: inherit; font-size: 1.1rem; background: none; border: 0; border-left: 1px solid var(--line); padding: 0 1.1rem; cursor: pointer; color: var(--ink-strong); }
@media print { .wren { display: none; } }
/* Say Hello: Wren listening beside the welcome; once a note is sent, Wren flies off with it (drawings: Dorothy, 30 Oct 2026) */
.hello-title { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.12; margin-bottom: 1.4rem; }   /* the welcome is the heading; "Say Hello" stays as the small label */
.hello-intro { display: grid; gap: .5rem; align-items: end; }
.hello-listening { width: min(9rem, 40%); height: auto; justify-self: end; margin-top: -1rem; will-change: transform, opacity; }
@media (min-width: 860px) { .hello-intro { grid-template-columns: minmax(0, var(--measure)) 13rem; gap: 3rem; } .hello-listening { width: 100%; margin: 0 0 .5rem; } }
.hello-sent { max-width: var(--measure); padding: 1rem 0 3rem; }
.hello-sent img { display: block; width: min(15rem, 60%); height: auto; margin-bottom: 1rem; will-change: transform, opacity; }   /* the flight itself is in hello.js */
.hello-sent p { font-family: var(--serif); font-size: 1.35rem; color: var(--ink-strong); }
.hello-sent .textlink { font: inherit; font-family: var(--sans); font-size: .95rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

.texture-choices { display: grid; gap: .7rem; margin: 2rem 0 1.4rem; }
@media (min-width: 700px) { .texture-choices { grid-template-columns: 1fr 1fr; } }
.texture-choices button { font: inherit; text-align: left; background: rgba(244,241,236,.7); border: 1px solid var(--line-strong); padding: 1rem 1.1rem; cursor: pointer; color: var(--ink); }
.texture-choices button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.texture-choices strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ink-strong); }
.texture-choices span { font-size: .9rem; color: var(--muted); }
.texture-choices .swatches { display: flex; gap: .3rem; margin: .5rem 0; }
.texture-choices .swatches i { width: 1.6rem; height: 1.6rem; border-radius: 50%; }

/* ---------- glossary: a tansu, a chest of drawers ---------- */
.tansu { display: grid; gap: 2.2rem; padding-bottom: 4rem; align-items: start; }
@media (min-width: 760px) { .tansu { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }
.word.swatch { display: inline-flex; align-items: center; gap: .45rem; }
.word.swatch i { width: .9rem; height: .9rem; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(40,34,26,.15); }
.describe-line span { width: 7.5rem !important; }
.chest { background: #e9e2d6; padding: .8rem; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 26px rgba(40,34,26,.1); }
.chest[hidden] { display: none; }
.chest-head { font-size: 1.5rem; margin: .4rem .5rem 1rem; }
.drawer { margin-bottom: .45rem; }
.drawer[hidden] { display: none; }
.drawer summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--paper); padding: .95rem 1.1rem; font-family: var(--serif); font-size: 1.2rem; color: var(--ink-strong);
  box-shadow: 0 1px 0 rgba(40,34,26,.08), 0 0 0 1px rgba(40,34,26,.06); transition: transform 450ms cubic-bezier(.2,.7,.2,1), box-shadow 450ms ease; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary:hover { transform: translateX(.25rem); }
.drawer[open] summary { transform: translateX(.6rem); box-shadow: -6px 4px 12px rgba(40,34,26,.12), 0 0 0 1px rgba(40,34,26,.06); }
/* the pull: a small iron handle, as on a tansu */
.drawer-pull { flex: none; width: 1.6rem; height: .5rem; border: 1.5px solid #6f675d; border-top: 0; border-radius: 0 0 .3rem .3rem; opacity: .7; }
.drawer > div { margin: 0 0 .3rem .6rem; padding: .9rem 1.1rem 1rem; background: #f8f5f0; border-left: 1px solid var(--line); animation: drawer-open 450ms ease; }
.drawer > div p { margin: 0 0 .5rem; font-size: .98rem; }
.drawer > div a { font-size: .85rem; color: var(--muted); text-underline-offset: .2em; }
.chest-sub { margin: -.7rem .5rem 1rem; font-family: var(--serif); font-style: italic; color: var(--muted); }
.drawer summary small { font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; color: var(--muted); margin-left: .4rem; }
.drawer summary .dot { margin-right: .5rem; vertical-align: .1em; }
.words { list-style: none; padding: 0; margin: 0; }
.words li { display: flex; align-items: baseline; gap: .7rem; padding: .3rem 0; }
.words .word-note { font-size: .88rem; color: var(--muted); }
.words .word-note em { display: block; font-size: .8rem; }
.words.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.words.chips li { padding: 0; }
.word { flex: none; font: inherit; font-family: var(--serif); font-size: 1.08rem; color: var(--ink-strong); background: none; border: 1px solid var(--line-strong); border-radius: var(--chip-radius); padding: .1rem .75rem; cursor: pointer; transition: background 300ms ease, color 300ms ease; }
.word:hover { border-color: var(--ink); }
.word[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.word-group { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: .3rem 0 .4rem !important; }
.describe { padding-bottom: 3rem; }
.describe-card { max-width: 44rem; background: var(--paper); padding: 1.8rem 1.8rem 1.4rem; box-shadow: 0 0 0 1px var(--line), 0 14px 34px rgba(40,34,26,.08); }
.describe-card { margin-left: auto; margin-right: auto; }
/* while choosing, a slim line at the bottom shows the words so far */
.words-bar { grid-column: 1 / -1; position: sticky; bottom: 1rem; z-index: 3; justify-self: center; max-width: min(40rem, calc(100% - 4.5rem)); margin-right: 4.5rem;
  display: flex; align-items: center; gap: 1rem; background: var(--paper); padding: .6rem .7rem .6rem 1.1rem; box-shadow: 0 0 0 1px var(--line-strong), 0 10px 24px rgba(40,34,26,.12); font-size: .92rem; }
@media (min-width: 900px) { .words-bar { margin-right: 0; } }
.words-bar[hidden] { display: none; }
.words-bar span { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.words-bar a { flex: none; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-underline-offset: .2em; }
.describe-card h2 { font-size: 1.7rem; margin: .2rem 0 1rem; }
.describe-line { display: flex; gap: 1rem; align-items: baseline; margin: 0 0 .5rem; border-bottom: 1px dotted var(--line-strong); padding-bottom: .4rem; }
.describe-line span { flex: none; width: 5.5rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.describe-line em { font-family: var(--serif); font-size: 1.25rem; color: var(--muted); }
.describe-line em.filled { font-style: normal; color: var(--ink-strong); }
.describe-actions { margin: 1rem 0 .4rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.describe-actions [hidden] { display: none; }
.describe-uses { margin: -.4rem 0 1rem; max-width: 34rem; }
.describe-line select { font: inherit; font-family: var(--serif); font-size: 1.2rem; border: 0; border-bottom: 1px solid var(--line-strong); background: none; color: var(--ink-strong); padding: .1rem 0; }
.records { max-width: 44rem; margin: 2rem auto 0; }
.record-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.record-list li { background: var(--paper); padding: 1rem 1.2rem; box-shadow: 0 0 0 1px var(--line); }
.record-list p { margin: 0 0 .25rem; font-family: var(--serif); font-size: 1.1rem; color: var(--ink-strong); }
.record-list p span { display: inline-block; width: 8rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.record-list .record-head { font-size: 1.25rem; margin-bottom: .5rem; }
.site-terms { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1rem 0 0; }
@media (min-width: 760px) { .site-terms { grid-template-columns: 1fr 1fr; } }
.site-terms > div { background: var(--paper); padding: 1rem 1.1rem; }
.site-terms dt a { font-family: var(--serif); font-size: 1.2rem; color: var(--ink-strong); text-decoration: none; }
.site-terms dt a:hover { text-decoration: underline; text-underline-offset: .18em; }
.site-terms dd { margin: .2rem 0 0; font-size: .93rem; color: var(--ink); }
@keyframes drawer-open { from { opacity: 0; transform: translateY(-.3rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .drawer summary, .drawer > div { transition: none; animation: none; } }

/* ---------- listen to a Journal post ---------- */
.listen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.2rem; }
.listen[hidden] { display: none; }
.listen-play { display: inline-flex; align-items: center; gap: .55rem; font: inherit; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-strong); background: none; border: 1px solid var(--ink); border-radius: 999px; padding: .45rem 1rem .45rem .8rem; cursor: pointer; }
.listen-play::before { content: ""; width: 0; height: 0; border-left: .55rem solid currentColor; border-top: .33rem solid transparent; border-bottom: .33rem solid transparent; }
.listen-play[aria-pressed="true"]::before { width: .5rem; height: .6rem; border: 0; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.listen select { font: inherit; font-size: .85rem; border: 0; background: none; color: var(--muted); cursor: pointer; }
.listen-note { font-size: .78rem; color: var(--muted); }
.listen-voice { display: inline-flex; align-items: center; gap: 1rem; }
.listen-voice[hidden] { display: none; }
/* the writer's recording: a slim bar that stays at the bottom while you read */
.audio-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 45; width: min(44rem, calc(100vw - 1.6rem));
  display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: rgba(244,241,236,.97); box-shadow: 0 0 0 1px var(--line-strong), 0 14px 34px rgba(40,34,26,.16); }
.audio-bar[hidden] { display: none; }
.ab-btn { flex: none; font: inherit; font-size: .8rem; min-width: 2.4rem; height: 2.4rem; border: 1px solid var(--line-strong); border-radius: 50%; background: none; cursor: pointer; color: var(--ink-strong); }
.ab-play { min-width: 2.9rem; height: 2.9rem; border-color: var(--ink); font-size: .9rem; }
.ab-close { border: 0; font-size: 1.3rem; color: var(--muted); }
.ab-track { flex: 1; min-width: 0; padding: 0 .4rem; }
.ab-title { margin: 0; font-family: var(--serif); font-size: 1.05rem; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-title span { font-family: var(--sans); font-size: .75rem; color: var(--muted); }
.ab-track input { width: 100%; accent-color: var(--ink); margin: .15rem 0 0; }
.ab-time { margin: 0; font-size: .72rem; color: var(--muted); }
body:has(.audio-bar:not([hidden])) .wren { bottom: 6rem; }
.prose p.speaking { background: linear-gradient(to right, rgba(163,160,82,.10), rgba(163,160,82,0) 80%); box-shadow: -1rem 0 0 rgba(163,160,82,.10); transition: background 600ms ease; }

/* ---------- shop ---------- */
.shop-group { padding: 2rem var(--gutter) 3rem; }
.shop-group h2 { font-size: 1.9rem; margin-bottom: .4rem; }
.shop-intro { max-width: var(--measure); margin-bottom: 1.4rem; }
.shop-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.6rem; }
.shop-filter .chip { display: inline-flex; align-items: center; gap: .4rem; }
.shop-filter .chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.shop-grid { display: grid; gap: 2.4rem 1.8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }
.shop-card { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--ink); }
.shop-card[hidden] { display: none; }
.shop-img { display: block; position: relative; aspect-ratio: 1; background: var(--paper-deep); overflow: hidden; margin-bottom: .5rem; }
.shop-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 900ms ease; }   /* hover: one soft fade only, no zoom */
/* oils: bottle and plant take turns across the grid (shop.js sets .plant-first); on hover each card shows the other photo */
.shop-img img.plant { position: absolute; inset: 0; opacity: 0; }
.shop-card.plant-first .shop-img img.plant { opacity: 1; }
@media (hover: hover) {
  .shop-card:hover .shop-img img.plant { opacity: 1; }
  .shop-card.plant-first:hover .shop-img img.plant { opacity: 0; }
}
.shop-name { display: flex; align-items: center; gap: .45rem; font-family: var(--serif); font-size: 1.2rem; color: var(--ink-strong); }
.shop-sub { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--muted); }
.shop-price { font-size: .9rem; }
.blend-cards { display: grid; gap: 1.4rem; padding-top: 1rem; }
@media (min-width: 860px) { .blend-cards { grid-template-columns: 1fr 1fr; } }
.blend-card { background: var(--paper); padding: 1.6rem 1.6rem 1.2rem; box-shadow: 0 0 0 1px var(--line); border-top: 3px solid var(--a); }
.blend-card h2 { font-size: 1.7rem; margin: .2rem 0 .4rem; }
.blend-card .signature { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1.15rem; }
.blend-card h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 .4rem; }
.blend-card ul { padding-left: 1.1rem; margin: 0 0 1rem; }

/* texture choices, for comparison (data-texture on <html>). White concrete is the default. */
:root[data-texture="washi"] { --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Cpath d='M199.0 246.3Q207.1 316.7 214.3 387.1' stroke='%23ffffff' stroke-opacity='0.61' stroke-width='0.61' fill='none' stroke-linecap='round'/%3E%3Cpath d='M225.2 277.1Q283.2 305.1 346.9 314.2' stroke='%23ffffff' stroke-opacity='0.79' stroke-width='0.39' fill='none' stroke-linecap='round'/%3E%3Cpath d='M305.1 18.4Q232.4 34.3 158.0 34.8' stroke='%23ffffff' stroke-opacity='0.60' stroke-width='0.63' fill='none' stroke-linecap='round'/%3E%3Cpath d='M6.6 232.5Q18.6 256.2 45.1 258.7' stroke='%23ffffff' stroke-opacity='0.69' stroke-width='0.36' fill='none' stroke-linecap='round'/%3E%3Cpath d='M193.8 370.7Q173.1 414.6 152.4 458.5' transform='translate(0 -440)' stroke='%23ffffff' stroke-opacity='0.69' stroke-width='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M193.8 370.7Q173.1 414.6 152.4 458.5' stroke='%23ffffff' stroke-opacity='0.69' stroke-width='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M122.4 439.0Q61.9 484.1 -8.7 510.9' transform='translate(0 -440)' stroke='%23ffffff' stroke-opacity='0.62' stroke-width='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M122.4 439.0Q61.9 484.1 -8.7 510.9' stroke='%23ffffff' stroke-opacity='0.62' stroke-width='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M122.4 439.0Q61.9 484.1 -8.7 510.9' transform='translate(440 -440)' stroke='%23ffffff' stroke-opacity='0.62' stroke-width='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M122.4 439.0Q61.9 484.1 -8.7 510.9' transform='translate(440 0)' stroke='%23ffffff' stroke-opacity='0.62' stroke-width='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M127.2 30.9Q162.8 84.7 165.4 149.2' stroke='%23ffffff' stroke-opacity='0.84' stroke-width='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M372.8 0.2Q342.1 7.6 312.2 17.8' stroke='%23ffffff' stroke-opacity='0.67' stroke-width='0.79' fill='none' stroke-linecap='round'/%3E%3Cpath d='M32.1 277.0Q58.2 337.7 115.3 371.1' stroke='%23ffffff' stroke-opacity='0.84' stroke-width='0.50' fill='none' stroke-linecap='round'/%3E%3Cpath d='M333.5 51.9Q358.5 83.3 397.3 72.9' stroke='%23ffffff' stroke-opacity='0.60' stroke-width='0.71' fill='none' stroke-linecap='round'/%3E%3Cpath d='M246.1 196.9Q212.0 207.3 205.5 242.4' stroke='%23ffffff' stroke-opacity='0.58' stroke-width='0.64' fill='none' stroke-linecap='round'/%3E%3Cpath d='M185.1 93.7Q151.8 111.9 115.7 100.0' stroke='%23ffffff' stroke-opacity='0.82' stroke-width='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M92.7 173.5Q45.8 225.3 35.0 294.4' stroke='%23ffffff' stroke-opacity='0.61' stroke-width='0.80' fill='none' stroke-linecap='round'/%3E%3Cpath d='M113.6 340.0Q119.3 383.3 159.1 401.1' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='0.39' fill='none' stroke-linecap='round'/%3E%3Cpath d='M106.9 264.6Q135.6 301.2 118.8 344.6' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M381.3 80.4Q358.5 103.8 326.7 96.6' stroke='%23ffffff' stroke-opacity='0.61' stroke-width='0.46' fill='none' stroke-linecap='round'/%3E%3Cpath d='M325.3 413.8Q297.9 437.5 264.5 423.4' stroke='%23ffffff' stroke-opacity='0.68' stroke-width='0.62' fill='none' stroke-linecap='round'/%3E%3Cpath d='M45.7 17.0Q106.1 59.2 152.5 116.4' stroke='%23ffffff' stroke-opacity='0.80' stroke-width='0.47' fill='none' stroke-linecap='round'/%3E%3Cpath d='M262.4 129.1Q226.9 138.2 224.6 174.8' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='0.45' fill='none' stroke-linecap='round'/%3E%3Cpath d='M375.1 270.3Q337.0 265.1 306.6 288.5' stroke='%23ffffff' stroke-opacity='0.63' stroke-width='0.36' fill='none' stroke-linecap='round'/%3E%3Cpath d='M196.1 26.6Q211.3 52.4 219.9 81.0' stroke='%23ffffff' stroke-opacity='0.66' stroke-width='0.41' fill='none' stroke-linecap='round'/%3E%3Cpath d='M392.0 431.4Q363.8 480.1 328.6 524.0' transform='translate(0 -440)' stroke='%23ffffff' stroke-opacity='0.56' stroke-width='0.41' fill='none' stroke-linecap='round'/%3E%3Cpath d='M392.0 431.4Q363.8 480.1 328.6 524.0' stroke='%23ffffff' stroke-opacity='0.56' stroke-width='0.41' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7.9 400.5Q-53.1 383.6 -108.4 414.2' stroke='%23ffffff' stroke-opacity='0.69' stroke-width='0.64' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7.9 400.5Q-53.1 383.6 -108.4 414.2' transform='translate(440 0)' stroke='%23ffffff' stroke-opacity='0.69' stroke-width='0.64' fill='none' stroke-linecap='round'/%3E%3Cpath d='M321.4 140.3Q394.8 155.6 467.2 175.4' transform='translate(-440 0)' stroke='%23ffffff' stroke-opacity='0.82' stroke-width='0.68' fill='none' stroke-linecap='round'/%3E%3Cpath d='M321.4 140.3Q394.8 155.6 467.2 175.4' stroke='%23ffffff' stroke-opacity='0.82' stroke-width='0.68' fill='none' stroke-linecap='round'/%3E%3Cpath d='M324.3 309.6Q261.0 319.3 201.6 343.2' stroke='%23ffffff' stroke-opacity='0.82' stroke-width='0.66' fill='none' stroke-linecap='round'/%3E%3Cpath d='M383.3 183.5Q327.1 213.3 267.8 236.3' stroke='%23ffffff' stroke-opacity='0.66' stroke-width='0.63' fill='none' stroke-linecap='round'/%3E%3Cpath d='M256.4 267.9Q268.4 300.5 235.7 312.1' stroke='%23ffffff' stroke-opacity='0.77' stroke-width='0.75' fill='none' stroke-linecap='round'/%3E%3Cpath d='M170.9 323.4Q197.2 371.3 190.2 425.5' stroke='%23ffffff' stroke-opacity='0.78' stroke-width='0.39' fill='none' stroke-linecap='round'/%3E%3Cpath d='M13.1 264.6Q54.5 287.9 82.8 326.1' stroke='%23ffffff' stroke-opacity='0.73' stroke-width='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M405.0 112.6Q424.3 124.1 429.1 146.0' stroke='%23ffffff' stroke-opacity='0.60' stroke-width='0.44' fill='none' stroke-linecap='round'/%3E%3Cpath d='M398.5 290.4Q353.9 297.0 315.0 320.0' stroke='%23ffffff' stroke-opacity='0.61' stroke-width='0.65' fill='none' stroke-linecap='round'/%3E%3Cpath d='M189.6 354.6Q122.1 375.1 58.9 406.3' stroke='%23ffffff' stroke-opacity='0.64' stroke-width='0.61' fill='none' stroke-linecap='round'/%3E%3Cpath d='M59.9 218.4Q6.0 258.1 -57.5 278.9' stroke='%23ffffff' stroke-opacity='0.63' stroke-width='0.78' fill='none' stroke-linecap='round'/%3E%3Cpath d='M59.9 218.4Q6.0 258.1 -57.5 278.9' transform='translate(440 0)' stroke='%23ffffff' stroke-opacity='0.63' stroke-width='0.78' fill='none' stroke-linecap='round'/%3E%3Cpath d='M74.4 198.3Q99.2 223.5 129.4 242.1' stroke='%23ffffff' stroke-opacity='0.70' stroke-width='0.63' fill='none' stroke-linecap='round'/%3E%3Cpath d='M138.8 369.2Q128.7 445.6 160.8 515.6' transform='translate(0 -440)' stroke='%23a89c88' stroke-opacity='0.19' stroke-width='0.36' fill='none' stroke-linecap='round'/%3E%3Cpath d='M138.8 369.2Q128.7 445.6 160.8 515.6' stroke='%23a89c88' stroke-opacity='0.19' stroke-width='0.36' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18.3 311.8Q59.3 346.0 76.3 396.6' stroke='%23a89c88' stroke-opacity='0.11' stroke-width='0.36' fill='none' stroke-linecap='round'/%3E%3Cpath d='M200.1 10.9Q236.1 68.6 296.5 100.0' stroke='%23a89c88' stroke-opacity='0.16' stroke-width='0.37' fill='none' stroke-linecap='round'/%3E%3Cpath d='M196.5 277.2Q163.4 327.9 104.3 340.9' stroke='%23a89c88' stroke-opacity='0.12' stroke-width='0.66' fill='none' stroke-linecap='round'/%3E%3Cpath d='M209.1 78.6Q221.5 98.2 212.7 119.6' stroke='%23a89c88' stroke-opacity='0.13' stroke-width='0.43' fill='none' stroke-linecap='round'/%3E%3Cpath d='M152.1 306.8Q147.0 356.8 117.9 397.8' stroke='%23a89c88' stroke-opacity='0.18' stroke-width='0.53' fill='none' stroke-linecap='round'/%3E%3Cpath d='M398.7 38.4Q338.7 81.1 307.0 147.6' stroke='%23a89c88' stroke-opacity='0.16' stroke-width='0.55' fill='none' stroke-linecap='round'/%3E%3Cpath d='M400.4 165.8Q358.2 198.6 305.1 203.8' stroke='%23a89c88' stroke-opacity='0.15' stroke-width='0.77' fill='none' stroke-linecap='round'/%3E%3Cpath d='M286.6 90.2Q240.2 128.4 186.1 154.7' stroke='%23a89c88' stroke-opacity='0.12' stroke-width='0.67' fill='none' stroke-linecap='round'/%3E%3Cpath d='M396.0 431.4Q401.9 506.4 378.9 577.9' transform='translate(0 -440)' stroke='%23a89c88' stroke-opacity='0.19' stroke-width='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M396.0 431.4Q401.9 506.4 378.9 577.9' stroke='%23a89c88' stroke-opacity='0.19' stroke-width='0.49' fill='none' stroke-linecap='round'/%3E%3Cpath d='M376.5 153.3Q383.5 177.0 385.6 201.6' stroke='%23a89c88' stroke-opacity='0.15' stroke-width='0.70' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.5 356.0Q-16.1 356.6 -25.5 383.7' stroke='%23a89c88' stroke-opacity='0.18' stroke-width='0.50' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12.5 356.0Q-16.1 356.6 -25.5 383.7' transform='translate(440 0)' stroke='%23a89c88' stroke-opacity='0.18' stroke-width='0.50' fill='none' stroke-linecap='round'/%3E%3Cpath d='M61.8 65.4Q43.5 113.4 -0.7 139.3' stroke='%23a89c88' stroke-opacity='0.19' stroke-width='0.66' fill='none' stroke-linecap='round'/%3E%3Cpath d='M61.8 65.4Q43.5 113.4 -0.7 139.3' transform='translate(440 0)' stroke='%23a89c88' stroke-opacity='0.19' stroke-width='0.66' fill='none' stroke-linecap='round'/%3E%3Cpath d='M216.7 417.6Q236.6 432.5 254.7 449.3' transform='translate(0 -440)' stroke='%23a89c88' stroke-opacity='0.17' stroke-width='0.48' fill='none' stroke-linecap='round'/%3E%3Cpath d='M216.7 417.6Q236.6 432.5 254.7 449.3' stroke='%23a89c88' stroke-opacity='0.17' stroke-width='0.48' fill='none' stroke-linecap='round'/%3E%3Cpath d='M281.1 230.0Q259.4 293.5 256.2 360.5' stroke='%23a89c88' stroke-opacity='0.18' stroke-width='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M396.2 91.6Q329.9 99.4 263.3 104.8' stroke='%23a89c88' stroke-opacity='0.12' stroke-width='0.61' fill='none' stroke-linecap='round'/%3E%3Cpath d='M235.8 221.4L235.1 223.4' stroke='%239b8f7c' stroke-opacity='0.19' stroke-width='0.89' fill='none' stroke-linecap='round'/%3E%3Cpath d='M176.3 352.5L175.5 356.4' stroke='%239b8f7c' stroke-opacity='0.13' stroke-width='0.78' fill='none' stroke-linecap='round'/%3E%3Cpath d='M237.0 182.1L231.4 182.8' stroke='%239b8f7c' stroke-opacity='0.18' stroke-width='0.61' fill='none' stroke-linecap='round'/%3E%3Cpath d='M55.9 190.8L51.2 193.9' stroke='%239b8f7c' stroke-opacity='0.16' stroke-width='0.69' fill='none' stroke-linecap='round'/%3E%3Cpath d='M84.2 271.9L81.8 272.5' stroke='%239b8f7c' stroke-opacity='0.12' stroke-width='0.81' fill='none' stroke-linecap='round'/%3E%3Cpath d='M85.4 100.0L83.6 102.7' stroke='%239b8f7c' stroke-opacity='0.20' stroke-width='0.64' fill='none' stroke-linecap='round'/%3E%3Cpath d='M46.1 321.6L49.9 323.1' stroke='%239b8f7c' stroke-opacity='0.15' stroke-width='0.60' fill='none' stroke-linecap='round'/%3E%3Cpath d='M233.4 192.2L234.7 195.6' stroke='%239b8f7c' stroke-opacity='0.14' stroke-width='0.71' fill='none' stroke-linecap='round'/%3E%3Cpath d='M89.9 277.8L88.1 281.5' stroke='%239b8f7c' stroke-opacity='0.20' stroke-width='0.84' fill='none' stroke-linecap='round'/%3E%3Cpath d='M377.0 102.4L373.4 106.2' stroke='%239b8f7c' stroke-opacity='0.16' stroke-width='0.86' fill='none' stroke-linecap='round'/%3E%3Cpath d='M138.6 406.0L143.2 409.8' stroke='%239b8f7c' stroke-opacity='0.14' stroke-width='0.86' fill='none' stroke-linecap='round'/%3E%3Cpath d='M105.3 319.7L107.0 321.4' stroke='%239b8f7c' stroke-opacity='0.17' stroke-width='0.83' fill='none' stroke-linecap='round'/%3E%3Cpath d='M347.6 55.4L349.0 60.0' stroke='%239b8f7c' stroke-opacity='0.15' stroke-width='0.51' fill='none' stroke-linecap='round'/%3E%3Cpath d='M300.2 401.0L297.8 401.2' stroke='%239b8f7c' stroke-opacity='0.22' stroke-width='0.70' fill='none' stroke-linecap='round'/%3E%3Cpath d='M221.2 301.7L223.1 303.0' stroke='%239b8f7c' stroke-opacity='0.12' stroke-width='0.54' fill='none' stroke-linecap='round'/%3E%3Cpath d='M242.7 226.5L242.2 229.0' stroke='%239b8f7c' stroke-opacity='0.15' stroke-width='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M369.7 435.7L367.4 436.3' stroke='%239b8f7c' stroke-opacity='0.24' stroke-width='0.52' fill='none' stroke-linecap='round'/%3E%3Cpath d='M203.3 336.5L205.3 339.8' stroke='%239b8f7c' stroke-opacity='0.18' stroke-width='0.71' fill='none' stroke-linecap='round'/%3E%3Cpath d='M264.4 5.8L261.2 10.2' stroke='%239b8f7c' stroke-opacity='0.18' stroke-width='0.57' fill='none' stroke-linecap='round'/%3E%3Cpath d='M325.3 178.3L327.5 179.9' stroke='%239b8f7c' stroke-opacity='0.12' stroke-width='0.71' fill='none' stroke-linecap='round'/%3E%3Cpath d='M393.0 352.8L389.7 357.1' stroke='%239b8f7c' stroke-opacity='0.17' stroke-width='0.75' fill='none' stroke-linecap='round'/%3E%3Cpath d='M263.8 221.9L258.6 222.2' stroke='%239b8f7c' stroke-opacity='0.24' stroke-width='0.60' fill='none' stroke-linecap='round'/%3E%3Cpath d='M327.6 342.3L324.5 344.3' stroke='%239b8f7c' stroke-opacity='0.23' stroke-width='0.86' fill='none' stroke-linecap='round'/%3E%3Cpath d='M305.7 337.6L303.0 340.0' stroke='%239b8f7c' stroke-opacity='0.13' stroke-width='0.79' fill='none' stroke-linecap='round'/%3E%3Cpath d='M150.4 206.3L153.8 206.4' stroke='%239b8f7c' stroke-opacity='0.20' stroke-width='0.76' fill='none' stroke-linecap='round'/%3E%3Cpath d='M102.1 415.7L100.5 418.6' stroke='%239b8f7c' stroke-opacity='0.19' stroke-width='0.76' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
:root[data-texture="ando"] { --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='360'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Cpath d='M0 .5H720M.5 0V360' stroke='%238f8576' stroke-opacity='.13' stroke-width='1' fill='none'/%3E%3Ccircle cx='120' cy='90' r='4.2' fill='%238f8576' fill-opacity='.07'/%3E%3Ccircle cx='120' cy='90' r='4.2' fill='none' stroke='%238f8576' stroke-opacity='.14' stroke-width='.8'/%3E%3Ccircle cx='119' cy='89' r='2.4' fill='%23ffffff' fill-opacity='.35'/%3E%3Ccircle cx='120' cy='270' r='4.2' fill='%238f8576' fill-opacity='.07'/%3E%3Ccircle cx='120' cy='270' r='4.2' fill='none' stroke='%238f8576' stroke-opacity='.14' stroke-width='.8'/%3E%3Ccircle cx='119' cy='269' r='2.4' fill='%23ffffff' fill-opacity='.35'/%3E%3Ccircle cx='360' cy='90' r='4.2' fill='%238f8576' fill-opacity='.07'/%3E%3Ccircle cx='360' cy='90' r='4.2' fill='none' stroke='%238f8576' stroke-opacity='.14' stroke-width='.8'/%3E%3Ccircle cx='359' cy='89' r='2.4' fill='%23ffffff' fill-opacity='.35'/%3E%3Ccircle cx='360' cy='270' r='4.2' fill='%238f8576' fill-opacity='.07'/%3E%3Ccircle cx='360' cy='270' r='4.2' fill='none' stroke='%238f8576' stroke-opacity='.14' stroke-width='.8'/%3E%3Ccircle cx='359' cy='269' r='2.4' fill='%23ffffff' fill-opacity='.35'/%3E%3Ccircle cx='600' cy='90' r='4.2' fill='%238f8576' fill-opacity='.07'/%3E%3Ccircle cx='600' cy='90' r='4.2' fill='none' stroke='%238f8576' stroke-opacity='.14' stroke-width='.8'/%3E%3Ccircle cx='599' cy='89' r='2.4' fill='%23ffffff' fill-opacity='.35'/%3E%3Ccircle cx='600' cy='270' r='4.2' fill='%238f8576' fill-opacity='.07'/%3E%3Ccircle cx='600' cy='270' r='4.2' fill='none' stroke='%238f8576' stroke-opacity='.14' stroke-width='.8'/%3E%3Ccircle cx='599' cy='269' r='2.4' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E"); }
:root[data-texture="shoji"] { --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='360'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Cpath d='M0.5 0V360M80.5 0V360M160.5 0V360M0 0.5H240M0 120.5H240M0 240.5H240' stroke='%238f8576' stroke-opacity='.09' stroke-width='1' fill='none'/%3E%3C/svg%3E"); }
:root[data-texture="plan"] { --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Cg stroke='%238f8576' stroke-opacity='.11' fill='none' stroke-linecap='square'%3E%3Cpath d='M60 120H420V380M420 470V640H180V520' stroke-width='3'/%3E%3Cpath d='M420 380A90 90 0 0 1 330 470M420 470H330' stroke-width='.8'/%3E%3Cpath d='M180 640V700M60 120V60' stroke-width='3'/%3E%3Cpath d='M240 120h110M240 116h110M240 124h110' stroke-width='.7'/%3E%3Cpath d='M560 760H860V460M860 380V300H640' stroke-width='3'/%3E%3Cpath d='M860 380A80 80 0 0 0 780 460M860 460H780' stroke-width='.8'/%3E%3Cpath d='M600 240v-14M600 233H820M820 240v-14' stroke-width='.6'/%3E%3Cpath d='M90 820H330M90 816v8M330 816v8' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E"); }

/* three textures after Dorothy's photos (28 Oct 2026), drawn from scratch */
:root[data-texture="coldpress"] { --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='4' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='1.6' diffuseConstant='1' lighting-color='%23ffffff' result='l'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' values='0 0 0 0 .4  0 0 0 0 .38  0 0 0 0 .35  -.42 0 0 0 .34'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
:root[data-texture="quiet"] { --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .41  0 0 0 0 .39  .16 0 0 0 -.055'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .34  0 0 0 0 .32  0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
:root[data-texture="stone"] { --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .52  0 0 0 0 .48  .16 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.013' numOctaves='3' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='1' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4  0 0 0 0 .38  0 0 0 0 .34  3 0 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.35'/%3E%3Cfilter id='g2' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .34  0 0 0 0 .32  0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E"); }

/* room pages: the two smaller photos after the aspect notes */
.room-more { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.4rem 0; }
.room-more .veil { aspect-ratio: 4 / 5; }
@media (max-width: 560px) { .room-more { grid-template-columns: 1fr; } }

/* moodboard gallery and boards */
.board-grid { list-style: none; padding: 0; margin: 3rem 0 6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2.2rem 1.6rem; }
.board-grid a { text-decoration: none; color: var(--ink-strong); display: block; }
.board-grid .veil { display: block; aspect-ratio: 1 / 1; }
/* moodboards are about colour: no light veil over them */
.board-grid .veil::after, .board-pair .veil::after { display: none; }
.board-grid .board-name { display: block; font-family: var(--serif); font-size: 1.25rem; margin-top: .7rem; }
.board-grid a:hover .board-name { text-decoration: underline; }
.board-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 0 0 3rem; }
.board-pair .veil { margin: 0; }
.board-pair .veil img { height: auto; object-fit: contain; }
@media (max-width: 640px) { .board-pair { grid-template-columns: 1fr; } }

/* say hello */
.hello-form { display: grid; gap: 1.1rem; max-width: 32rem; margin: 2rem 0 5rem; }
.hello-form[hidden] { display: none; }   /* rests while Wren carries the note */
.hello-form label { display: grid; gap: .35rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hello-form input, .hello-form textarea { font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: .5rem 0; }
.hello-form textarea { min-height: 8rem; border: 1px solid var(--line); padding: .7rem; resize: vertical; }
.hello-form input:focus, .hello-form textarea:focus { outline: none; border-color: var(--ink); }
.info-list { list-style: none; padding: 0; margin: 2rem 0 6rem; display: grid; gap: 0; max-width: var(--measure); }
.info-list li { border-top: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 1px solid var(--line); }
.info-list a { display: block; padding: 1.1rem 0; text-decoration: none; color: var(--ink-strong); }
.info-list a strong { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; display: block; }
.info-list a span { color: var(--muted); font-size: .95rem; }

/* lines: special terms stay whole, no single word left on the last line */
.nw { white-space: nowrap; }
p, li, dd, figcaption, summary, blockquote { text-wrap: pretty; }
h1, h2, h3, h4, .lede, .pull { text-wrap: balance; }
.prose .page-dates { font-size: .85rem; letter-spacing: .04em; color: var(--muted); margin: 0 0 .2rem; }
.prose .page-dates + h2 { margin-top: 2.4rem; }

/* our own list mark: a short tapered brush stroke, after the logo's hand */
:root {
  --brush-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M1.2 6.3C4.6 4.6 10.4 3.7 16.8 4.1c.5 0 .6.6.1.7C11 5.6 5.6 6.6 1.6 7.1c-.6.1-.9-.6-.4-.8z'/%3E%3C/svg%3E");
  --brush-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6.6c4.8-.9 10-1.3 15.2-1.1-1.3-1-2.6-2-3.6-3.3-.3-.4.2-.8.6-.5 1.8 1.4 3.6 2.6 5.6 3.7.4.2.4.7 0 .9-2 1-3.9 2.2-5.6 3.6-.4.3-.9-.2-.6-.6.9-1.1 2-2 3.2-2.8C10.6 6.3 6 6.6 1.3 7.4c-.6.1-.8-.7-.3-.8z'/%3E%3C/svg%3E");
}
.prose ul:not([class]), details.reveal ul:not([class]) { list-style: none; padding-left: 1.6rem; }
.prose ul:not([class]) > li, details.reveal ul:not([class]) > li { position: relative; }
.prose ul:not([class]) > li::before, details.reveal ul:not([class]) > li::before {
  content: ""; position: absolute; left: -1.5rem; top: .62em; width: .95rem; height: .55rem; background: var(--muted); opacity: .85;
  -webkit-mask: var(--brush-dash) center / contain no-repeat; mask: var(--brush-dash) center / contain no-repeat;
}
.prose ul:not([class]) > li + li, details.reveal ul:not([class]) > li + li { margin-top: .35rem; }

/* search */
.header-tools { display: flex; align-items: center; gap: 1.4rem; }
.search-button { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; padding: .4rem 0; cursor: pointer; color: var(--ink);
  font: inherit; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.search-button svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
@media (max-width: 560px) { .search-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.search-panel { position: fixed; inset: 0; z-index: 60; background: var(--paper); overflow-y: auto; padding: 1.2rem 0 4rem; }
.search-panel[hidden] { display: none; }
.search-top { display: flex; align-items: center; gap: 1.2rem; border-bottom: 1px solid var(--ink); padding: 1rem 0 .4rem; }
.search-top input { flex: 1; min-width: 0; font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--ink-strong); background: none; border: 0; padding: .3rem 0; }
.search-top input:focus { outline: none; }
.search-hint { margin-top: 1rem; }
.search-results { list-style: none; padding: 0; margin: 1.6rem 0 0; max-width: 46rem; }
.search-results li { border-top: 1px solid var(--line); }
.search-results a { display: grid; gap: .2rem; padding: 1rem 0; text-decoration: none; color: var(--ink); }
.search-results strong { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink-strong); }
.search-results .sr-section { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.search-results span:last-child { font-size: .92rem; color: var(--muted); }
.search-results mark { background: none; color: var(--ink-strong); text-decoration: underline; text-decoration-thickness: 1px; }
html.search-open { overflow: hidden; }

/* images: no drag, no long-press save menu on phones */
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* moodboards: the oil pairs under "Comparison with Similar Scents" sit below the section heading */
.prose h3.compare { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.3; color: var(--ink-strong); margin: 2rem 0 .4rem; }
.prose h3.compare a { color: inherit; }
.hello-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Self-Place Bond synergies, first edition: shown, not sold */
.edition-note { font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; color: var(--ink-strong); margin: 1.2rem 0 1.4rem; }
.shop-retired .shop-price { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.shop-retired .shop-img img { filter: saturate(.85); }
.shop-retired .shop-grid + p { margin-top: 2.6rem; }   /* the second-edition link sits clear of the last row of cards, not under one of them */

/* menu: on a computer, the pages under Home & Emotions and Scent Atlas appear beside it when the mouse is over it.
   They keep their place while hidden, so nothing moves. On a phone (no mouse) they stay visible. */
@media (hover: hover) and (min-width: 860px) {
  .menu .main-links > li { position: relative; }
  .menu .main-links > li > a { white-space: nowrap; }
  /* placed just after the word, outside the line's height, so every line of the menu keeps the same spacing */
  .menu-nav { width: 100%; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 4rem; }
  .menu .main-links .sub { position: absolute; top: 50%; display: inline-flex; flex-direction: column; gap: .2rem;
    width: max-content; margin: 0 0 0 1.8rem; padding-left: 1.2rem; border-left: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translate(-.4rem, -50%);
    transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms; }
  .menu .main-links .sub li { margin: 0; }
  .menu .main-links > li:hover .sub, .menu .main-links > li:focus-within .sub {
    opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity 300ms ease, transform 300ms ease; }
}

/* the bookshelf page: a row of spines; choosing one opens its card */
.books-intro .veil { aspect-ratio: 4 / 3; }
.bookshelf-page { padding-bottom: 6rem; }
.shelf { display: flex; align-items: flex-end; gap: 3px; height: 21rem; padding: 0 .5rem; border-bottom: 10px solid #d8cfc2;
  box-shadow: 0 6px 10px -8px rgba(0,0,0,.25); overflow-x: auto; scrollbar-width: thin; }
.spine { flex: none; width: var(--w); height: var(--h); background: var(--b); color: var(--f); border: 0; padding: .9rem 0 .7rem;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .6rem; cursor: pointer;
  border-radius: 2px 2px 0 0; box-shadow: inset 3px 0 0 rgba(255,255,255,.12), inset -3px 0 0 rgba(0,0,0,.12);
  transition: transform 300ms ease, box-shadow 300ms ease; font: inherit; }
.spine:hover, .spine:focus-visible { transform: translateY(-6px); }
.spine[aria-pressed="true"] { transform: translateY(-14px); box-shadow: inset 3px 0 0 rgba(255,255,255,.12), inset -3px 0 0 rgba(0,0,0,.12), 0 10px 14px -10px rgba(0,0,0,.45); }
.spine-title, .spine-author { writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spine-title { font-family: var(--serif); font-size: .98rem; letter-spacing: .02em; max-height: 72%; }
.shelf.few .spine { width: calc(var(--w) * 1.55); }
.shelf.few .spine-title { font-size: 1.08rem; white-space: normal; line-height: 1.15; max-height: 80%; } /* long titles run onto a second line instead of being cut */
.spine-author { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; max-height: 26%; }
.book-card { display: grid; gap: 2rem; margin-top: 3rem; align-items: start; }
@media (min-width: 760px) { .book-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.book-card-photo img { width: 100%; height: auto; display: block; }
.book-card-photo.no-photo { aspect-ratio: 3 / 4; background: var(--b); color: var(--f); display: flex; align-items: center; justify-content: center;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .9; max-width: 22rem; }
.book-card-text h2 { margin-top: .2rem; }
.book-about { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--ink-strong); }   /* the bookshelf card: what the book is about */
.book-why-label { margin: 1.6rem 0 .3rem; }
.book-quote { margin: 1.6rem 0 0; padding-left: 1.2rem; border-left: 1px solid var(--ink); font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--ink-strong); }
.book-quote[hidden] { display: none; }
.book-credit { margin: .1rem 0 1.2rem; font-size: .85rem; color: var(--muted); }
.book-credit[hidden], .book-wonder[hidden] { display: none; }
.book-wonder [data-book-wonder-text] p { margin: 0 0 .7rem;  font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; color: var(--ink-strong); }
@media (max-width: 640px) { .shelf { height: 15rem; } .spine-title { font-size: .85rem; } }

/* ---------- quiet hospitality (30 Oct 2026) ---------- */
/* word hints: a faint dotted underline; a tap shows the plain meaning (hints.js) */
.term-wrap { position: relative; }
/* a dotted ochre underline marks a word with a note (links keep a solid charcoal underline), and with a mouse the pointer
   becomes a small ochre question mark (Dorothy, 30 Oct 2026) */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23f4f1ec' stroke='%239a7748' stroke-width='1.6'/%3E%3Ctext x='12' y='16.4' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='13' font-weight='700' fill='%239a7748'%3E%3F%3C/text%3E%3C/svg%3E") 12 12, help; text-decoration: underline dotted #b39468; text-decoration-thickness: 1.5px; text-underline-offset: .28em; }
.term:hover, .term[aria-expanded="true"] { text-decoration-color: #8a6a3e; }
.term-note { position: absolute; left: 0; top: calc(100% + .45rem); z-index: 30; width: min(18rem, calc(100vw - 2rem)); padding: .8rem .95rem; background: var(--paper);
  border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(40,34,26,.14); font-family: var(--sans); font-size: .9rem; font-style: normal; font-weight: 400;
  line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink); text-align: left; white-space: normal; animation: term-in .35s ease-out; }   /* normal: a term inside a keep-together span must not keep the note on one line */
.term-note[hidden] { display: none; }
.term-note a { color: var(--ink-strong); }
@keyframes term-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .term-note { animation: none; } }
/* one gentle next step at the end of a page (build.py) */
.next-step { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.next-step .wrap > p { max-width: var(--measure); margin: 0; padding-top: 1.6rem; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--ink-strong); }
.next-step .textlink { font-size: inherit; text-underline-offset: .2em; }
/* continue reading, on the Journal page (continue.js) */
.continue-reading { margin-top: 1.4rem; font-size: .95rem; color: var(--muted); }
.continue-reading a { color: var(--ink-strong); }
.continue-reading button { font: inherit; font-size: .85rem; background: none; border: 0; padding: 0 0 0 .6rem; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
/* the pause before a quiz result (quiz.js) */
.quiz-pause { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ink-strong); text-align: center; padding: 5rem 0; animation: term-in 1.2s ease-out; }
/* Journal themes: the old site's tags, as small boxes at the foot of each post and on the theme pages (build.py) */
.post-themes { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 2.4rem 0 0; padding: 0; }
.post-themes li { margin: 0; padding: 0; }
.post-themes li::before { content: none; }
.theme-chip { display: inline-block; padding: .32rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--chip-radius); font-size: .82rem; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; background: transparent; transition: background .3s ease, border-color .3s ease; }
.theme-chip:hover, .theme-chip:focus-visible { background: var(--paper-deep); border-color: var(--ink); }
.post-themes + .companion { margin-top: 1.6rem; }
.companion .sep { color: var(--line-strong); padding: 0 .15rem; }
/* the bookshelf: readers' replies to Dorothy's question (hidden at launch) */
.book-reply { margin-top: 1.4rem; display: grid; gap: .6rem; max-width: 30rem; }
.book-reply-invite { margin: 0; font-size: .95rem; color: var(--ink); }
.book-reply textarea, .book-reply input[type=text] { font: inherit; font-size: .95rem; color: var(--ink); background: transparent; border: 1px solid var(--line); padding: .6rem .7rem; }
.book-reply textarea { resize: vertical; min-height: 4.5rem; }
.book-reply textarea:focus, .book-reply input[type=text]:focus { outline: none; border-color: var(--ink); }
.book-reply-row { display: flex; gap: .6rem; }
.book-reply-row input { flex: 1; min-width: 0; }
.book-reply-note { margin: 0; color: var(--muted); }
.book-reply-ok { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; color: var(--ink); }
.book-reply-ok input { margin-top: .25rem; }
.book-readers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.book-readers li { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink-strong); }
.book-readers li::before { content: none; }
.book-readers[hidden] { display: none; }
.book-reply-open { margin-top: 1.2rem; }
.book-reply-open > summary { list-style: none; cursor: pointer; font-size: .95rem; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line-strong); }
.book-reply-open > summary::-webkit-details-marker { display: none; }
.book-reply-open > summary:hover { text-decoration-color: var(--ink); }
.book-reply-open[open] > summary { color: var(--muted); text-decoration: none; cursor: default; }
/* 30 Oct 2026: what Symbiosis is, under the home page question; an oil's scent family near the top of its page */
/* what Symbiosis is: a small, quiet line above the home page question, in sentence case (capitals would be hard to read at this length) */
.hero-what { margin: 0 0 1.2rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.hero-what span { display: block; }   /* two lines: what we write, then what we offer */
.buy-family { display: flex; align-items: baseline; gap: .45rem; margin: .2rem 0 1rem; font-size: .9rem; color: var(--muted); }
.buy-family .fam-dot { align-self: center; }
.buy-family a { color: var(--ink); }
.shop-note { padding-top: 0; }
.post-oils { margin: 2.4rem 0 0; font-size: .95rem; color: var(--muted); }
.post-oils a { color: var(--ink-strong); }
.post-oils .sep { color: var(--line-strong); padding: 0 .15rem; }
.post-oils + .post-themes { margin-top: 1rem; }
/* the Journal letter (letter.js) */
.journal-letter { max-width: 34rem; padding-bottom: 2rem; }
.journal-letter-line { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--ink-strong); margin: .4rem 0 1rem; }
.journal-letter-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.journal-letter-form[hidden] { display: none; }
.journal-letter-form input[type=email] { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: .55rem 0; }
.journal-letter-form input[type=email]:focus { outline: none; border-color: var(--ink); }
/* the pencil drawing over the plan (plan-sketch.js); it never catches clicks */
.plan-sketch { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.plan-sketch path { fill: none; stroke: #2c2a27; stroke-linecap: round; stroke-linejoin: round; }
.plan-sketch .furniture path { stroke: #4a4640; }
.room .name, .room .dots { z-index: 3; }

@media (max-width: 699px) { .room .name { font-size: 1.02rem; overflow-wrap: anywhere; } .room { padding: .7rem .6rem; } }   /* narrow rooms on phones: names fit inside their walls */