/* the identity chapter's own pages (client tokens only) */

/* ---------- mark-anatomy: the symbol and what its parts mean ---------- */
.an{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:56px; align-items:center; }
.an-mark{ display:grid; place-items:center; min-height:0; height:100%; }
.an-mark svg{ width:min(100%, 420px); height:auto; max-height:100%; color:var(--c-brand-1); fill:currentColor; }
.an-mark svg path{ fill:currentColor; transition:opacity .35s var(--ease); }
.an.is-lit .an-mark svg path:not(.is-on){ opacity:.12; }
.an-parts{ margin:0; padding:0; list-style:none; }
.an-parts li{ display:grid; grid-template-columns:44px 1fr; gap:12px; padding:22px 0; border-top:1px solid var(--c-line); cursor:default; outline:none; transition:opacity .3s var(--ease); }
.an-parts li:last-child{ border-bottom:1px solid var(--c-line); }
.an:has(.an-parts li.is-on) .an-parts li:not(.is-on){ opacity:.38; }
.an-parts li:focus-visible b{ text-decoration:underline; text-underline-offset:4px; }
.an-n{ font:500 11px/1.9 var(--c-body); color:var(--c-text-muted); font-feature-settings:"tnum"; }
.an-parts b{ display:block; margin-bottom:6px; font:700 20px/1.2 var(--c-display); letter-spacing:-.015em; }
.an-parts p{ margin:0; max-width:380px; font:400 13px/1.55 var(--c-body); color:var(--c-text-muted); text-wrap:pretty; }

/* ---------- lockup-uses: the lockup in the formats it exists for ---------- */
.lu{ display:flex; align-items:center; justify-content:center; gap:64px; }
.lu figure{ margin:0; height:100%; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.lu-art{ position:relative; flex:none; }
.lu .lg{ width:100%; height:100%; }
.lu figcaption{ display:flex; flex-direction:column; gap:3px; font:400 12px/1.4 var(--c-body); color:var(--c-text-muted); }
.lu figcaption b{ font:600 12px/1.3 var(--c-body); color:var(--c-text); }
/* a feather flag on its pole */
.lu-flag .lu-art{ height:62%; aspect-ratio:9 / 22; display:flex; }
.lu-pole{ width:5px; height:100%; border-radius:3px; background:color-mix(in srgb, var(--c-brand-1) 70%, #888); flex:none; }
.lu-cloth{ flex:1; margin:2% 0 18%; border-radius:0 40% 6px 0 / 0 12% 6px 0; background:var(--c-brand-1); color:var(--c-on-brand-1); padding:30% 14%;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.5), inset -18px 0 30px -24px rgba(0,0,0,.4); }
/* a die-cut sticker: white border, a soft lift */
.lu-sticker .lu-art{ height:32%; aspect-ratio:1; }
.lu-die{ width:100%; height:100%; border-radius:50%; background:var(--c-brand-2); color:var(--c-on-brand-2); padding:20%;
  box-shadow:0 0 0 8px #fff, 0 14px 30px -12px rgba(0,0,0,.35); transform:rotate(-8deg); }
/* a profile post: the lockup over photography */
.lu-post .lu-art{ height:48%; aspect-ratio:4 / 5; border-radius:12px; overflow:clip; box-shadow:0 18px 40px -22px rgba(0,0,0,.45); }
.lu-ph{ position:absolute; inset:0; } .lu-ph .ph{ position:absolute; inset:0; }
.lu-over{ position:absolute; inset:0; padding:26% 22%; color:var(--c-on-photo); background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); }

/* ---------- lockup-picker: the lockup large, a row of names under it ---------- */
.lp{ display:grid; grid-template-rows:minmax(0, 1fr) auto; }
.lp-canvas{ position:relative; min-height:0; }
.lp-big{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; scale:.97;
  transition:opacity .5s cubic-bezier(0.23, 1, 0.32, 1), scale .7s cubic-bezier(0.23, 1, 0.32, 1); }
.lp-big.is-on{ opacity:1; scale:1; }
.lp-big .lg{ width:100%; height:100%; }
.lp-big.lp--lockup{ padding:0 20%; } .lp-big.lp--lockup .lg{ height:26%; }
.lp-big.lp--stacked .lg{ width:28%; height:46%; }
.lp-big.lp--wordmark{ padding:0 22%; } .lp-big.lp--wordmark .lg{ height:20%; }
.lp-big.lp--symbol .lg{ width:28%; height:40%; }
.lp-big.lp--tagline-lockup{ padding:0 20%; } .lp-big.lp--tagline-lockup .lg{ height:32%; }
/* a supplied lockup file (slot variants, e.g. wide sub-brand lockups): fits the width, never taller than a third */
.lp-big.lp--slot{ padding:0 16%; } .lp-big.lp--slot .lg{ height:30%; }
.lp-big.lp--slot .lg-file svg{ width:100%; height:100%; }
.lp-big.lp--slot .placeholder{ width:100%; height:30%; }
.lp-row{ position:relative; display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr)); border-top:1px solid color-mix(in srgb, currentColor 14%, transparent); font-family:var(--c-body); }
.lp-ind{ position:absolute; top:-1px; left:calc(100% / var(--n, 5) * var(--k, 0)); width:calc(100% / var(--n, 5)); height:2px; background:currentColor;
  transition:left .55s cubic-bezier(0.32, 0.72, 0, 1); }
.lp-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 16px 0 0; color:inherit; text-align:left; min-height:74px; }
.lp-cap{ font:600 13px/1.2 var(--c-body); opacity:.45; transition:opacity .25s; }
.lp-use{ font:400 12px/1.45 var(--c-body); opacity:0; translate:0 4px; transition:opacity .35s cubic-bezier(0.23, 1, 0.32, 1), translate .5s cubic-bezier(0.23, 1, 0.32, 1); text-wrap:pretty; }
.lp-tile:hover .lp-cap{ opacity:.8; }
.lp-tile[aria-checked="true"] .lp-cap{ opacity:1; }
.lp-tile[aria-checked="true"] .lp-use{ opacity:.7; translate:0 0; }
.lp-tile:focus-visible{ outline:none; } .lp-tile:focus-visible .lp-cap{ text-decoration:underline; text-underline-offset:4px; }
@media (prefers-reduced-motion: reduce){ .lp-big{ transition:opacity .2s; scale:1; } .lp-ind{ transition:none; } }