/* LumiRoll brand guidelines: shared page system.
   Pages are authored at 1920x1080 and scaled to fit by deck.js (--s). */

:root {
  --ink: #14110e;
  --sunbeam: #e8a33d;
  --umber: #7a4a2e;
  --linen: #e4d8c6;
  --daylight: #f6f1e9;

  --ink-60: rgba(20, 17, 14, 0.6);
  --ink-40: rgba(20, 17, 14, 0.4);
  --hair: rgba(20, 17, 14, 0.12);

  /* Radius by element (brand skill identity.md §8c): xs small bits, sm controls,
     md containers, lg large surfaces. Nested corners concentric. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius: var(--radius-md);
  --m: 48px; /* page margin, every side */
  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--linen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Frame + page ---------- */

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--daylight);
}

.page {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  transform: scale(var(--s, 0));
  background: var(--daylight);
}

/* Page grid: a 48px margin on every side. The title's cap height sits on the top line, the description's
   last baseline (or the bottom of whatever ends the left column) on the bottom line; the visual fills the
   column between them, so its top and bottom edges meet the same two lines. text-box trims the leading. */
.p-title {
  position: absolute;
  left: var(--m); top: var(--m);
  text-box: trim-both cap alphabetic;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.p-desc {
  position: absolute;
  left: var(--m); bottom: var(--m);
  width: 520px;
  text-box: trim-both cap alphabetic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-60);
}

.p-visual {
  position: absolute;
  right: var(--m); top: var(--m);
  width: 1091px; height: 984px; /* 1080 - 2 x 48 */
}

/* ---------- Shared visual pieces ---------- */

.tile {
  position: relative;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tile.light { box-shadow: inset 0 0 0 1px var(--hair); }
.tile.ink { background: var(--ink); }
.tile.umber { background: var(--umber); }
.tile.sunbeam { background: var(--sunbeam); color: var(--ink); }
.tile img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .over { position: relative; }

.tile-label {
  position: absolute;
  left: 24px; bottom: 20px;
  font-size: 14px;
  color: var(--ink-60);
}
.tile.ink .tile-label, .tile.umber .tile-label, .tile.photo-tile .tile-label { color: rgba(246, 241, 233, 0.7); }

/* 01 Primary logo */
.v-logo { display: grid; grid-template-rows: 1fr 1fr; row-gap: 46px; }
.v-logo .tile img { width: 520px; }
.v-mark-pair .tile img { width: 240px; } /* Logomark: same tiles as the primary logo, mark at its own size */

/* 02 Logomark */
.v-mark {
  position: absolute;
  left: 58px; /* wireframe tiles start at x=840 */
  display: grid;
  grid-template-columns: 493px 493px;
  grid-template-rows: 400px 400px;
  gap: 46px 47px;
}
.v-mark .tile img, .v-mark .tile .over { width: 180px; }
.v-mark .tile img.photo { width: 100%; }

/* 03 Clearspace: drawn as an animated line grid (see Line drawings below) */
.v-clear img { position: absolute; left: 225.5px; top: 443px; width: 640px; } /* centred: matches clearspaceSvg() */

/* 04 Typography: the typeface on the left (name above a cropped Aa), the scale at true size on the right.
   Sizes on a 4px rhythm (line heights in multiples of 4). */
.v-typo { position: absolute; inset: 0; }
.typo-left { position: absolute; left: var(--m); top: 190px; width: 900px; bottom: 0; clip-path: inset(-50% -50% 0 -50%); } /* runs off the bottom edge of the page */
.typo-name strong { display: block; font-weight: 400; font-size: 34px; line-height: 1.2; letter-spacing: -0.01em; }
.typo-aa { position: absolute; left: -24px; bottom: -60px; font-size: 750px; line-height: 0.8; letter-spacing: -0.05em; }
/* The scale hangs from the same line as "Switzer"; styles breathe (40px apart), each spec stays tight to its sample */
.typo-scale { position: absolute; left: 1040px; right: var(--m); top: 190px; bottom: var(--m); display: flex; flex-direction: column; gap: 40px; }
.typo-row { display: flex; flex-direction: column; gap: 6px; }
.typo-sample { white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; } /* clip sideways only, so descenders are never cut */
.typo-spec { font-size: 15px; line-height: 1.4; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.typo-spec b { font-weight: 400; color: var(--ink); }
.typo-role { display: inline-block; width: 76px; }
/* Weights: Regular and Medium side by side, same sample, so the difference reads at a glance */
.typo-legend { margin-top: auto; text-box: trim-both cap alphabetic; font-size: 14px; color: var(--ink-40); } /* a footnote on the bottom margin */

/* Kept for the typography lab: the product scale as classes */
.s-display { font-size: 84.15px; line-height: 1.02; letter-spacing: -0.04em; }
.s-h1 { font-size: 45.9px; line-height: 1.08; letter-spacing: -0.03em; }
.s-h2 { font-size: 30.6px; line-height: 1.15; letter-spacing: -0.03em; }
.s-h3 { font-size: 19.125px; line-height: 1.3; letter-spacing: -0.02em; }
.s-body { font-size: 15.94px; line-height: 1.55; letter-spacing: -0.006em; max-width: 560px; }
.s-sm { font-size: 14.875px; line-height: 1.5; color: var(--ink-60); }
.s-micro { font-size: 12.75px; line-height: 1.4; color: var(--ink-60); }

/* 06 Colour palette: block widths follow usage share */
.v-colour { display: flex; flex-direction: column; gap: 40px; }
.pal-strip { flex: 1; display: flex; gap: 6px; min-height: 0; }
.pal-strip > div { position: relative; border-radius: var(--radius-md); min-width: 0; }
.pal-strip .daylight { box-shadow: inset 0 0 0 1px var(--hair); }
.pal-pct { position: absolute; left: 14px; bottom: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.pal-table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.pal-table th { font-weight: 400; font-size: 14px; color: var(--ink-40); text-align: left; padding: 0 0 12px; }
.pal-table td { padding: 13px 0; border-top: 1px solid var(--hair); }
.pal-table td.role { color: var(--ink-60); }
.pal-table th:last-child, .pal-table td:last-child { text-align: right; }
.chip { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-xs); margin-right: 12px; vertical-align: -1px; }
.chip.daylight { box-shadow: inset 0 0 0 1px var(--ink-40); }

/* 06 Colour palette options */
/* A: bands of light seen through slats */
.pal-a { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.pal-a .band { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 24px; min-height: 0; font-size: 15px; }
.pal-a .band b { display: block; font-weight: 400; font-size: 24px; letter-spacing: -0.01em; }
.pal-a .band span { display: block; margin-top: 4px; opacity: 0.7; }
.pal-a .band .vals { font-variant-numeric: tabular-nums; opacity: 0.75; padding-top: 6px; }
.pal-a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 250, 240, 0.16), transparent 45%),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(20, 17, 14, 0.035) 22px 23px);
}
.pal-a .band:nth-child(5) { padding-top: 12px; }

/* B: the palette as a room */
.pal-b svg { display: block; border-radius: var(--radius-md); }
.pal-b .shade { filter: brightness(0.95); }
.room-label line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.room-label circle { fill: var(--ink); }
.room-label text { font-family: var(--font); font-size: 17px; fill: var(--ink); }
.room-label text.sub { font-size: 13px; fill: rgba(20, 17, 14, 0.6); }
.room-label.light line { stroke: var(--daylight); }
.room-label.light circle, .room-label.light text { fill: var(--daylight); }
.room-label.light text.sub { fill: rgba(246, 241, 233, 0.7); }
.pal-key { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 15px; font-variant-numeric: tabular-nums; }
.pal-key b { font-weight: 400; margin-right: 10px; }
.pal-key span:not(.chip) { color: var(--ink-60); margin-right: 10px; }

/* C: sampled from the photographs */
.pal-c { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pal-c figure { margin: 0; display: grid; grid-template-rows: 1fr 300px; gap: 12px; min-height: 0; }
.pal-c .src { position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 0; }
.pal-c .src img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pal-c .src i { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--daylight), 0 2px 8px rgba(20, 17, 14, 0.3); }
.pal-c .sw { border-radius: var(--radius-md); padding: 22px 20px; display: flex; flex-direction: column; font-size: 14px; }
.pal-c .daylight .sw, .pal-c figure:first-child .sw { box-shadow: inset 0 0 0 1px var(--hair); }
.pal-c .sw b { font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.pal-c .sw span { margin-top: 6px; opacity: 0.72; line-height: 1.4; }
.pal-c .sw .vals { margin-top: auto; font-variant-numeric: tabular-nums; }

/* D: refined usage widths + contrast pairs */
.pal-d { display: flex; flex-direction: column; gap: 28px; }
.pal-d .pal-strip { flex: 1; }
.pal-d .pal-strip > div { padding: 20px 18px; display: flex; flex-direction: column; font-size: 14px; }
.pal-d .pal-strip b { font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.pal-d .pal-strip span { margin-top: 6px; opacity: 0.72; }
.pal-d .pal-strip .narrow { padding: 18px 0; align-items: center; }
.pal-d .pal-strip .narrow b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 20px; }
.pal-d .pal-strip .pal-pct { margin-top: auto; opacity: 1; }
.pal-d .pal-strip .narrow .pal-pct { position: static; }
.pal-d .pairs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pal-d .pairs div { border-radius: var(--radius-md); padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; box-shadow: inset 0 0 0 1px var(--hair); font-size: 14px; font-variant-numeric: tabular-nums; }
.pal-d .pairs b { grid-row: span 2; font-weight: 400; font-size: 34px; letter-spacing: -0.02em; }

/* 07 Imagery */
.v-imagery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.v-imagery img { border-radius: var(--radius-lg); width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.v-imagery .wide { grid-column: span 2; }

/* 08 Graphic patterns: two live shader studies */
.v-shaders { display: grid; }
.v-shaders figure { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.v-shaders canvas { display: block; width: 100%; height: 100%; }
.v-shaders figcaption { position: absolute; left: 24px; bottom: 20px; font-size: 14px; color: rgba(246, 241, 233, 0.7); }

/* 09 Logo in perspective: preview + DialKit-style panel in the left column */
.v-persp { display: grid; place-items: center end; } /* the canvas keeps the right margin in every format */
.persp-canvas { display: block; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--hair), 0 2px 4px rgba(20, 17, 14, 0.04), 0 12px 32px rgba(20, 17, 14, 0.08); }
.persp-panel { position: absolute; left: var(--m); top: 150px; width: 560px; }
.dk-panel { font-size: 17px; }
.dk-folder { padding: 18px 0 20px; border-top: 1px solid var(--hair); }
.dk-folder h4 { font-weight: 400; font-size: 15px; color: var(--ink-40); margin-bottom: 12px; }
.dk-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 16px; row-gap: 6px; min-height: 40px;
}
.dk-row output { font-size: 15px; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.dk-row input[type="range"] { grid-column: 1 / -1; }
.dk-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: rgba(20, 17, 14, 0.06); }
.dk-seg button { font-size: 15px; padding: 6px 12px; border-radius: 6px; color: var(--ink-60); transition: background 160ms ease, color 160ms ease; }
.dk-seg button[aria-pressed="true"] { background: var(--daylight); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 17, 14, 0.08); }
.dk-photos { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; margin-bottom: 10px; }
.dk-photos button { aspect-ratio: 1; border-radius: var(--radius-xs); background-size: cover; background-position: center; outline: 1px solid transparent; outline-offset: 2px; transition: outline-color 160ms ease, transform 160ms var(--ease-out); }
.dk-photos button[aria-pressed="true"] { outline-color: var(--ink); }
.dk-fills { display: flex; gap: 8px; }
.dk-fills button { width: 28px; height: 28px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--hair); outline: 1px solid transparent; outline-offset: 2px; transition: outline-color 160ms ease; }
.dk-fills button[aria-pressed="true"] { outline-color: var(--ink); }
.dk-photos button:active, .dk-fills button:active, .dk-seg button:active, .dk-actions button:active { transform: scale(0.96); }
.dk-actions { display: flex; gap: 24px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 15px; }
.dk-actions button { color: var(--ink-60); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .dk-actions button:hover { color: var(--ink); } }

/* Slider: hairline track, square thumb like the construction anchors */
.dk-row input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: none; cursor: pointer; }
.dk-row input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink-40); }
.dk-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6.5px; background: var(--ink); border-radius: 2px; transition: transform 160ms var(--ease-out); }
.dk-row input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.dk-row input[type="range"]::-moz-range-track { height: 1px; background: var(--ink-40); }
.dk-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; background: var(--ink); border-radius: 2px; }

/* 09-10 Placeholders */
.v-placeholder {
  display: grid; place-items: center;
  border: 1px dashed var(--ink-40);
  border-radius: var(--radius-md);
  font-size: 18px;
  color: var(--ink-40);
}

/* ---------- Line drawings (clearspace) ---------- */

.page.dark { background: var(--ink); color: var(--daylight); }
.page.dark .p-desc { color: rgba(246, 241, 233, 0.6); }

.lines { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; --line: var(--ink); }
.page.dark .lines { --line: var(--daylight); }
.lines line, .lines path, .lines circle, .lines rect.box { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lines .g-h line { stroke-opacity: 0.24; stroke-dasharray: 6 6; }
.lines .g-v line { stroke-opacity: 0.13; stroke-dasharray: 6 6; }
.lines .g-diag line { stroke-opacity: 0.3; }
.lines .g-outline path { stroke-width: 1.5; }
.lines .g-handles line { stroke-opacity: 0.55; }
.lines .g-handles circle { fill: var(--ink); }
.lines .g-anchors rect { fill: var(--line); }
.lines .g-dims line { stroke-opacity: 0.7; }
.lines text { fill: var(--line); font-family: var(--font); font-size: 16px; text-anchor: middle; dominant-baseline: middle; }
.page:not(.dark) .lines .g-h line { stroke-opacity: 0.3; }
.page:not(.dark) .lines .g-v line { stroke-opacity: 0.2; }

/* Final state: thumbnails and reduced motion show this directly */
.lines .g-h line, .lines .g-v line, .lines .pop { transform-box: fill-box; transform-origin: center; }
.lines .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lines .cam { transform-origin: 0 0; }

/* Build-in on arrival. Strokes travel on screen: ease-in-out.
   Things that appear: ease-out. Nothing starts from zero scale. */
.stage .frame.on .lines .g-h line,
.stage .frame.on .lines .g-v line {
  transition: transform 1000ms var(--ease-out), opacity 600ms var(--ease-out);
  transition-delay: var(--d);
}
.stage .frame.on .lines .draw { transition: stroke-dashoffset var(--t, 1400ms) var(--ease-in-out) var(--d, 0ms); }
.stage .frame.on .lines .pop,
.stage .frame.on .anim-fade {
  transition: transform 280ms var(--ease-out), opacity 280ms var(--ease-out), filter 280ms var(--ease-out);
  transition-delay: var(--d);
}
.stage .frame.on .anim-fade { transition-duration: 700ms; }
.stage .frame.on .page.dark > .p-title,
.stage .frame.on .page.dark > .p-desc {
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), filter 800ms var(--ease-out);
  transition-delay: 4500ms;
}
.stage .frame.on .page.dark > .p-desc { transition-delay: 4620ms; }

/* Off-stage: reset once the page has slid away, so it replays on return */
.stage .frame:not(.on) .lines *,
.stage .frame:not(.on) .anim-fade,
.stage .frame:not(.on) .page.dark > .p-title, .stage .frame:not(.on) .page.dark > .p-desc { transition: all 0s 680ms; }
.stage .frame:not(.on) .lines .g-h line { transform: scaleX(0); opacity: 0; }
.stage .frame:not(.on) .lines .g-v line { transform: scaleY(0); opacity: 0; }
.stage .frame:not(.on) .lines .draw { stroke-dashoffset: 1; }
.stage .frame:not(.on) .lines .pop { opacity: 0; transform: scale(0.6); }
.stage .frame:not(.on) .anim-fade { opacity: 0; filter: blur(6px); }
.stage .frame:not(.on) .page.dark > .p-title,
.stage .frame:not(.on) .page.dark > .p-desc { opacity: 0; transform: translateY(8px); filter: blur(6px); }

@media (prefers-reduced-motion: reduce) {
  .stage .frame .lines *, .stage .frame .anim-fade, .stage .frame .page.dark > * { transition: opacity 400ms ease !important; transform: none !important; filter: none !important; }
  .stage .frame .lines .draw { stroke-dashoffset: 0 !important; }
}

/* Cover: the construction video, drawn on the full page */
.cover-svg { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }

/* Graphic patterns: one large repeat, two colourways */
.v-patterns { display: grid; grid-template-rows: 1fr 1fr; row-gap: 46px; }
.v-patterns .pattern { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Logo in perspective: refined panel (deck style) */
.persp-panel { top: 128px; }
.persp-panel .dk-folder { padding: 10px 0 12px; }
.persp-panel .dk-folder h4 { font-size: 14px; margin-bottom: 8px; }
.persp-panel .dk-row { min-height: 36px; }
/* Slider rows: label and value on one line, the track right under them */
.persp-panel label.dk-row { row-gap: 0; padding: 2px 0 4px; }
.persp-panel .dk-row output { font-size: 14px; }

/* Focus: one quiet brand ring everywhere, never the browser's blue box */
.dk-panel :focus { outline: none; }
.dk-panel :focus-visible { outline: 2px solid var(--sunbeam); outline-offset: 2px; }
.dk-row input[type="range"]:focus-visible { outline: none; }
.dk-row input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--daylight), 0 0 0 4px var(--sunbeam); }
.dk-row input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--daylight), 0 0 0 4px var(--sunbeam); }

/* Photos: eleven presets and the upload tile in one strip */
.persp-panel .dk-photos { grid-template-columns: repeat(12, 1fr); margin-bottom: 6px; }
.persp-panel .dk-photos button[aria-pressed="true"], .dk-upload.on { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.dk-upload {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-xs); border: 1px dashed var(--ink-40); color: var(--ink-60);
  background-size: cover; background-position: center;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.dk-upload svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dk-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dk-upload.on { border-color: transparent; }
.dk-upload.on svg { display: none; }
.dk-upload:active { transform: scale(0.96); }
.dk-upload:focus-within { outline: 2px solid var(--sunbeam); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .dk-upload:hover { border-color: var(--ink); color: var(--ink); } }

.persp-hint { margin: -4px 0 4px; font-size: 14px; line-height: 1.4; color: var(--ink-60); }

/* Text fields: hairline, a touch lighter than the page */
.persp-text {
  display: block; width: 100%; margin: 0 0 8px; padding: 8px 12px;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); resize: none;
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.persp-text::placeholder { color: var(--ink-40); }
.persp-text:focus-visible { outline: none; border-color: var(--ink-40); box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.28); }

/* Actions: Export is the one primary button; Reset and Copy stay quiet */
.persp-panel .dk-actions { align-items: center; padding-top: 14px; }
.dk-actions .dk-primary {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 14px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--daylight); transition: background 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .dk-actions .dk-primary:hover { background: #2d2924; color: var(--daylight); } }

/* No dividers: groups are separated by space alone */
.persp-panel .dk-folder, .persp-panel .dk-actions { border-top: 0; }
.persp-panel .dk-folder { padding: 8px 0 12px; }
.persp-panel .dk-actions { padding-top: 8px; }

/* DialKit slider: a filled bar, label inside on the left, value on the right, drag anywhere */
.persp-panel label.dk-row { position: relative; display: block; min-height: 0; padding: 0; margin: 0 0 6px; }
.persp-panel label.dk-row > span, .persp-panel label.dk-row > output {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; z-index: 1;
}
.persp-panel label.dk-row > span { left: 12px; font-size: 15px; color: var(--ink); }
.persp-panel label.dk-row > output { right: 12px; font-size: 14px; color: var(--ink-60); }
.persp-panel .dk-row input[type="range"] {
  display: block; height: 36px; border-radius: var(--radius-sm); cursor: ew-resize;
  background: linear-gradient(to right, rgba(20, 17, 14, 0.12) var(--p, 50%), rgba(20, 17, 14, 0.05) var(--p, 50%));
}
.persp-panel .dk-row input[type="range"]::-webkit-slider-runnable-track { height: 36px; background: none; }
.persp-panel .dk-row input[type="range"]::-webkit-slider-thumb {
  width: 2px; height: 18px; margin-top: 9px; border-radius: 1px; background: var(--ink-40); box-shadow: none; transform: none;
}
.persp-panel .dk-row input[type="range"]:active::-webkit-slider-thumb { background: var(--ink); transform: none; }
.persp-panel .dk-row input[type="range"]::-moz-range-track { height: 36px; background: none; }
.persp-panel .dk-row input[type="range"]::-moz-range-thumb { width: 2px; height: 18px; border: 0; border-radius: 1px; background: var(--ink-40); }
.persp-panel .dk-row input[type="range"]:focus-visible { outline: 2px solid var(--sunbeam); outline-offset: 2px; }
.persp-panel .dk-row input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: none; }

/* Logo in perspective: one rhythm for the whole panel.
   Group heading 13px muted, 10px to its first control; every control row is 36px with 6px between rows;
   24px between groups; all control labels 15px ink, values 14px muted. */
.persp-panel { top: 140px; }
.persp-panel .dk-panel { font-size: 15px; }
.persp-panel .dk-folder { padding: 0; margin-bottom: 24px; }
.persp-panel .dk-folder h4 { font-size: 13px; line-height: 1; color: var(--ink-40); margin: 0 0 10px; }
.persp-panel .dk-row { min-height: 36px; margin-bottom: 6px; }
.persp-panel .dk-row > span { font-size: 15px; }
.persp-panel .dk-seg { padding: 2px; }
.persp-panel .dk-seg button { font-size: 14px; padding: 5px 12px; }
.persp-panel .dk-photos { gap: 6px; margin-bottom: 12px; }
.persp-panel .dk-fills button { width: 26px; height: 26px; }
/* The hint belongs to the vanishing point row: tucked under it, clear of the sliders */
.persp-panel .persp-hint { margin: -8px 0 12px; font-size: 13px; }
.persp-panel label.dk-row { margin-bottom: 6px; }
.persp-panel .persp-text { margin: 0 0 6px; padding: 8px 12px; font-size: 15px; }
.persp-panel textarea.persp-text { height: 64px; }
.persp-panel .dk-actions { padding-top: 0; margin-top: -6px; }

/* Readable at deck scale: labels 17, values and options 15, headings and hints 14; 40px rows */
.persp-panel { top: 136px; }
.persp-panel .dk-folder { margin-bottom: 20px; }
.persp-panel .dk-folder h4 { font-size: 14px; margin-bottom: 10px; }
.persp-panel .dk-row { min-height: 40px; }
.persp-panel .dk-row > span, .persp-panel label.dk-row > span { font-size: 17px; }
.persp-panel .dk-row output, .persp-panel label.dk-row > output { font-size: 15px; }
.persp-panel .dk-seg button { font-size: 15px; padding: 6px 13px; }
.persp-panel .dk-row input[type="range"], .persp-panel .dk-row input[type="range"]::-webkit-slider-runnable-track { height: 40px; }
.persp-panel .dk-row input[type="range"]::-webkit-slider-thumb { height: 20px; margin-top: 10px; }
.persp-panel .persp-hint { font-size: 14px; }
.persp-panel .persp-text { font-size: 16px; padding: 9px 12px; }
.persp-panel textarea.persp-text { height: 70px; }
.persp-panel .dk-fills button { width: 28px; height: 28px; }
.persp-panel .dk-actions { font-size: 16px; }
.persp-panel .dk-folder h4, .persp-panel .persp-hint { font-size: 15px; }
.persp-panel .dk-row > span, .persp-panel label.dk-row > span { font-size: 18px; }
.persp-panel .dk-row output, .persp-panel label.dk-row > output, .persp-panel .dk-seg button { font-size: 16px; }
.persp-panel .persp-text, .persp-panel .dk-actions { font-size: 17px; }

/* No group headings: groups are set apart by space alone */
.persp-panel .dk-folder { margin-bottom: 28px; }
/* The hint belongs to its label: the vanishing point row hugs its text, the hint sits right under it */
.persp-panel .dk-row.dk-vp { min-height: 0; margin: 8px 0 0; align-items: baseline; }
.persp-panel .persp-hint { margin: 4px 0 14px; }
.persp-panel { top: 168px; }

/* One spacing rule: 12px between controls inside a group, 32px between groups, the hint 4px under its label */
.persp-panel .dk-folder { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; padding: 0; }
.persp-panel .dk-folder > * { margin: 0; }
.persp-panel .dk-row, .persp-panel label.dk-row { margin: 0; min-height: 40px; }
.persp-panel .dk-photos { margin: 0; }
.persp-panel .dk-row.dk-vp { min-height: 0; margin: 0; }
.persp-panel .persp-hint { margin: -8px 0 0; }
.persp-panel .persp-text { margin: 0; }
.persp-panel .dk-actions { margin: 0; padding: 0; }

/* Socials: five stories in phone format (9:16), story chrome only, no device frame */
.v-social { position: absolute; left: var(--m); right: var(--m); top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(4, 428px); justify-content: space-between; } /* centred on the page; fixed widths: height follows width (9:16 = 761px), never squeezed */
.story { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--linen); color: var(--daylight); box-shadow: 0 0 0 1px var(--hair); }
.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-bars { position: absolute; left: 10px; right: 10px; top: 9px; display: flex; gap: 3px; }
.story-bars i { flex: 1; height: 2px; border-radius: 1px; background: rgba(246, 241, 233, 0.4); }
.story-bars i.on { background: var(--daylight); }
.story-head { position: absolute; left: 10px; top: 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; filter: drop-shadow(0 1px 4px rgba(20, 17, 14, 0.25)); }
.story-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--daylight); color: var(--ink); }
.story-time { opacity: 0.6; }
.story-light { color: var(--ink); }
.story-light .story-bars i { background: rgba(20, 17, 14, 0.25); }
.story-light .story-bars i.on { background: var(--ink); }
.story-light .story-head { filter: none; }
.story-light .story-avatar { background: var(--ink); color: var(--daylight); }

/* Enter: the stories rise in one after another when the page arrives; reset once it has slid away */
/* The active progress bar fills while the story plays (its duration is set from the story loop) */
.story-bars i.now { position: relative; overflow: hidden; background: rgba(246, 241, 233, 0.4); }
.story-light .story-bars i.now { background: rgba(20, 17, 14, 0.25); }
.story-bars i.now::after { content: ""; position: absolute; inset: 0; background: var(--daylight); transform-origin: left; transform: scaleX(var(--fill, 1)); }
.story-light .story-bars i.now::after { background: var(--ink); }
.v-patterns .aperture-tiling { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v-patterns .tile { box-shadow: inset 0 0 0 1px var(--hair); }

/* Restored: lost when the Socials styles were rebuilt */
/* Gradients: three tall panels, palette colours only, pools of light drifting over a base, fine grain.
   Each panel's own class (lumiroll-morning, ...) is the exact CSS the Copy button hands out. */
.grad { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.stage .frame:not(.on) .grad, .ov-item .grad { animation-play-state: paused; }
.grad::after { /* grain: keeps long gradients from banding */
  content: ""; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grad figcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; font-size: 15px; line-height: 1.5; color: var(--ink-60); z-index: 1; }
.grad figcaption b { display: block; font-weight: 400; font-size: 18px; color: var(--ink); }
.grad.dark figcaption { color: rgba(246, 241, 233, 0.7); }
.grad.dark figcaption b { color: var(--daylight); }
.grad-copy {
  position: absolute; right: 16px; top: 16px; z-index: 1; padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink); background: rgba(246, 241, 233, 0.7); backdrop-filter: blur(6px);
  transition: background 160ms ease;
}
.grad-copy:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .grad-copy:hover { background: var(--daylight); } }

/* The deck's own background: the Morning gradient (its CSS comes from the Gradients page, class lumiroll-morning) */
body.lumiroll-morning { background-attachment: fixed; min-height: 100%; }
.persp-panel .dk-row.dk-pair { grid-template-columns: auto auto 1fr auto; column-gap: 12px; }
.persp-panel .dk-row.dk-pair > span:nth-of-type(2) { justify-self: end; }
.grad-tag { position: absolute; left: 24px; top: 22px; z-index: 1; font-size: 14px; color: var(--ink-60); } /* a label, not a button */
.grad-copy { box-shadow: inset 0 0 0 1px var(--hair); }

/* Gradients: the three fill the page edge to edge as columns, a day passing left to right; the title sits on Morning */
.gv { position: absolute; inset: 0; }
.gv .grad figcaption { left: 32px; bottom: 30px; }
.gv .grad-tag { left: 32px; top: 28px; }
.gv-a { display: grid; grid-template-columns: repeat(3, 1fr); }
.gv-a .grad { border-radius: 0; box-shadow: none; }
.gv-a .grad-tag { top: 150px; left: var(--m); }
.gv-a .grad figcaption { left: var(--m); bottom: var(--m); }
.gv-a .grad-copy { top: auto; bottom: var(--m); right: var(--m); }
.page:has(.gv-a) > .p-title { z-index: 3; }

/* Logo pages: one Download button under the description */
.page:has(.dl-row) > .p-desc { bottom: calc(var(--m) + 42px + 32px); } /* button height + gap */
.dl-row { position: absolute; left: var(--m); bottom: var(--m); display: flex; align-items: center; gap: 16px; }
.dl-btn { /* primary, like Export PNG in the Image composer */
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px 12px 18px; border-radius: var(--radius-sm); font-size: 16px; color: var(--daylight);
  background: var(--ink); transition: background 160ms ease;
}
.dl-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .dl-btn:hover { background: #2d2924; } }

/* Brand mockups / merch: one render filling the visual area, cropped (never stretched) */
.v-mockup img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); }

/* Full-page mockups: the render bleeds edge to edge (cropped, never stretched); the title sits on it */
.v-fullbleed { position: absolute; inset: 0; }
.v-fullbleed img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.page:has(.v-fullbleed) > .p-title { z-index: 3; }

/* Colour palette: photo + swatch columns across the full width, sized by use */
.pv { position: absolute; }
.pv-role { opacity: 0.72; }
.pv-vals { display: flex; flex-direction: column; gap: 4px; font-size: 16px; font-variant-numeric: tabular-nums; }
.pv-vals > span { opacity: 0.72; }
.pv b { font-weight: 400; }
.pv-copy { align-self: flex-start; font: inherit; color: inherit; opacity: 0.72; padding: 0; text-align: left; cursor: copy; } /* reads like RGB and CMYK; copies on click */
/* C: the sampled photos with their swatches, across the full width, wider for more-used colours */
.pv-c { left: var(--m); right: var(--m); top: 150px; bottom: var(--m); display: flex; gap: 12px; }
.pv-c figure { margin: 0; display: grid; grid-template-rows: 1fr 380px; gap: 12px; min-width: 0; }
.pv-c .src { position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 0; }
.pv-c .src img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-c .src i { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--daylight), 0 2px 8px rgba(20, 17, 14, 0.3); }
.pv-c .sw { border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.pv-c .sw.daylight { box-shadow: inset 0 0 0 1px var(--hair); }
.pv-c .sw b { font-size: 28px; letter-spacing: -0.01em; }
.pv-c .sw .pv-vals { margin-top: auto; }

/* Dark mode page (Brand skill): Ink ground, Daylight text, a light Daylight tint for surfaces, Daylight primary button */
.page.night { background: var(--ink); color: var(--daylight); }
.page.night .p-desc { color: rgba(246, 241, 233, 0.6); }
.page.night .sk-card { background: rgba(246, 241, 233, 0.06); }
.page.night .sk-card p, .page.night .sk-cols ol { color: rgba(246, 241, 233, 0.6); }
.page.night .sk-cols ol li::before, .page.night .sk-cols ul li { color: var(--daylight); }
.page.night .sk-cols ul li { border-top-color: rgba(246, 241, 233, 0.14); }
.page.night .dl-btn { background: var(--daylight); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .page.night .dl-btn:hover { background: var(--linen); } }

/* Brand skill: the composer's room full bleed (like Posters, Aperture on Ink); the title in its usual place.
   On the eye level, inside the calm Ink band: the headline and its line on the left margin, the Download on the right margin */
.skill { position: absolute; inset: 0; }
.skill-room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.page:has(.skill) > .p-title { z-index: 3; }
.skill-copy { position: absolute; left: var(--m); top: 50%; transform: translateY(-50%); width: 760px; }
.skill-h { margin: 0; font-weight: 400; font-size: 84px; line-height: 88px; letter-spacing: -0.04em; text-wrap: balance; }
.skill-p { margin: 24px 0 0; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: rgba(246, 241, 233, 0.72); }
.skill-dl { position: absolute; right: var(--m); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px 0 18px; border-radius: var(--radius-sm); background: var(--daylight); color: var(--ink); text-decoration: none; font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .skill-dl:hover { background: var(--linen); } }