/* Life In A Dollhouse — proposal front door
   The idea: the proposal is one house with four rooms. An open-front dollhouse shows every
   room at once; here each room is one document, and walking through its door opens a new tab.
   Brand tokens come from redesign/css/tokens.css; this file only adds what the house needs.
   Selectors stay one class deep so section spacing never cancels out. */

:root {
  color-scheme: light;

  /* rgb triplets for tints */
  --ink-rgb: 42 45 58;
  --periwinkle-rgb: 147 166 206;
  --blush-deep-rgb: 228 185 196;
  --lamp-rgb: 255 226 160;

  /* type additions */
  --text-hero: clamp(2.5rem, 5vw, 4.1rem);
  --text-section: clamp(1.55rem, 2.5vw, 2rem);
  --leading-display: 1.04;

  /* layout additions */
  --page-max: 78rem;
  --col-gap: clamp(2rem, 5vw, 5rem);
  --section-gap: clamp(4.5rem, 9vw, 8rem);

  /* the house */
  --house-max: 46rem;
  --wall: var(--periwinkle);
  --wall-outer: 0.9rem;
  --wall-inner: 0.6rem;
  --floor-h: 0.8rem;
  --base-h: 0.5rem;
  --roof-overhang: 3%;
  --room-pad: 1.5rem;
  --room-min-h: 17rem;
  --lamp-cord: 1.25rem;
  --lamp-size: 1.15rem;
  --bulb-size: 0.42rem;
  --door-w: 0.8rem;
  --door-h: 1.3rem;
  --shade-dim: 0.3;
  --tap-min: 2.75rem;

  /* wallpaper: the shop sells printable wallpaper, so each room gets a faint one */
  --wallpaper-stripe: repeating-linear-gradient(90deg, rgb(var(--periwinkle-rgb) / 0.18) 0 2px, transparent 2px 13px);
  --wallpaper-dot: radial-gradient(circle, rgb(var(--blush-deep-rgb) / 0.7) 1.3px, transparent 1.8px);
  --wallpaper-grid: linear-gradient(rgb(var(--ink-rgb) / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--ink-rgb) / 0.07) 1px, transparent 1px);
  --wallpaper-scallop: radial-gradient(circle at 50% 100%, transparent 60%, rgb(var(--periwinkle-rgb) / 0.28) 62%, rgb(var(--periwinkle-rgb) / 0.28) 68%, transparent 70%);
  --wallpaper-size-dot: 14px 14px;
  --wallpaper-size-grid: 16px 16px;
  --wallpaper-size-scallop: 22px 13px;
  --room-glow: radial-gradient(ellipse 70% 55% at 50% 8%, rgb(var(--lamp-rgb) / 0.55), rgb(var(--lamp-rgb) / 0) 100%);
  --floor-planks: repeating-linear-gradient(90deg, transparent 0 2.4rem, rgb(var(--ink-rgb) / 0.16) 2.4rem calc(2.4rem + 1px));
  --bulb-glow-rest: 0 0 6px 2px rgb(var(--lamp-rgb) / 0.7);
  --bulb-glow-lit: 0 0 16px 7px rgb(var(--lamp-rgb) / 0.95);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
kbd { font: inherit; padding: 0 0.35em; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--white); }
:focus-visible { outline: 2px solid var(--periwinkle-deep); outline-offset: 3px; border-radius: var(--radius-xs); }
::selection { background: var(--periwinkle-soft); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-nav);
  padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--paper);
  border-radius: var(--radius-pill); text-decoration: none;
}
.skip-link:not(:focus) { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* display type: Fraunces at its largest optical size, soft serifs to echo the scalloped trim */
.hero-title, .section-title, .room-title, .priority-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
}

/* links in prose: underlined in periwinkle, with the new-tab mark after the text */
.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--periwinkle);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.text-link:hover { color: var(--periwinkle-deep); text-decoration-color: var(--periwinkle-deep); }
.new-tab-icon {
  width: 0.8em; height: 0.8em; margin-left: 0.2em;
  vertical-align: -0.05em; color: var(--periwinkle-deep);
}

/* ---------- header ---------- */
.c-site-header {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-5) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.brand-lockup { display: flex; align-items: center; gap: var(--space-3); }
.brand-logo-image { width: auto; height: 3.25rem; }
.brand-text { font-size: var(--text-sm); color: var(--ink-soft); padding-left: var(--space-3); border-left: 1px solid var(--line); }
.header-meta { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- hero ---------- */
.c-hero {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-8) var(--gutter) 0;
  display: grid; grid-template-columns: 2fr 3fr; gap: var(--col-gap); align-items: start;
}
.hero-copy { max-width: var(--measure); padding-top: var(--space-7); }
.hero-for { font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--space-5); }
.hero-title { font-size: var(--text-hero); line-height: var(--leading-display); text-wrap: balance; }
.hero-lede { margin-top: var(--space-5); font-size: var(--text-md); color: var(--ink-soft); }
.hero-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- the house ---------- */
.c-house { width: 100%; max-width: var(--house-max); margin-inline: auto; }
.house-roof {
  display: block; height: auto;
  width: calc(100% + 2 * var(--roof-overhang));
  margin-inline: calc(-1 * var(--roof-overhang));
  margin-bottom: -1px;
}
.roof-shape { fill: var(--wall); }
.roof-window { fill: var(--paper); }
.roof-muntin { fill: none; stroke: var(--wall); stroke-width: 6; stroke-linecap: round; }
.house-body { background: var(--wall); padding: var(--wall-outer); }
.room-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wall-inner); }
.room-item { display: grid; }
.house-base {
  height: var(--base-h); background: var(--cedar);
  width: calc(100% + 2 * var(--roof-overhang));
  margin-inline: calc(-1 * var(--roof-overhang));
  border-bottom: 2px solid rgb(var(--ink-rgb) / 0.22);
}

/* a room: wallpaper, a pendant lamp, the document, a door, a wooden floor */
.c-room {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; min-height: var(--room-min-h);
  background-color: var(--paper);
}
.c-room--stripe { background-image: var(--wallpaper-stripe); }
.c-room--dot { background-image: var(--wallpaper-dot); background-size: var(--wallpaper-size-dot); }
.c-room--grid { background-image: var(--wallpaper-grid); background-size: var(--wallpaper-size-grid); }
.c-room--scallop { background-image: var(--wallpaper-scallop); background-size: var(--wallpaper-size-scallop); }
.c-room:focus-within { outline: 2px solid var(--periwinkle-ink); outline-offset: -2px; }

.room-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--room-glow); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.c-room:hover .room-glow, .c-room:focus-within .room-glow { opacity: 1; }

.room-lamp {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.lamp-cord { display: block; width: 2px; height: var(--lamp-cord); background: var(--ink-soft); }
.lamp-shade {
  display: block; width: var(--lamp-size); height: calc(var(--lamp-size) * 0.55);
  background: var(--periwinkle-deep);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.lamp-bulb {
  display: block; width: var(--bulb-size); height: var(--bulb-size); margin-top: -2px;
  border-radius: 50%; background: var(--brass-light);
  box-shadow: var(--bulb-glow-rest);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.c-room:hover .lamp-bulb, .c-room:focus-within .lamp-bulb { box-shadow: var(--bulb-glow-lit); }

.room-body {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: calc(var(--lamp-cord) + var(--lamp-size) + var(--space-4)) var(--room-pad) calc(var(--floor-h) + var(--space-5));
}
.room-title { font-size: var(--text-lg); line-height: var(--leading-snug); }
.room-link { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.room-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.room-link:focus-visible { outline: none; }
.c-room:hover .room-link { color: var(--periwinkle-ink); }
.room-summary { font-size: var(--text-sm); color: var(--ink-soft); }
.room-contents { display: grid; gap: var(--space-1); font-size: var(--text-sm); margin-top: var(--space-1); }
.contents-item { display: flex; gap: var(--space-2); align-items: baseline; }
.contents-item::before { content: ""; flex: none; width: 0.55rem; height: 1px; background: var(--periwinkle-deep); transform: translateY(-0.3em); }
.room-action {
  margin-top: auto; padding-top: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--periwinkle-deep);
}
.action-doorway {
  display: block; width: var(--door-w); height: var(--door-h);
  background: var(--ink); border-radius: var(--door-w) var(--door-w) 0 0;
  perspective: 3rem;
}
.action-door {
  position: relative; display: block; width: 100%; height: 100%;
  background: var(--periwinkle-deep); border-radius: inherit;
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.action-door::after {
  content: ""; position: absolute; right: 2px; top: 56%;
  width: 2px; height: 2px; border-radius: 50%; background: var(--brass-light);
}
.c-room:hover .action-door, .c-room:focus-within .action-door { transform: rotateY(-48deg); }

.room-floor {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--floor-h);
  background-color: var(--cedar); background-image: var(--floor-planks);
  border-top: 1px solid rgb(var(--ink-rgb) / 0.18);
}

/* the one autonomous moment: lights come on room by room after load, then stay on */
.room-shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--ink); opacity: 0;
  animation: lights-on 1.1s var(--ease-out) both;
}
.room-item:nth-child(1) .room-shade { animation-delay: 0.25s; }
.room-item:nth-child(2) .room-shade { animation-delay: 0.55s; }
.room-item:nth-child(3) .room-shade { animation-delay: 0.85s; }
.room-item:nth-child(4) .room-shade { animation-delay: 1.15s; }
@keyframes lights-on {
  0%, 52% { opacity: var(--shade-dim); }
  60% { opacity: 0.04; }
  68% { opacity: 0.22; }
  78%, 100% { opacity: 0; }
}

/* ---------- sections ---------- */
.c-section {
  max-width: var(--page-max); margin: var(--section-gap) auto 0;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 2fr 3fr; gap: var(--col-gap); align-items: start;
}
.section-head { max-width: var(--measure); }
.section-title { font-size: var(--text-section); line-height: var(--leading-snug); text-wrap: balance; }
.section-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); }
.section-body { max-width: var(--measure-wide); }

/* where to start */
.start-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-6); }
.start-term { font-weight: var(--weight-medium); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.start-detail { color: var(--ink-soft); padding: var(--space-4) 0; border-top: 1px solid var(--line); max-width: var(--measure); }
.start-term:first-of-type, .start-detail:first-of-type { border-top: 0; padding-top: 0; }

/* the three priorities, ranked, so they are numbered */
.priority-list { counter-reset: priority; display: grid; gap: var(--space-6); }
.priority-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-3); counter-increment: priority; }
.priority-title, .priority-text { grid-column: 2; }
.priority-item::before {
  content: counter(priority);
  font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--text-xl); line-height: 1; color: var(--periwinkle-deep);
  padding-top: 0.15em;
  grid-row: 1 / span 2;
}
.priority-title { font-size: var(--text-lg); line-height: var(--leading-snug); }
.priority-text { margin-top: var(--space-2); color: var(--ink-soft); max-width: var(--measure); }

/* today and proposed */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.compare-link { display: block; border: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease-out); }
.compare-link:hover { border-color: var(--periwinkle-deep); }
.current-homepage-image, .proposed-storefront-image { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }
.compare-caption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- footer ---------- */
.c-site-footer {
  max-width: var(--page-max); margin: var(--section-gap) auto 0;
  padding: var(--space-7) var(--gutter) var(--space-9);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 2fr 3fr; gap: var(--col-gap); align-items: start;
}
.footer-method { max-width: var(--measure); font-size: var(--text-sm); color: var(--ink-soft); display: grid; gap: var(--space-3); }
.footer-files { display: grid; gap: var(--space-5); }
.files-title { font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.files-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }

/* ---------- responsive ---------- */
@media (max-width: 75rem) {
  .c-hero, .c-section, .c-site-footer { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 0; }
  .c-house { margin-top: var(--space-6); }
}
@media (max-width: 40rem) {
  .room-list { grid-template-columns: 1fr; }
  .c-room { min-height: 0; }
  .room-body { padding-inline: var(--space-4); }
  .start-list { grid-template-columns: 1fr; }
  .start-term { padding-bottom: 0; }
  .start-detail { border-top: 0; padding-top: var(--space-1); }
  .compare-grid { grid-template-columns: 1fr; }
  .header-meta { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .brand-logo-image { height: 2.75rem; }
}

/* standalone links get a full-height tap target on phones and touch screens */
@media (max-width: 40rem), (pointer: coarse) {
  .files-list { gap: 0 var(--space-5); }
  .files-item, .store-link { display: inline-flex; align-items: center; min-height: var(--tap-min); }
  .header-meta { gap: var(--space-2) var(--space-5); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .room-shade { animation: none; opacity: 0; }
  .action-door, .room-glow, .lamp-bulb, .room-link, .text-link, .compare-link { transition: none; }
}