/* visual language modules (client tokens only) */
/* the visual area: the 33px frame of the unobscured stage (the nav's margin, so bottom edges line up);
   with a switcher on the bottom margin it stops 24px above the switcher */
.va{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px;
  font-family:var(--c-body); transition:left .7s var(--ease); }
.has-switcher .va{ bottom:calc(33px + 40px * var(--ui, 1) + 24px); }

/* ---------- colour system ----------
   On the same frame as photography (33px margins, 8px gaps): five swatches, the brand gradient
   as its own band, then three applied cards that take the selected colour. Quiet type throughout. */
.clr-sys{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; display:grid;
  grid-template-rows:minmax(0, 2.1fr) 64px minmax(0, 1fr); grid-template-columns:minmax(0, 1fr); gap:8px;
  font-family:var(--c-body); transition:left .7s var(--ease);
  --pick:var(--c-brand-1); --pick-on:var(--c-on-brand-1); }
.clr-row{ display:flex; min-width:0; min-height:0; border-radius:14px; overflow:clip; }
.clr-sw{ position:relative; flex:1; min-width:0; background:var(--sw); color:var(--on); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; gap:4px;
  transition:flex .7s var(--ease); }
.clr-sw.is-open{ flex:2; }
.clr-sw:focus-visible{ outline:none; box-shadow:inset 0 0 0 1.5px currentColor; }
.clr-idx{ position:absolute; top:18px; left:18px; font:500 11px/1 var(--c-body); opacity:.6; font-feature-settings:"tnum"; }
.clr-sw b{ font:600 17px/1.2 var(--c-display); letter-spacing:-.01em; white-space:nowrap; }
.clr-hex, .clr-mean{ font:400 12px/1.45 var(--c-body); opacity:0; max-height:0; overflow:hidden; transition:opacity .3s, max-height .45s var(--ease); }
.clr-hex{ white-space:nowrap; font-feature-settings:"tnum"; }
.clr-mean{ width:240px; max-width:100%; }
.clr-sw.is-open .clr-hex, .clr-sw.is-open .clr-mean{ opacity:.75; max-height:60px; transition-delay:.2s; }

.clr-grad{ border-radius:14px; background:var(--c-gradient); color:var(--c-on-brand-2); display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.clr-grad b{ font:600 13px/1 var(--c-body); }
.clr-grad span{ font:400 12px/1 var(--c-body); color:var(--c-on-brand-4); opacity:.75; font-feature-settings:"tnum"; }

.clr-applied{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; min-height:0; }
.clr-card{ min-width:0; border-radius:14px; padding:18px; overflow:hidden; display:flex; flex-direction:column; gap:4px;
  background:var(--c-surface); box-shadow:inset 0 0 0 1px var(--c-line); transition:background .45s var(--ease), color .45s var(--ease); }
.clr-card small{ font:500 11px/1 var(--c-body); color:var(--c-text-muted); }
.clr-card b{ margin-top:auto; font:600 17px/1.2 var(--c-display); letter-spacing:-.01em; }
.clr-card p{ margin:0; font:400 12px/1.45 var(--c-body); color:var(--c-text-muted); }
.clr-poster{ background:var(--pick); color:var(--pick-on); box-shadow:none; justify-content:space-between; }
.clr-poster .ad-brand{ font-size:13px; gap:6px; } .clr-poster .ad-sym{ width:16px; height:16px; }
.clr-poster p{ font:700 24px/1.05 var(--c-display); letter-spacing:-.025em; color:inherit; }
.clr-note b span{ display:block; margin-top:4px; font:400 12px/1 var(--c-body); color:var(--c-text-muted); font-feature-settings:"tnum"; }
.clr-product i{ align-self:flex-start; margin-top:10px; font:500 12px/1 var(--c-body); font-style:normal; padding:8px 14px; border-radius:999px; background:var(--pick); color:var(--pick-on); transition:background .45s, color .45s; }
.clr-note em{ margin-top:10px; font:400 12px/1 var(--c-body); font-style:normal; display:flex; align-items:center; gap:6px; color:var(--c-text-muted); }
.clr-note em::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c-accent); }

/* colour families (a token set with a palette): the neutrals as one row that opens to show specs,
   then one column per accent: the colour, its dark partner, its gradient. Specs at 12px, quiet. */
.clr-fam{ grid-template-rows:minmax(0, 1fr) minmax(0, 2fr); }
.clr-n{ position:relative; flex:1; min-width:0; background:var(--sw); color:var(--on); padding:16px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; gap:3px;
  transition:flex .7s var(--ease); }
.clr-n.is-open{ flex:2.4; }
.clr-n:focus-visible{ outline:none; box-shadow:inset 0 0 0 1.5px currentColor; }
.clr-n b, .clr-f b{ font:600 17px/1.2 var(--c-display); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.clr-n b{ font-size:13px; }
.clr-n .clr-hex, .clr-n .clr-spec{ font:400 12px/1.45 var(--c-body); white-space:nowrap; font-feature-settings:"tnum"; opacity:0; max-height:0; overflow:hidden; transition:opacity .3s, max-height .45s var(--ease); }
.clr-n.is-open .clr-hex, .clr-n.is-open .clr-spec{ opacity:.75; max-height:20px; transition-delay:.2s; }
.clr-accents{ display:grid; grid-template-columns:repeat(var(--na, 3), minmax(0, 1fr)); gap:8px; min-height:0; }
.clr-fam-col{ display:grid; grid-template-rows:minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .55fr); border-radius:14px; overflow:clip; min-height:0; }
.clr-fam-col:has(> :only-child){ grid-template-rows:minmax(0, 1fr); }   /* a core colour with no dark partner or gradient fills its column */
.clr-f{ background:var(--sw); color:var(--on); padding:16px 18px; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; min-height:0; overflow:hidden; }
.clr-f .clr-hex, .clr-f .clr-spec{ max-height:none; font:400 12px/1.45 var(--c-body); opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-feature-settings:"tnum"; }
.clr-f-dark b, .clr-f-grad b{ font-size:13px; }
.clr-f-grad{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }

/* ---------- typography ----------
   A live specimen (left, dark) and the type scale (right), on the frame. */
.ty{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:8px; }
.ty-live{ position:relative; min-width:0; border-radius:14px; overflow:clip; background:var(--c-brand-1); color:var(--c-on-brand-1);
  display:grid; grid-template-rows:auto 1fr auto auto; padding:22px 26px 0; container-type:inline-size; }
.ty-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.ty-meta p{ margin:0; display:flex; flex-direction:column; gap:4px; }
.ty-meta b{ font:600 13px/1.2 var(--c-body); }
.ty-meta span{ font:400 12px/1.2 var(--c-body); opacity:.6; }
.ty-weights{ display:inline-flex; height:30px; padding:2px; gap:2px; border-radius:999px; background:color-mix(in srgb, currentColor 12%, transparent); font-family:var(--shell); }
.ty-weights button{ height:26px; padding:0 11px; border-radius:999px; font:500 11px/1 var(--shell); color:inherit; opacity:.7; transition:background-color .25s var(--ease), opacity .25s; }
.ty-weights button[aria-pressed="true"]{ opacity:1; background:color-mix(in srgb, currentColor 18%, transparent); }
.ty-try{ align-self:center; margin:0; outline:none; font-family:var(--c-display); font-weight:var(--wt); font-size:min(17cqw, 124px); line-height:.92; letter-spacing:-.045em;
  text-wrap:balance; transition:font-weight .35s var(--ease); cursor:text; caret-color:var(--c-accent); }
.ty--body .ty-try{ font-family:var(--c-body); font-size:min(6.4cqw, 44px); line-height:1.18; letter-spacing:-.02em; }
.ty-try:focus-visible{ outline:none; }
.ty-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:16px; }
.ty-role{ margin:0; font:400 12px/1.45 var(--c-body); opacity:.75; max-width:320px; }
.ty-hint{ font:400 11px/1 var(--c-body); opacity:.45; white-space:nowrap; }
.ty-glyphs{ margin:0 -26px; padding:14px 0 16px; border-top:1px solid color-mix(in srgb, currentColor 14%, transparent); display:flex; white-space:nowrap; overflow:hidden;
  font-family:var(--c-display); font-weight:var(--wt); font-size:22px; letter-spacing:.01em; opacity:.85; }
.ty--body .ty-glyphs{ font-family:var(--c-body); }
.ty-glyphs span{ flex:none; padding-right:0; animation:ty-drift 60s linear infinite; }
@keyframes ty-drift{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion: reduce){ .ty-glyphs span{ animation:none; } }

.ty-scale{ margin:0; padding:0 4px; list-style:none; min-width:0; display:grid; grid-template-rows:repeat(5, auto); align-content:space-between; }
.ty-row{ min-width:0; display:grid; grid-template-columns:96px minmax(0, 1fr); gap:18px; align-items:baseline; padding:14px 0; border-top:1px solid var(--c-line); }
.ty-row:first-child{ border-top:0; padding-top:4px; }
.ty-spec-l{ margin:0; display:flex; flex-direction:column; gap:3px; }
.ty-spec-l b{ font:600 12px/1.2 var(--c-body); }
.ty-spec-l span{ font:400 11px/1.2 var(--c-body); color:var(--c-text-muted); font-feature-settings:"tnum"; }
/* sizes relative to one another; the largest at 60 so the scale fits beside the specimen */
.ty-sample{ margin:0; min-width:0; font-size:clamp(12px, calc(var(--size) * 1px * .625 + 5px), 64px); letter-spacing:-.02em; text-wrap:balance; overflow-wrap:anywhere; }
.ty-row--body .ty-sample{ letter-spacing:0; text-wrap:pretty; }

/* ---------- photography accordion ----------
   Five full-height panels fill the stage to the margins; one opens wide with its direction,
   a big line and a sentence. Closed panels keep a number at the top and a vertical caption. */
.pa{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; display:flex; gap:8px; font-family:var(--c-body); transition:left .7s var(--ease); }
.pa-panel{ position:relative; flex:1; min-width:0; border-radius:14px; overflow:hidden; padding:0; text-align:left; color:var(--c-on-photo);
  transition:flex .8s cubic-bezier(.2,.7,.2,1); }
.pa-panel.is-open{ flex:4.2; }
.pa-panel:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--c-on-photo); }
.pa-panel .ph{ position:absolute; inset:0; transform:scale(1.08); filter:saturate(.8) brightness(.9); transition:transform 1.1s var(--ease), filter .8s; }
.pa-panel.is-open .ph{ transform:none; filter:none; }
.pa-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18), transparent 26%, transparent 48%, rgba(0,0,0,.62)); }
.pa-n{ position:absolute; top:18px; left:18px; font:500 11px/1 var(--c-body); opacity:.85; font-feature-settings:"tnum"; }
.pa-cap{ position:absolute; left:24px; bottom:22px; width:min(440px, calc(100% - 48px)); display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateY(12px); transition:opacity .4s, transform .6s var(--ease); }
.pa-panel.is-open .pa-cap{ opacity:1; transform:none; transition-delay:.3s; }
.pa-cap small{ font:500 11px/1 var(--c-body); opacity:.75; }
.pa-cap b{ font:700 30px/1.05 var(--c-display); letter-spacing:-.025em; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.pa-cap span{ font:400 13px/1.45 var(--c-body); opacity:.85; max-width:340px; text-wrap:pretty; }
.pa-v{ position:absolute; left:18px; bottom:18px; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  font:600 14px/1 var(--c-display); letter-spacing:-.01em; transition:opacity .3s; }
.pa-panel.is-open .pa-v{ opacity:0; transition-delay:0s; }
.pa-panel:not(.is-open) .pa-v{ transition-delay:.35s; }
.pa-panel .ph-label{ display:none; }

/* ---------- tone of voice ---------- */
.tv{ display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; }
.tv-h{ margin:0 0 12px; font:800 30px/1.02 var(--c-display); letter-spacing:-.03em; text-wrap:balance; }
.tv-p{ margin:0 0 26px; font:400 15px/1.5 var(--c-body); color:var(--c-text-muted); max-width:460px; }
.tv-lists{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.tv-lists small{ display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--c-body); margin-bottom:10px; }
.tv-lists small::before{ content:""; width:10px; height:10px; border-radius:50%; }
.tv-yes::before{ background:var(--c-brand-2); } .tv-no::before{ background:var(--c-accent); }
.tv-lists ul{ margin:0; padding:0; list-style:none; }
.tv-lists li{ padding:9px 0; border-top:1px solid var(--c-line); font:500 13px/1.4 var(--c-body); }
.tv-ba{ display:flex; flex-direction:column; gap:12px; }
.tv-before, .tv-after{ border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; gap:10px; }
.tv-before{ background:color-mix(in srgb, var(--c-text) 5%, var(--c-background)); color:var(--c-text-muted); }
.tv-before p{ margin:0; font:400 13px/1.5 var(--c-body); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--c-accent) 70%, transparent); }
.tv-after{ background:var(--c-brand-1); color:var(--c-on-brand-1); }
.tv-after p{ margin:0; font:800 20px/1.1 var(--c-display); letter-spacing:-.02em; }
.tv-before small, .tv-after small{ font:500 12px/1 var(--c-body); opacity:.65; }
.tv-after .ad-brand{ font-size:15px; gap:6px; } .tv-after .ad-sym{ width:18px; height:18px; }

/* ---------- brand language ---------- */
.bl{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:0 44px; }
.bl-item{ border-top:1px solid color-mix(in srgb, currentColor 18%, transparent); padding:14px 0 18px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.bl-item small{ font:500 12px/1 var(--c-body); opacity:.6; }
.bl-art{ flex:1; display:flex; align-items:center; min-height:0; }
.bl-art p{ margin:0; font:800 28px/1.02 var(--c-display); letter-spacing:-.03em; text-wrap:balance; }
.bl-name .bl-art .lg{ width:70%; height:100%; place-items:center start; }
.bl-item > span{ font:500 13px/1.45 var(--c-body); opacity:.7; max-width:420px; }

/* ---------- motion ---------- */
.mo{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.mo figure{ margin:0; display:flex; flex-direction:column; gap:14px; min-height:0; }
.mo-stage{ flex:1; border-radius:14px; overflow:hidden; background:color-mix(in srgb, var(--c-on-brand-1) 8%, transparent); display:grid; place-items:center; position:relative; }
.mo figcaption{ display:flex; flex-direction:column; gap:4px; font:500 13px/1.45 var(--c-body); opacity:.8; }
.mo figcaption b{ font:700 18px/1.1 var(--c-display); letter-spacing:-.02em; opacity:1; }
.mo-rise p{ margin:0; font:800 28px/1.02 var(--c-display); letter-spacing:-.03em; text-align:center; padding:0 20px; }
.mo-fill span{ width:150px; height:150px; display:block; transform-origin:50% 100%; }
.mo-fill svg{ width:100%; height:100%; fill:currentColor; } .mo-fill svg path{ fill:currentColor; }
.mo-drift{ position:absolute; inset:0; }
.mo-drift .ph{ position:absolute; inset:-6% -12%; width:124%; height:112%; }
.mo-card{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); padding:10px 14px; border-radius:999px; background:var(--c-brand-5); color:var(--c-brand-1); }
.mo-card .ad-brand{ font-size:16px; } .mo-card .ad-sym{ width:18px; height:18px; }
.mo.is-playing .mo-rise p{ animation:mo-rise 3.2s cubic-bezier(0.23,1,0.32,1) infinite; }
.mo.is-playing .mo-fill span{ animation:mo-fill 3.2s cubic-bezier(0.23,1,0.32,1) infinite; }
.mo.is-playing .mo-drift .ph{ animation:mo-drift 9s ease-in-out infinite alternate; }
@keyframes mo-rise{ 0%{ opacity:0; transform:translateY(14px); } 30%, 80%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes mo-fill{ 0%{ transform:scaleY(.2) scaleX(.9); opacity:.2; } 40%, 85%{ transform:none; opacity:1; } 100%{ opacity:.2; } }
@keyframes mo-drift{ to{ transform:translateX(9%); } }
@media (prefers-reduced-motion: reduce){ .mo *{ animation:none !important; } }
.va.mo{ bottom:calc(33px + 40px * var(--ui, 1) + 24px); }   /* Play / Pause sits on the bottom margin, like a switcher */
.mo-toggle{ position:absolute; left:50%; bottom:calc(-24px - 40px * var(--ui, 1)); height:40px; padding:0 20px; border-radius:999px; background:color-mix(in srgb, var(--stage-fg) 12%, transparent); color:var(--stage-fg);
  font:var(--t-control); transform:translateX(-50%) scale(var(--ui, 1)); transform-origin:50% 100%; }   /* chrome on the bottom margin */

/* the play palette: rows of named colours, each carrying its game's mark */
.clr-play{ grid-template-rows:repeat(2, minmax(0, 1fr)); }
.clr-p{ justify-content:space-between; padding:18px; cursor:pointer; }
.clr-p.is-open{ flex:1.9; }
.clr-p-mark{ align-self:stretch; height:34%; padding:0 6%; display:grid; place-items:center; transition:scale .7s var(--ease); }
.clr-p-mark svg{ width:auto; height:100%; max-width:100%; display:block; }
.clr-p.is-open .clr-p-mark{ scale:1.06; }
.clr-p b{ margin-top:auto; }