/*
 * Style: cloth and plaster. The site's own layer on the copied system.
 * Overrides of shared parts are marked "override" and listed in the report.
 */

/* ----------------------------------------------------------- The material */
.area-style {
  --linen-veil: light-dark(rgb(247 248 245 / 0), rgb(21 26 37 / .7));
  --linen-under: light-dark(rgb(255 255 255 / .34), rgb(30 36 49 / .56));
  --plaster: light-dark(rgb(232 236 231), rgb(27 37 38));
  --chip-sage: rgb(150 166 138);
  --chip-oat: rgb(214 202 180);
  --chip-clay: rgb(196 128 102);
  --chip-moss: rgb(104 118 78);
  --chip-harbour: rgb(118 140 160);
  --chip-plaster: rgb(222 186 170);
  --chip-plum: rgb(122 84 104);
  --chip-chalk: rgb(236 232 222);
  --chip-ochre: rgb(206 160 82);
  --chip-teal: rgb(64 112 112);
}
.linen {
  background: linear-gradient(var(--linen-veil), var(--linen-veil)), url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/linen.96d7833344.webp) 0 0 / 540px;
}
/* Style's voice: a calm book serif for every heading on this site (override of paper.css h1 to h4). */
body.area-style :is(h1, h2, h3):not(.caps, .u-foot h2, .u-sheet-body h3) { font-family: var(--face-style); font-weight: 400; letter-spacing: -.012em; line-height: 1.12; }
body.area-style ::selection { background: var(--ink-style); color: var(--band-text); }

/* The site tag beside her name: you are in Style. */
.s-brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.s-site {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4) 0 0;
  font-family: var(--face-style);
  font-size: 1.25rem;
  color: var(--area);
  text-decoration: none;
  border-left: 1px solid var(--hairline);
  padding-left: var(--s-3);
}
.s-site-edge { width: 10px; height: 28px; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); }
@media (max-width: 719px) {
  .s-brand { gap: var(--s-2); }
  .u-brand-name { display: none; }
  .s-site { font-size: 1.15rem; padding-left: var(--s-2); }
}
@media (min-width: 720px) and (max-width: 900px) { .u-brand-name span { display: none; } }

/* Arriving from another of Laura's sites: the tag grew in Style's tint, so the
   first frame is Style's tint whichever site it came from (override of paper.css). */
html[data-arrived-from-hub] body.area-style::after { background: var(--tint-style); }

/* ------------------------------------------------------------- Page frame */
main { display: block; }
.page { width: min(100% - 2 * var(--gutter), 76rem); margin: var(--s-4) auto 0; }
.s-section { margin-top: var(--s-8); }
.s-section-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); max-width: 46rem; }
.s-section-head h2 { font-size: var(--text-2xl); }
.s-section-head p { color: var(--ink-2); font-size: var(--text-l); line-height: 1.45; }
.sheet { background: var(--sheet); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 18px 40px -32px var(--shadow-ink); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.sheet h2 { font-size: var(--text-xl); margin-bottom: var(--s-3); }
.sheet h3 { font-size: var(--text-l); margin-bottom: var(--s-2); }
.sheet p + p { margin-top: var(--s-3); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.ticks li { position: relative; padding-left: 1.6rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .8rem; height: .45rem; border-left: 2px solid var(--area); border-bottom: 2px solid var(--area); transform: rotate(-45deg); }
.scope-label { display: block; font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-2); }
.fourteen { color: inherit; }
.band .fourteen { text-decoration-color: currentColor; }

/* ------------------------------------------------- Inner page band (the answer) */
.page-band { position: relative; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 26px 50px -38px var(--shadow-ink); }
.page-band > .band { margin: 0; padding: var(--s-5) clamp(1.25rem, 1rem + 2vw, 3rem) var(--s-5); display: grid; gap: var(--s-3); }
.page-band > .band::before, .page-band > .band::after { display: none; }
.page-band h1 { font-size: var(--text-2xl); color: var(--band-text); line-height: 1.05; max-width: 22ch; }
.page-band .band-line { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); max-width: 50ch; line-height: 1.45; }
.page-band .band-prices { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.page-band .band-price { font-size: 1.0625rem; }
.band-quiet { font-size: var(--text-s); }
.page-band-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) clamp(1.25rem, 1rem + 2vw, 3rem); }
.page-band-foot .weave { flex: 1 1 10rem; height: 26px; border-radius: 2px; }
@media (max-width: 719px) {
  .page-band > .band { padding: var(--s-4); }
  .page-band h1 { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); }
  .page-band-foot { padding: var(--s-2) var(--s-4) var(--s-3); }
  .page-band-foot .seal { display: none; }
}

/* =============================================================== FRONT == */
/* One room, wrapped: the band laid on a linen cloth, the cloth folded back off the room. */
.wrap {
  position: relative;
  display: grid;
  margin-top: var(--s-3);
  --flap-w: 42%;
}
.wrap-cloth { display: none; }
.wrap-band { margin: 0; display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-4); z-index: 3; }
.wrap-band::before, .wrap-band::after { display: none; }
.wrap-band h1 { font-size: clamp(1.625rem, 1.15rem + 1.9vw, 2.75rem); line-height: 1.12; color: var(--band-text); letter-spacing: -.015em; max-width: 24ch; }
.band-prices { display: grid; gap: var(--s-1); }
.wrap-band .band-price { font-size: 1.125rem; }
.wrap-call { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); z-index: 3; }

.room { position: relative; margin: 0; perspective: 2400px; }
.room-photo { position: relative; overflow: hidden; background: var(--sheet-shade); }
.room-photo picture { display: contents; }
.room-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.room-pic-lamp { opacity: 0; transition: opacity 420ms var(--ease-paper); }
.room[data-light="lamp"] .room-pic-lamp { opacity: 1; }
/* The shadow the cloth throws on the room, pre-drawn, faded as it lifts. */
.room-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(20 18 14 / .34) 0, rgb(20 18 14 / .14) calc(var(--flap-w) * .72), transparent calc(var(--flap-w) + 6%));
  opacity: 1;
  transition: opacity 900ms var(--ease-paper);
  pointer-events: none;
}
.room[data-cloth="back"] .room-photo::after { opacity: 0; }

/* The flap: the part of the cloth that lies over the room, hinged at its left edge. */
.flap {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--flap-w);
  z-index: 2;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  transition: transform 1200ms var(--ease-paper);
}
.room[data-cloth="back"] .flap { transform: rotateY(-180deg); }
.room.is-held .flap { transition: none; }
.flap-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(var(--linen-veil), var(--linen-veil)), url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/linen.96d7833344.webp) 0 0 / 540px;
  clip-path: polygon(0 0, 100% 0, 64% 100%, 0 100%);
}
/* A soft fold line along the hinge and a turned edge along the free side. */
.flap-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / .14), transparent 12%), linear-gradient(110deg, transparent 58%, rgb(255 255 255 / .18) 66%, transparent 74%);
}
.flap-back {
  transform: rotateY(180deg);
  background: linear-gradient(var(--linen-under), var(--linen-under)), url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/linen.96d7833344.webp) 270px 0 / 540px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 36% 100%);
}
.flap-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgb(0 0 0 / .12), transparent 14%); }
.flap-grip {
  position: absolute;
  z-index: 4;
  top: 0;
  left: calc(var(--flap-w) - 3.25rem);
  width: 3.25rem;
  height: 3.25rem;
  cursor: grab;
  touch-action: none;
  transition: transform 1200ms var(--ease-paper);
}
.flap-grip::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 30px;
  height: 30px;
  background: linear-gradient(225deg, transparent 50%, rgb(222 216 204) 50%);
  box-shadow: -3px 3px 6px -3px rgb(0 0 0 / .4);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
html:not(.lt-js) .flap-grip { display: none; }
.room-cap { margin-top: var(--s-2); }

/* The light switch: two positions, changes only the picture it sits under. */
.room-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.light-switch { display: inline-flex; padding: 3px; margin: 0; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--sheet-raised); gap: 2px; }
.light-switch label { position: relative; }
.light-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.light-switch span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-m);
  color: var(--ink-2);
  transition: background-color 220ms var(--ease-paper), color 220ms;
}
.light-switch svg { width: 18px; height: 18px; flex: none; }
.light-switch input:checked + span { background: var(--ink-style); color: var(--band-text); }
.light-switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .light-switch label:hover input:not(:checked) + span { color: var(--ink); background: var(--sheet-shade); } }
.cloth-toggle .ct-lay, .room[data-cloth="back"] ~ .room-tools .ct-fold { display: none; }
.room[data-cloth="back"] ~ .room-tools .ct-lay { display: inline; }
html:not(.lt-js) .cloth-toggle { display: none; }
.room-status { flex-basis: 100%; min-height: 1.5em; color: var(--ink-2); font-size: var(--text-s); }

/* Laptop: the cloth on the table at the left, the band across its fold, the room to the right. */
@media (min-width: 1180px) {
  .wrap {
    --flap-w: 27rem;
    grid-template-columns: 27rem minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    grid-template-areas: "band room" "call room" ". tools";
    align-items: end;
  }
  .wrap-cloth {
    display: block;
    grid-area: 1 / 1 / 3 / 2;
    align-self: stretch;
    position: relative;
    background: linear-gradient(var(--linen-veil), var(--linen-veil)), url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/linen.96d7833344.webp) 0 0 / 540px;
    box-shadow: inset -14px 0 18px -16px rgb(0 0 0 / .35);
  }
  /* The folded flap's own shadow on the cloth below it, pre-drawn. */
  .wrap-cloth::after { content: ""; position: absolute; inset: 0; background: linear-gradient(260deg, rgb(0 0 0 / .18), transparent 30%); opacity: 0; transition: opacity 900ms var(--ease-paper); }
  .wrap:has(.room[data-cloth="back"]) .wrap-cloth::after { opacity: 1; }
  .wrap-band {
    grid-area: band;
    align-self: center;
    margin: 0 -2.5rem 0 -1rem;
    padding: var(--s-5) var(--s-6) var(--s-5) calc(var(--s-5) + 1rem);
    box-shadow: 0 10px 22px -14px rgb(0 0 0 / .45);
  }
  /* Its ends wrap behind: the near end under the cloth's edge, the far end over the fold. */
  .wrap-band::before, .wrap-band::after { display: block; }
  .wrap-band::before { left: 0; width: 1rem; }
  .wrap-band::after { right: 0; width: 2.5rem; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .wrap-call {
    grid-area: call;
    margin: var(--s-5) var(--s-5) var(--s-5);
    padding: var(--s-4);
    background: var(--sheet-raised);
    border-radius: var(--radius-paper);
    box-shadow: 0 12px 24px -16px var(--shadow-ink);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .room { grid-area: room; align-self: stretch; }
  .room-photo { height: 100%; min-height: min(40rem, calc(100vh - 12rem)); }
  .room-tools { grid-area: tools; }
  .room-cap { position: absolute; right: var(--s-3); bottom: var(--s-3); margin: 0; padding: 4px 10px; border-radius: 3px; background: rgb(21 26 37 / .7); color: rgb(247 248 245); z-index: 3; }
  .room[data-cloth="back"] .flap-grip { transform: translateX(calc(-1 * var(--flap-w))); }
  .room[data-cloth="back"] .flap-grip::before { right: auto; left: 6px; background: linear-gradient(135deg, transparent 50%, rgb(222 216 204) 50%); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
}
@media (min-width: 1800px) {
  .wrap { --flap-w: 31rem; grid-template-columns: 31rem minmax(0, 1fr); }
}

/* Tablet: band across the top, the room below, the cloth folds off its left edge. */
@media (min-width: 720px) and (max-width: 1179px) {
  .wrap { grid-template-columns: 1fr auto; grid-template-areas: "band band" "room room" "tools call"; align-items: center; column-gap: var(--s-4); }
  .wrap-band { grid-area: band; margin: 0 calc(-1 * var(--s-2)); padding: var(--s-5) var(--s-6); }
  .wrap-call { grid-area: call; justify-content: flex-end; margin-top: var(--s-3); }
  .wrap-call .text-link { display: none; }
  .room { grid-area: room; overflow: clip; }
  .room-photo { aspect-ratio: 16 / 10; }
  .room-tools { grid-area: tools; }
}
/* Phone: the band first, then the room as a tall crop, the switch under the thumb. */
@media (max-width: 719px) {
  .wrap { grid-template-areas: "band" "room" "tools"; margin-top: 0; }
  .wrap-band { grid-area: band; margin: 0 calc(-1 * var(--gutter)); padding: var(--s-4) var(--gutter) var(--s-4); gap: var(--s-2); }
  .wrap-band h1 { font-size: 1.5rem; line-height: 1.16; }
  .band-prices { gap: 2px; }
  .wrap-band .band-price { font-size: 1.0625rem; }
  .wrap-call { display: none; }
  .room { grid-area: room; overflow: clip; margin: 0 calc(-1 * var(--gutter)); }
  .room-photo { aspect-ratio: 4 / 4.3; }
  .room-pic { object-position: 42% 50%; }
  .room-tools { grid-area: tools; margin-top: var(--s-3); }
  .light-switch { flex: 1; }
  .light-switch label { flex: 1; }
  .light-switch span { width: 100%; justify-content: center; min-height: 3rem; }
  .cloth-toggle { flex: 1 1 100%; }
  .room-cap { padding: 0 var(--gutter); }
}

/* Arrival is CSS-free: the script folds the cloth back once, 200 ms after paint. */
@media (prefers-reduced-motion: reduce) {
  .flap, .flap-grip, .room-photo::after, .wrap-cloth::after { transition: none; }
  .room-pic-lamp { transition-duration: 150ms; }
}

/* ---------------------------------------------------- The swatch book (front) */
.book { margin-top: var(--s-8); }
.book-head { display: grid; gap: var(--s-2); max-width: 44rem; margin-bottom: var(--s-5); }
.book-head h2 { font-size: var(--text-2xl); }
.book-head p { font-size: var(--text-l); line-height: 1.45; }
.book-groups { display: grid; gap: var(--s-6); }
.book-group h3 { color: var(--ink-2); margin-bottom: var(--s-4); }
.swatches { display: flex; gap: var(--s-3); }
.swatch {
  --chip: var(--chip-oat);
  position: relative;
  display: grid;
  grid-template-rows: 7.5rem auto auto 1fr;
  width: 11.5rem;
  min-height: 16rem;
  padding: 0 0 var(--s-4);
  background: var(--sheet-raised);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 1px 0 var(--hairline), 0 10px 22px -16px var(--shadow-ink);
  color: var(--ink);
  text-decoration: none;
  transform-origin: 1.4rem calc(100% - 1.4rem);
  transition: transform var(--t-lift) var(--ease-paper), box-shadow var(--t-lift) var(--ease-paper);
}
.swatch-chip { background: var(--chip); border-radius: 4px 4px 0 0; position: relative; }
.swatch-chip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgb(255 255 255 / .12)); }
/* The rivet that holds the book together. */
.swatch::after { content: ""; position: absolute; left: 1rem; bottom: 1rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--ground); box-shadow: inset 0 1px 2px var(--shadow-ink); }
.swatch-name { font-family: var(--face-style); font-size: 1.375rem; line-height: 1.1; padding: var(--s-3) var(--s-4) 0; }
.swatch-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); padding: var(--s-1) var(--s-4) 0; font-weight: 650; }
.swatch-line { padding: var(--s-2) var(--s-4) 0 var(--s-4); font-size: var(--text-s); color: var(--ink-2); line-height: 1.35; padding-left: var(--s-4); }
.swatch:nth-child(1) { --r: -2.5deg; } .swatch:nth-child(2) { --r: 1.5deg; }
@media (hover: hover) {
  .swatch:hover { transform: translateY(-6px) rotate(0deg); box-shadow: 0 1px 0 var(--hairline), 0 22px 30px -18px var(--shadow-ink); z-index: 2; }
}
.swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.swatch:active { transform: scale(.985); transition-duration: var(--t-press); }
.sw-sage { --chip: var(--chip-sage); } .sw-oat { --chip: var(--chip-oat); } .sw-clay { --chip: var(--chip-clay); }
.sw-moss { --chip: var(--chip-moss); } .sw-harbour { --chip: var(--chip-harbour); } .sw-plaster { --chip: var(--chip-plaster); }
.sw-plum { --chip: var(--chip-plum); } .sw-chalk { --chip: var(--chip-chalk); } .sw-ochre { --chip: var(--chip-ochre); } .sw-teal { --chip: var(--chip-teal); }
.book-foot { display: grid; gap: var(--s-1); margin-top: var(--s-5); justify-items: start; }
.book-foot .quiet-line { margin: 0; }
.book-foot .quiet-line a { display: inline-flex; align-items: center; min-height: 32px; }
.s-season { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); min-height: 3.25rem; padding: var(--s-2) var(--s-5) var(--s-2) var(--s-2); border-radius: var(--radius-tag); background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline); color: var(--ink); text-decoration: none; transition: transform var(--t-lift) var(--ease-paper); }
.s-season b { color: var(--area); font-weight: 650; margin-right: var(--s-1); }
.s-season-mark { width: 2.25rem; align-self: stretch; border-radius: 4px; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); }
@media (hover: hover) { .s-season:hover { transform: translateY(-2px); } }
@media (min-width: 900px) {
  .book-groups { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--s-7); }
  .swatches { gap: 0; }
  .swatches li + li { margin-left: -.75rem; }
  .swatch { transform: rotate(var(--r, 0deg)); }
  .swatches li:nth-child(2) .swatch { --r: 1.5deg; } .swatches li:nth-child(1) .swatch { --r: -2deg; }
  .swatches li:nth-child(3) .swatch { --r: -1deg; } .swatches li:nth-child(4) .swatch { --r: 2.2deg; }
}
@media (max-width: 899px) {
  .swatches { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
  .swatch { width: auto; min-height: 4.25rem; grid-template-columns: 4rem 1fr auto; grid-template-rows: auto auto; grid-template-areas: "chip name price" "chip line line"; border-radius: var(--radius-tag); padding: 0; align-items: center; }
  .swatch::after { display: none; }
  .swatch-chip { grid-area: chip; align-self: stretch; border-radius: var(--radius-tag) 0 0 var(--radius-tag); }
  .swatch-name { grid-area: name; font-size: 1.2rem; padding: var(--s-2) var(--s-3) 0; }
  .swatch-price { grid-area: price; flex-direction: column; align-items: flex-end; padding: var(--s-2) var(--s-3) 0; gap: 0; text-align: right; line-height: 1.2; }
  .swatch-line { grid-area: line; padding: 0 var(--s-3) var(--s-2); }
}

/* ---------------------------------------------------- Three stories (front) */
.stories { margin-top: var(--s-8); }
.story-list { display: grid; gap: var(--s-4); }
.story { position: relative; display: grid; gap: 0; color: var(--ink); text-decoration: none; background: var(--sheet-raised); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 14px 30px -24px var(--shadow-ink); transition: transform var(--t-lift) var(--ease-paper); overflow: hidden; }
.story-print img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-band { margin: -1.5rem 0 0 -.4rem; width: calc(100% - 2rem); padding: .6rem 1rem .65rem 1.4rem; }
.story-band::before { display: block; left: 0; }
.story-band::after { display: none; }
.story-band .band-name { font-size: 1.35rem; }
.story-line { padding: var(--s-3) var(--s-4) var(--s-4); color: var(--ink-2); font-size: var(--text-m); }
@media (hover: hover) { .story:hover { transform: translateY(-4px); } }
.story:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.story:active { transform: scale(.985); }
@media (min-width: 900px) { .story-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) {
  .story { grid-template-columns: 7.5rem 1fr; grid-template-areas: "print band" "print line"; align-items: start; }
  .story-print { grid-area: print; height: 100%; }
  .story-print img { height: 100%; aspect-ratio: auto; min-height: 7.5rem; }
  .story-band { grid-area: band; margin: var(--s-3) 0 0; width: auto; padding: .45rem .8rem; }
  .story-band::before { display: none; }
  .story-band .band-name { font-size: 1.15rem; }
  .story-line { grid-area: line; padding: var(--s-2) var(--s-3) var(--s-3); font-size: var(--text-s); }
}

/* -------------------------------------------------------------- Neighbours */
.neighbours { margin-top: var(--s-8); }
.neighbours h2 { font-family: var(--face-sans) !important; font-size: var(--text-s); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 650 !important; color: var(--ink-2); margin-bottom: var(--s-3); }
.neighbours ul { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.neighbours .door { height: 100%; }
.neighbours .quiet-line { margin-top: var(--s-3); }
.s-sheet-gap { margin-top: var(--s-5); }
.s-sheet-pages a { font-family: var(--face-style); font-weight: 400 !important; font-size: 1.0625rem; }

/* ------------------------------------------- Front: the switch on the picture */
/* The light control sits on the room picture itself: plainly it changes the picture, never the page. */
.room-switch { position: absolute; z-index: 5; left: var(--s-3); bottom: var(--s-3); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .55); }
.room-tools { margin-top: var(--s-3); }
@media (min-width: 1180px) {
  .room-tools { justify-content: flex-end; }
}
@media (max-width: 719px) {
  .room-photo { aspect-ratio: 39 / 34; }
  .room-switch { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); display: flex; }
  .room-switch label { flex: 1; }
  .room-switch span { width: 100%; justify-content: center; min-height: 3rem; }
  .room-cap { position: static; padding: 0 var(--gutter); margin-top: var(--s-2); }
  .room-tools { margin-top: var(--s-2); }
  .cloth-toggle { flex: 0 1 auto; }
  .room-status:empty { display: none; }
}

/* Stories: three across on a laptop; a deck you swipe, with buttons, on a phone. */
@media (min-width: 900px) {
  .story-list.swipe-track { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .stories-swipe .swipe-controls { display: none; }
}
@media (max-width: 899px) {
  .story-list.swipe-track { grid-auto-columns: 84%; gap: var(--s-3); padding-bottom: var(--s-2); }
  .story-list .story { grid-template-columns: 1fr; grid-template-areas: "print" "band" "line"; height: 100%; }
  .story-list .story-print img { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .story-list .story-band { margin: -1.25rem 0 0 0; width: calc(100% - 1.5rem); }
}

/* The foot on a phone: two columns, so the small print is one short sheet. */
@media (max-width: 719px) {
  .u-foot { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-4); margin-top: var(--s-7); }
  .u-foot-sign { grid-column: 1 / -1; }
  .u-foot a { min-height: 44px; font-size: var(--text-s); }
}

/* ============================================================ INNER PAGES == */
.page-band-foot .weave { display: block; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); opacity: .75; }
.page-band .band-caps { opacity: .95; }
.page-band .fourteen { display: inline-flex; align-items: center; min-height: 2rem; text-decoration-color: currentColor; }
.s-section > .s-section-head:first-child { margin-top: 0; }
.quiet-line .fourteen { display: inline-flex; align-items: center; min-height: 2rem; }

/* Turn the page: the next pages of this site, as banded tags. */
.turn { margin-top: var(--s-8); }
.turn-h, .neighbours h2 { font-family: var(--face-sans) !important; font-size: var(--text-s); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 650 !important; color: var(--ink-2); margin-bottom: var(--s-3); }
.turn-list { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.turn .band-name { font-size: 1.25rem; }

/* A plan, or Laura in the room. */
.which-cols { display: grid; gap: var(--s-5); margin-block: var(--s-4); }
.which-cols h3 { color: var(--area); }
@media (min-width: 720px) { .which-cols { grid-template-columns: 1fr 1fr; } }

/* ============================================================== WAYS IN == */
.sw-deck { list-style: none; margin: 0; padding: 0; }
.sw-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  background: var(--sheet-raised);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 1px 0 var(--hairline), 0 12px 26px -18px var(--shadow-ink);
  color: var(--ink);
}
.sw-card .swatch-chip { grid-row: 1; display: block; height: 5.5rem; background: var(--chip, var(--chip-oat)); border-radius: 4px 4px 0 0; position: relative; overflow: hidden; }
.sw-weave { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: rgb(255 255 255 / .5); -webkit-mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/system/patterns/asanoha.f092e03481.svg) repeat 0 0 / 16px 27.71px; mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/system/patterns/asanoha.f092e03481.svg) repeat 0 0 / 16px 27.71px; }
.sw-group { grid-row: 2; padding: var(--s-3) var(--s-4) 0; color: var(--ink-2); font-size: var(--text-xs); }
.sw-title { grid-row: 3; margin: 0; font: inherit; }
.sw-head, .sw-head-still { font-family: var(--face-sans); font-size: var(--text-body); display: grid; gap: 2px; width: 100%; padding: var(--s-2) var(--s-4) var(--s-3); border: 0; background: transparent; color: inherit; text-align: left; border-radius: 0; }
.sw-head { cursor: pointer; min-height: 48px; }
.sw-head:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 4px; }
.sw-name { font-family: var(--face-style); font-size: 1.375rem; line-height: 1.1; }
.sw-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); font-weight: 650; font-size: var(--text-m); }
.sw-line { font-size: var(--text-s); color: var(--ink-2); line-height: 1.35; }
.sw-body { grid-row: 4; padding: 0 var(--s-4) var(--s-5); border-top: 1px dashed var(--crease); padding-top: var(--s-3); display: grid; gap: var(--s-3); align-content: start; font-size: var(--text-m); }
.sw-facts { margin: 0; display: grid; gap: var(--s-2); }
.sw-facts dt { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.sw-facts dd { margin: 0; }
.sw-card::after { content: ""; position: absolute; left: .9rem; bottom: .9rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ground); box-shadow: inset 0 1px 2px var(--shadow-ink); }
.glance { margin-top: var(--s-6); }
.glance h3 { font-size: var(--text-s); margin-bottom: var(--s-2); }
.glance-list { display: grid; gap: 0; }
.glance-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); min-height: 44px; padding: var(--s-2) 0; border-top: 1px dashed var(--crease); text-decoration: none; }
.glance-list a > span:first-child { font-family: var(--face-style); font-size: 1.125rem; margin-right: auto; }
.glance-list .price { font-weight: 650; }
.swatchbook .quiet-line { margin-top: var(--s-2); }

@media (min-width: 900px) {
  .sw-deck.swipe-track { display: flex; flex-wrap: wrap; align-items: flex-end; overflow: visible; row-gap: var(--s-7); padding: var(--s-6) 0 0 var(--s-3); }
  .sw-swipe .swipe-controls, .glance { display: none; }
  .sw-card { width: 9.25rem; min-height: 15.5rem; margin-left: -1rem; transform: rotate(var(--r, 0deg)); transform-origin: 1.3rem calc(100% - 1.3rem); transition: transform var(--t-lift) var(--ease-paper), box-shadow var(--t-lift) var(--ease-paper); }
  .sw-card:first-child { margin-left: 0; }
  .sw-card:nth-child(1) { --r: -2deg; } .sw-card:nth-child(2) { --r: 1.5deg; } .sw-card:nth-child(3) { --r: -1.5deg; }
  .sw-card:nth-child(4) { --r: 1deg; } .sw-card:nth-child(5) { --r: -1deg; } .sw-card:nth-child(6) { --r: 2deg; }
  .sw-card.sw-first:not(:first-child) { margin-left: var(--s-5); }
  .sw-card:not(.is-lifted) .sw-name { font-size: 1.25rem; }
  .sw-card .swatch-chip { height: 7rem; }
  .sw-card:not(.is-lifted) .sw-head { padding-bottom: 2.25rem; }
  .sw-card.is-lifted .swatch-chip { height: 5rem; }
  .sw-group { position: absolute; grid-row: 1 / -1; left: 0; bottom: 100%; padding: 0 0 var(--s-3); white-space: nowrap; }
  .sw-card:not(.sw-first) .sw-group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sw-card.is-lifted { width: 23rem; z-index: 3; transform: translateY(-14px) rotate(0deg); box-shadow: 0 1px 0 var(--hairline), 0 28px 40px -24px var(--shadow-ink); }
  .sw-card:not(.is-lifted) .sw-head:hover { background: color-mix(in srgb, var(--chip) 14%, transparent); }
  @media (hover: hover) { .sw-card:not(.is-lifted):hover { transform: translateY(-6px) rotate(0deg); z-index: 2; } }
  .sw-card:not(.is-lifted):active { transform: scale(.985); }
  .sw-head[aria-expanded="true"] { cursor: default; }
  .sw-head[aria-expanded="true"] .sw-name { font-size: 1.75rem; }
}
@media (max-width: 899px) {
  .sw-deck.swipe-track { grid-auto-columns: 86%; gap: var(--s-3); padding-bottom: var(--s-3); }
  .sw-card .swatch-chip { height: 4rem; }
  .sw-name { font-size: 1.5rem; }
  .sw-swipe .swipe-controls { margin-top: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) { .sw-card { transition: none; } }
.turn-list .door { height: 100%; }
.turn-list .door-row .band { height: 100%; }
@media (max-width: 1179px) {
  .wrap { --flap-w: 42vw; }
  .room[data-cloth="back"] .flap-grip { transform: translateX(calc(-1 * (var(--flap-w) - 3.25rem))); }
  .room[data-cloth="back"] .flap-grip::before { right: auto; left: 6px; background: linear-gradient(135deg, transparent 50%, rgb(222 216 204) 50%); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
}

/* =============================================================== COLOUR == */
.area-style {
  --paint-lichen: rgb(138 150 118);
  --paint-brick: rgb(196 120 100);
  --paint-estuary: rgb(108 132 160);
  --paint-barley: rgb(214 180 116);
  --paint-damson: rgb(108 66 90);
  --paint-chalk: rgb(240 236 224);
}
.paint { display: grid; gap: var(--s-5); align-items: start; }
.wall { margin: 0; }
.wall-photo { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--sheet-shade); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 22px 44px -30px var(--shadow-ink); }
.wall-photo picture { display: contents; }
.wall-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wall-pic-evening { opacity: 0; transition: opacity 420ms var(--ease-paper); }
.wall[data-light="evening"] .wall-pic-evening { opacity: 1; }
/* A painted patch: primer, the paint, then the light it is seen in. */
.patch { position: absolute; z-index: 2; opacity: 0; transform: scale(.96); transition: opacity 260ms var(--ease-paper), transform 260ms var(--ease-paper); -webkit-mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/patch.de2871e6cc.svg) center / 100% 100% no-repeat; mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/patch.de2871e6cc.svg) center / 100% 100% no-repeat; }
.patch.is-painted { opacity: 1; transform: none; }
.patch::before { content: ""; position: absolute; inset: 0; background: rgb(236 233 226); opacity: .9; }
.patch-paint { position: absolute; inset: 0; background: var(--paint, transparent); mix-blend-mode: multiply; }
.patch::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; background: rgb(232 238 248); transition: background-color 420ms var(--ease-paper); }
.wall[data-light="evening"] .patch::after { background: rgb(226 182 138); }
.slot-1 { left: 37.5%; top: 13.5%; width: 24.5%; height: 35.5%; }
.slot-2 { left: 62.8%; top: 18.8%; width: 34%; height: 40.5%; }
.slot-3 { left: 44.5%; top: 52.5%; width: 25.5%; height: 34.5%; }
.c-lichen { --paint: var(--paint-lichen); } .c-brick { --paint: var(--paint-brick); } .c-estuary { --paint: var(--paint-estuary); }
.c-barley { --paint: var(--paint-barley); } .c-damson { --paint: var(--paint-damson); } .c-chalk { --paint: var(--paint-chalk); }
.paint-panel { display: grid; gap: var(--s-4); align-content: start; }
.paint-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.paint-head h2 { margin: 0 !important; }
.paint-chits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); border: 0; padding: 0; margin: 0; min-width: 0; min-inline-size: 0; }
.paint-chit { position: relative; }
.paint-chit input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.paint-chit span { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-2) var(--s-3); border: 1.5px solid var(--hairline); border-radius: var(--radius-tag); background: var(--sheet-raised); font-weight: 600; font-size: var(--text-m); line-height: 1.2; transition: transform var(--t-lift) var(--ease-paper), border-color var(--t-lift); }
.paint-chit i { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 3px; background: var(--paint); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); -webkit-mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/patch.de2871e6cc.svg) center / 100% 100%; mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/patch.de2871e6cc.svg) center / 100% 100%; }
@media (hover: hover) { .paint-chit:hover span { transform: translateY(-2px); } }
.paint-chit input:checked + span { border-color: var(--ink); box-shadow: inset 0 2px 0 var(--sheet-shade); transform: translateY(1px); }
.paint-chit input:checked + span::after { content: ""; margin-left: auto; width: .55rem; height: .95rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); }
.paint-chit input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.paint-status { color: var(--ink); }
.paint-nojs { display: none; }
html:not(.lt-js) .paint-panel { display: none; }
html:not(.lt-js) .paint-nojs { display: block; }
html:not(.lt-js) .room-switch { display: none; }
@media (min-width: 900px) {
  .paint { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .paint { margin-top: var(--s-5); }
  .wall { margin-inline: calc(-1 * var(--gutter)); }
  .wall-photo { border-radius: 0; }
  .wall .caption { padding: 0 var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .patch, .wall-pic-evening, .patch::after { transition-duration: 150ms; } .patch { transform: none; } }

.settle-list { display: grid; gap: var(--s-4); }
.settle-list .swatch { transform: none; width: auto; grid-template-rows: 6rem auto auto 1fr; }
.settle-list .swatch-line { font-size: var(--text-m); padding-bottom: var(--s-6); }
.settle-buy { margin-top: var(--s-4); }
@media (min-width: 720px) { .settle-list { grid-template-columns: 1fr 1fr; } }
.why-cols { display: grid; gap: var(--s-4); margin-block: var(--s-3) var(--s-4); }
.why-cols b { font-family: var(--face-style); font-weight: 400; font-size: 1.25rem; color: var(--area); display: block; }
@media (min-width: 720px) { .why-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 719px) {
  .paint-panel.sheet { background: none; box-shadow: none; padding: 0; gap: var(--s-3); }
  .paint-chits { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; gap: var(--s-2); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s-2); scrollbar-width: none; }
  .paint-chits::-webkit-scrollbar { display: none; }
  .paint-chit { flex: none; scroll-snap-align: start; }
  .paint-chit span { white-space: nowrap; padding-inline: var(--s-3); }
  .paint-head h2 { font-size: 1.5rem; }
}

/* ============================================ PLEATS (phone: one open at a time) */
.pleats { display: grid; gap: var(--s-5); }
.pleat-q { border-top: 1px dashed var(--crease); padding-top: var(--s-5); }
.pleat-q:first-child { border-top: 0; padding-top: 0; }
.pleat-title { font-size: var(--text-xl); margin-bottom: var(--s-3); }
.pleat-btn { display: none; }
@media (max-width: 719px) {
  .pleats.sheet { padding: var(--s-2) var(--s-4); gap: 0; }
  .pleat-q { padding-top: 0; }
  .pleat-q > .pleat-title { display: none; }
  .pleat-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding: var(--s-2) 0; border: 0; background: transparent; color: var(--ink); font-family: var(--face-style); font-size: 1.375rem; text-align: left; }
  /* A folded corner, not a chevron: the pleat's crease shows when it is shut. */
  .pleat-crease { flex: none; width: 22px; height: 22px; border-radius: 2px; background: linear-gradient(225deg, var(--ground) 0 45%, var(--area) 45% 100%); opacity: .9; transition: transform var(--t-lift) var(--ease-paper); }
  .pleat-btn[aria-expanded="true"] .pleat-crease { transform: rotate(180deg); opacity: .45; }
  .pleat-body { padding-bottom: var(--s-5); }
}

/* ========================================================== ROOM BOARD == */
.rb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.rb-board { display: grid; gap: var(--s-5); align-items: start; }
.rb-parcel { position: relative; }
.rb-print { overflow: hidden; }
.rb-img { aspect-ratio: 1; object-fit: cover; }
/* The cloth the board is wrapped in: the open end shows the board. */
.rb-cloth { position: absolute; z-index: 2; inset: 8px 22% 8px 8px; background: linear-gradient(var(--linen-veil), var(--linen-veil)), url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/linen.96d7833344.webp) 0 0 / 420px; box-shadow: 12px 0 22px -12px rgb(0 0 0 / .45); transform-origin: 0 50%; transition: transform 600ms var(--ease-paper), opacity 600ms var(--ease-paper); }
.rb-cloth-fold { position: absolute; top: 0; right: 0; bottom: 0; width: 2.25rem; background: linear-gradient(90deg, transparent, rgb(0 0 0 / .14) 60%, rgb(255 255 255 / .22)); }
.rb-cloth::after { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 18px; background: var(--area); -webkit-mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/system/patterns/asanoha.f092e03481.svg) repeat 0 0 / 16px 27.71px; mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/system/patterns/asanoha.f092e03481.svg) repeat 0 0 / 16px 27.71px; opacity: .55; }
.rb-board[data-state="unwrapped"] .rb-cloth { transform: translateX(-104%) rotate(-3deg); opacity: 0; }
html:not(.lt-js) .rb-cloth, html:not(.lt-js) .rb-act { display: none; }
.pin { position: absolute; z-index: 3; width: 1.75rem; height: 1.75rem; margin: -.875rem 0 0 -.875rem; border-radius: 50%; display: grid; place-items: center; background: var(--sheet-raised); color: var(--ink); font-weight: 700; font-size: var(--text-s); box-shadow: 0 0 0 1.5px var(--ink), 0 4px 8px -3px rgb(0 0 0 / .45); opacity: 0; transform: translateY(-8px); transition: opacity 260ms var(--ease-paper), transform 260ms var(--ease-paper); }
.rb-board[data-state="unwrapped"] .pin, html:not(.lt-js) .pin { opacity: 1; transform: none; }
.rb-board[data-state="unwrapped"] .pin:nth-of-type(2) { transition-delay: 60ms; } .rb-board[data-state="unwrapped"] .pin:nth-of-type(3) { transition-delay: 120ms; }
.rb-board[data-state="unwrapped"] .pin:nth-of-type(4) { transition-delay: 180ms; } .rb-board[data-state="unwrapped"] .pin:nth-of-type(5) { transition-delay: 240ms; }
.rb-board[data-state="unwrapped"] .pin:nth-of-type(6) { transition-delay: 300ms; } .rb-board[data-state="unwrapped"] .pin:nth-of-type(7) { transition-delay: 360ms; }
.n1 { left: 23%; top: 22%; } .n2 { left: 49%; top: 28%; } .n3 { left: 78%; top: 40%; } .n4 { left: 20%; top: 56%; }
.n5 { left: 48%; top: 60%; } .n6 { left: 76%; top: 76%; } .n7 { left: 30%; top: 82%; }
.uw-shut, .rb-board[data-state="unwrapped"] .uw-open { display: none; }
.rb-board[data-state="unwrapped"] .uw-shut { display: inline; }
.rb-act { display: grid; gap: var(--s-2); justify-items: start; margin-bottom: var(--s-4); }
.rb-keys { display: grid; gap: var(--s-2); counter-reset: none; }
.rb-keys li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-3); align-items: baseline; padding-bottom: var(--s-2); border-bottom: 1px dashed var(--crease); }
.rb-keys b:not(.pin-key) { font-family: var(--face-style); font-weight: 400; font-size: 1.125rem; display: block; }
.pin-key { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: var(--text-s); }
.rb-sketch { margin: 0; }
.sketch { width: 100%; height: auto; background: var(--sheet-raised); border-radius: var(--radius-paper); }
.sk-wall { fill: none; stroke: var(--ink); stroke-width: 4; }
.sk-window { stroke: var(--sheet-raised); stroke-width: 6; fill: none; }
.sk-window + .sk-door, .sk-door { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.sk-fire { fill: var(--ink-2); }
.sk-rug { fill: color-mix(in srgb, var(--area) 14%, transparent); stroke: var(--area); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sk-kept { fill: var(--sheet-shade); stroke: var(--ink); stroke-width: 1.5; }
.sk-new { fill: color-mix(in srgb, var(--area) 30%, var(--sheet-raised)); stroke: var(--area); stroke-width: 2; }
path.sk-new { fill: none; stroke-width: 5; }
.sk-labels text { font-family: var(--face-sans); font-size: 15px; font-weight: 600; fill: var(--ink); }
.sk-keys circle { fill: var(--area); }
.sk-keys text { font-family: var(--face-sans); font-size: 13px; font-weight: 700; fill: var(--band-text); }
.rb-list { display: grid; gap: var(--s-3); }
.rb-filter legend { font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-2); }
.rb-filter .chit-input span { min-height: 44px; }
.rb-items { display: grid; gap: 0; }
.rb-items li { display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--s-3); align-items: center; min-height: 48px; padding: var(--s-2) 0; border-bottom: 1px dashed var(--crease); }
.li-key { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--area); color: var(--band-text); font-size: var(--text-xs); font-weight: 700; }
.li-tier { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1.5px solid currentColor; }
.tier-save { color: var(--ink-2); } .tier-middle { color: var(--area); } .tier-treat { color: var(--ink); background: color-mix(in srgb, var(--area) 16%, transparent); }
.rb-list[data-choice="save"] li:not(.li-save), .rb-list[data-choice="middle"] li:not(.li-middle), .rb-list[data-choice="treat"] li:not(.li-treat) { display: none; }
.rb-kept { padding: var(--s-3); border-radius: var(--radius-tag); background: var(--sheet-shade); }
@media (min-width: 720px) {
  .rb-pleats { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
  .rb-q-board { grid-column: 1 / -1; }
  .rb-q-sketch { border-top: 1px dashed var(--crease); }
}
@media (min-width: 900px) { .rb-board { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s-6); } }
@media (prefers-reduced-motion: reduce) { .rb-cloth, .pin { transition-duration: 150ms; transition-delay: 0ms !important; } .rb-board[data-state="unwrapped"] .rb-cloth { transform: none; } }

.after-slips { display: grid; gap: var(--s-3); }
.after-slips li { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); background: var(--sheet-raised); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 12px 24px -20px var(--shadow-ink); position: relative; }
.after-slips li::before { content: ""; position: absolute; left: 0; top: var(--s-4); bottom: var(--s-4); width: 0; border-left: 1px dashed var(--crease); }
.after-slips b { font-family: var(--face-style); font-weight: 400; font-size: 1.25rem; color: var(--area); }
.after-label { margin-top: var(--s-3); }
@media (min-width: 720px) { .after-slips { grid-template-columns: repeat(3, 1fr); } }
body.area-style fieldset { min-inline-size: 0; min-width: 0; }

/* ======================================================== IN YOUR ROOM == */
.moved-grid { display: grid; gap: var(--s-5); align-items: start; }
.ba { margin: 0; }
.ba-photo { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--sheet-shade); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 22px 44px -30px var(--shadow-ink); }
.ba-photo picture { display: contents; }
.ba-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 420ms var(--ease-paper); }
.ba-before { opacity: 0; }
.ba[data-state="before"] .ba-before { opacity: 1; }
.moved-notes { display: grid; gap: var(--s-4); }
.moved-list { display: grid; gap: 0; counter-reset: mv; }
.moved-list li { counter-increment: mv; display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px dashed var(--crease); }
.moved-list li::before { content: counter(mv); font-family: var(--face-style); font-size: 1.25rem; color: var(--area); line-height: 1.3; }
.moved-list b { font-weight: 650; }
.swatch-flat { position: relative; overflow: hidden; padding: calc(var(--s-4) + .9rem) var(--s-4) var(--s-4); background: var(--sheet-raised); border-radius: var(--radius-tag); box-shadow: 0 1px 0 var(--hairline), 0 12px 24px -20px var(--shadow-ink); display: grid; gap: var(--s-2); }
.swatch-flat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .9rem; background: var(--chip, var(--chip-oat)); }
.sf-name { font-family: var(--face-style); font-size: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); }
.sf-price { font-family: var(--face-sans); font-size: var(--text-m); font-weight: 650; display: inline-flex; gap: var(--s-2); align-items: baseline; }
.done-price { font-weight: 650; font-size: var(--text-l); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; color: var(--ink) !important; }
.done-price .suggested { font-size: var(--text-xs); }
@media (min-width: 900px) { .moved-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--s-6); } }
@media (max-width: 719px) {
  .ba { margin-inline: calc(-1 * var(--gutter)); }
  .ba-photo { border-radius: 0; aspect-ratio: 4 / 3.4; }
  .ba .caption { padding: 0 var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .ba-pic { transition-duration: 150ms; } }

/* The concertina: open flat on a laptop when it comes into view; a deck you swipe on a phone. */
.kswipe .concertina { gap: 0; }
.concertina .pleat { display: grid; gap: var(--s-2); align-content: start; min-height: 13rem; padding: var(--s-5); border-right: 1px dashed var(--crease); }
.concertina .pleat:last-child { border-right: 0; }
.k-step { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.concertina .pleat h3 { font-size: 1.5rem; color: var(--area); }
@media (min-width: 900px) {
  .kswipe .swipe-track.concertina { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: visible; box-shadow: 0 1px 0 var(--hairline), 0 22px 40px -30px var(--shadow-ink); border-radius: var(--radius-paper); }
  .kswipe .swipe-controls { display: none; }
}
@media (max-width: 899px) {
  .kswipe .swipe-track.concertina { grid-auto-columns: 86%; gap: var(--s-3); perspective: none; }
  .kswipe .concertina .pleat { border-right: 0; border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 12px 24px -20px var(--shadow-ink); transform: none !important; }
}
.day-cols { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 720px) { .day-cols { grid-template-columns: 1fr 1.4fr; } }

/* ============================================================ SEASONAL == */
.season-grid { display: grid; gap: var(--s-5); align-items: start; }
.season-print { margin: 0; }
.season-print img { aspect-ratio: 1; object-fit: cover; }
.season-print .caption { padding: var(--s-1) var(--s-1) 0; }
.season-pick { display: grid; gap: var(--s-4); }
.elev-wrap { background: var(--sheet-raised); border-radius: var(--radius-paper); padding: var(--s-3); }
.elev { width: 100%; height: auto; }
.el-floor { stroke: var(--crease); stroke-width: 2; }
.part { fill: none; stroke: var(--crease); stroke-width: 2; stroke-linejoin: round; transition: stroke 260ms var(--ease-paper), fill 260ms var(--ease-paper), opacity 260ms; }
.part .el-fire { fill: none; } .part .el-hearth { fill: var(--sheet-shade); }
.part-tree > path:first-child { fill: transparent; }
.el-deco { stroke-dasharray: 3 4; }
.part-box { opacity: .25; }
.season-pick[data-choice="festive"] :is(.part-tree, .part-mantel, .part-table),
.season-pick[data-choice="tree"] .part-tree,
.season-pick[data-choice="mantel"] :is(.part-mantel, .part-table) { stroke: var(--area); }
.season-pick[data-choice="festive"] .part-tree > path:first-child, .season-pick[data-choice="tree"] .part-tree > path:first-child { fill: color-mix(in srgb, var(--area) 22%, transparent); }
.season-pick[data-choice="mantel"] :is(.part-mantel, .part-table) { stroke-dasharray: 6 4; }
.season-pick[data-choice="takedown"] .part:not(.part-box) { opacity: .35; }
.season-pick[data-choice="takedown"] .part-box { opacity: 1; stroke: var(--area); fill: color-mix(in srgb, var(--area) 22%, transparent); }
.elev-key { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.key-on { width: 1.5rem; height: 0; border-top: 2.5px solid var(--area); }
.season-chits { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; }
.season-chit { position: relative; }
.season-chit input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.season-chit > span { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); padding: var(--s-3) var(--s-4); border: 1.5px solid var(--hairline); border-radius: var(--radius-tag); background: var(--sheet-raised); transition: transform var(--t-lift) var(--ease-paper), border-color var(--t-lift); }
.sc-name { font-family: var(--face-style); font-weight: 400; font-size: 1.25rem; }
.sc-price { display: flex; gap: var(--s-2); align-items: baseline; font-weight: 650; }
.sc-line { grid-column: 1 / -1; font-size: var(--text-s); color: var(--ink-2); }
@media (hover: hover) { .season-chit:hover > span { transform: translateY(-2px); } }
.season-chit input:checked + span { border-color: var(--area); box-shadow: inset 0 0 0 1px var(--area), 0 10px 20px -16px var(--shadow-ink); transform: translateY(1px); }
.season-chit input:checked + span .sc-name::after { content: ""; display: inline-block; width: .5rem; height: .9rem; margin-left: .6rem; border-right: 2px solid var(--area); border-bottom: 2px solid var(--area); transform: rotate(45deg) translateY(-2px); }
.season-chit input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 900px) { .season-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--s-6); } .season-print { position: sticky; top: var(--s-5); } }
@media (max-width: 719px) { .season-pick.sheet { padding: var(--s-4); } .season-print { order: 0; } }
@media (prefers-reduced-motion: reduce) { .part { transition: none; } }

/* ============================================================== BUDGET == */
.budget { display: grid; gap: var(--s-6); align-items: start; }
.bl-sheet { display: grid; gap: var(--s-4); background: linear-gradient(180deg, var(--sheet) 0 3.25rem, var(--sheet) 3.25rem), var(--sheet); }
.bl-head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; justify-content: space-between; }
.bl-head h2 { margin: 0 !important; }
.bl-switch { justify-self: start; }
.bl-list { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.bl-list li { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: var(--s-3); align-items: baseline; min-height: 52px; padding: var(--s-3) 0; border-bottom: 1px dashed var(--crease); }
.bl-what { font-weight: 650; }
.bl-pick > span { display: none; }
#bl[data-choice="save"] .t-save, #bl[data-choice="middle"] .t-middle, #bl[data-choice="treat"] .t-treat { display: inline; }
html:not(.lt-js) .bl-pick > span { display: block; }
html:not(.lt-js) .bl-pick .t-save::before { content: "Save: "; } html:not(.lt-js) .bl-pick .t-middle::before { content: "Middle: "; } html:not(.lt-js) .bl-pick .t-treat::before { content: "Treat: "; }
.bl-shop { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.bl-ad { padding: var(--s-3) var(--s-4); border: 1px dashed var(--crease); border-radius: var(--radius-tag); display: grid; gap: var(--s-2); }
.bl-ad-row { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; }
.ad-tag { display: inline-grid; place-items: center; min-width: 2.25rem; height: 1.5rem; padding: 0 .5rem; border-radius: 3px; background: var(--ink); color: var(--sheet-raised); font-size: var(--text-s); font-weight: 700; letter-spacing: .04em; }
.bl-plain { display: grid; gap: var(--s-4); }
.bl-plain li { padding-left: var(--s-5); position: relative; }
.bl-plain li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; background: var(--area); -webkit-mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/patch.de2871e6cc.svg) center / 100% 100%; mask: url(/2026-10-10-round-2-u-areas/_assets/previews/u/style/patch.de2871e6cc.svg) center / 100% 100%; }
.bl-plain b { font-family: var(--face-style); font-weight: 400; font-size: 1.2rem; }
@media (min-width: 900px) { .budget { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--s-7); } }
@media (max-width: 719px) {
  .bl-list li { grid-template-columns: 1fr auto; }
  .bl-pick { grid-column: 1 / -1; grid-row: 2; }
  .bl-switch { justify-self: stretch; display: flex; }
  .bl-switch label { flex: 1; }
  .bl-switch span { width: 100%; justify-content: center; min-height: 3rem; }
}

/* ======================================================== HOW IT WORKS == */
.how-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-3); }
.how-head h2 { font-size: var(--text-2xl); }
.how-steps .p-room { display: none; }
.how-steps[data-path="room"] .p-video { display: none; }
.how-steps[data-path="room"] .p-room { display: block; }
html:not(.lt-js) .how-steps .p-room { display: block; }
html:not(.lt-js) .how-switch { display: none; }
.how-steps .pleat p { animation: s-ink 260ms var(--ease-paper); }
@keyframes s-ink { from { opacity: 0; transform: translateY(4px); } }
.first-cols { display: grid; gap: var(--s-4); align-items: center; margin-bottom: var(--s-3); }
@media (min-width: 720px) { .first-cols { grid-template-columns: 1fr auto; } }
@media (max-width: 719px) { .how-switch { display: flex; width: 100%; } .how-switch label { flex: 1; } .how-switch span { width: 100%; justify-content: center; min-height: 3rem; } .first-seal { display: none; } }
@media (prefers-reduced-motion: reduce) { .how-steps .pleat p { animation: none; } }

/* =========================================================== QUESTIONS == */
.q-groups { display: grid; gap: var(--s-6); }
.q-divider { display: flex; margin-bottom: var(--s-3); }
.q-divider span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--s-4); border-radius: 10px 10px 0 0; background: var(--area); color: var(--band-text); font-family: var(--face-style); font-size: 1.25rem; }
.q-group .cards { padding: var(--s-4); background: var(--sheet-shade); border-radius: 0 var(--radius-tag) var(--radius-tag) var(--radius-tag); box-shadow: inset 0 2px 6px -3px var(--shadow-ink); }
.q-tabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.q-tabs::-webkit-scrollbar { display: none; }
.q-tab { flex: none; min-height: 48px; padding: 0 var(--s-4); border: 1.5px solid var(--hairline); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--sheet-raised); color: var(--ink); font-weight: 600; font-size: var(--text-m); }
.q-tab[aria-selected="true"] { background: var(--area); color: var(--band-text); border-color: var(--area); }
.q-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (min-width: 900px) { .q-groups { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
@media (max-width: 899px) {
  .lt-js .qbox .q-divider { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lt-js .qbox .q-group .cards { border-radius: 0 0 var(--radius-tag) var(--radius-tag); }
  .qbox .q-groups { gap: 0; }
}

/* ============================================================== LETTER == */
.letter { position: relative; padding: clamp(1.5rem, 1rem + 3vw, 4rem); box-shadow: 0 1px 0 var(--hairline), 0 26px 50px -38px var(--shadow-ink); display: grid; gap: var(--s-5); background: linear-gradient(180deg, var(--sheet-raised) 33.3%, color-mix(in srgb, var(--sheet-raised) 55%, var(--sheet-shade)) 33.3% 66.6%, var(--sheet-raised) 66.6%); max-width: 56rem; }
.letter::before, .letter::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.25rem; background: linear-gradient(var(--crease), var(--crease)) 0 33.3% / 100% 1px no-repeat, linear-gradient(var(--crease), var(--crease)) 0 66.6% / 100% 1px no-repeat; }
.letter::before { left: 0; } .letter::after { right: 0; }
.letter > * { position: relative; z-index: 1; }
.letter h1 { font-size: var(--text-2xl); }
.letter-lead { font-family: var(--face-style); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.3; max-width: 34ch; }
.letter-lead q { color: var(--area); quotes: "\201C" "\201D"; }
.letter-sign { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.letter-sign a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.lt-ready .letter-top { animation: s-letter 520ms var(--ease-paper) both; transform-origin: 50% 100%; }
@keyframes s-letter { from { transform: perspective(900px) rotateX(-14deg); } }
@media (prefers-reduced-motion: reduce) { .lt-ready .letter-top { animation: none; } }

/* ================================================== BOOK, 404, LEAFLETS == */
.reply-card { max-width: 48rem; }
.reply-title { font-size: var(--text-2xl); margin-block: var(--s-2) var(--s-3); }
.reply-actions { display: grid; gap: var(--s-3); justify-items: start; }
.reply-ready { padding: var(--s-4); background: var(--sheet-shade); border-radius: var(--radius-tag); display: grid; gap: var(--s-3); }
.reply-ready h2 { font-family: var(--face-sans) !important; font-size: var(--text-s) !important; }
.cover-line { font-size: var(--text-l); color: var(--ink-2); max-width: 46ch; }
.lost { display: grid; gap: var(--s-5); justify-items: start; max-width: 48rem; margin-top: var(--s-6); }
.lost h1 { font-size: var(--text-2xl); }
.lost-doors { display: grid; gap: var(--s-3); width: 100%; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cr-paper { fill: var(--sheet-raised); stroke: var(--crease); stroke-width: 1.5; }
.cr-line { fill: none; stroke: var(--crease); }
.cr-dash { stroke-dasharray: 4 4; }
.page-leaflet .leaflet-title { color: var(--band-text); }
.leaflet > .band { background: var(--area); }
.letter, .reply-card, .lost { margin-inline: auto; }
/* Override of the system dialog: the contents sheet runs edge to edge on a phone (the UA max-width otherwise leaves gutters). */
dialog.u-sheet { max-width: 100%; }
@media (max-width: 719px) { .how-switch { flex: 1 1 100%; } }
.s-sheet-suggested { margin-top: var(--s-2); }
.wrap-band .fourteen { color: var(--band-text); display: inline-flex; align-items: center; min-height: 2rem; }
@media (max-width: 719px) {
  .wrap-band .band-quiet, .wrap-band .fourteen { font-size: .8125rem; min-height: 0; }
  .wrap-band .band-caps { font-size: .75rem; }
  .room-photo { aspect-ratio: 39 / 32; }
}
/* Phone: a section folded shut prints its name and price on its face. */
.fh-text { display: grid; gap: 2px; }
.fh-price { font-family: var(--face-sans); font-size: var(--text-m); font-weight: 650; display: flex; gap: var(--s-2); align-items: baseline; }
.fh-price .suggested { font-size: var(--text-xs); font-weight: 500; }
@media (max-width: 719px) {
  .fold-phone { border-top: 1px dashed var(--crease); margin-top: var(--s-5); }
  .fold-phone.sheet { padding-top: var(--s-2); }
  .fold-phone .fold-head { padding-block: var(--s-3); }
  .fold-phone .fold-body > .s-section-head > h2, .fold-phone .fold-body .day-cols > div:first-child { display: none; }
}
.fold-lines { margin-top: var(--s-3); }
@media (max-width: 899px) { .sw-card .swatch-chip { grid-area: auto; grid-row: 1; align-self: auto; border-radius: 4px 4px 0 0; } }