/*
  Up From the Ranks — page styles
  Exported from the published Claude artifact without visual changes.
  Every selector is scoped under .uftr so nothing leaks into a host portfolio.
  Original global selectors were mapped: :root/body -> .uftr, * -> .uftr *, X -> .uftr X.
  Theme: follows prefers-color-scheme; a data-theme="light|dark" attribute on <html> overrides it.
*/
.uftr{
  --ground:#ECEDEF; --surface:#E1E3E7; --ink:#15191F; --muted:#59606B;
  --rule:#C5C9D0; --brass:#8E6B22; --leather:#4A2E22;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .uftr{
    --ground:#0E1116; --surface:#161A21; --ink:#E7E5E0; --muted:#949AA5;
    --rule:#2A303A; --brass:#CDA85C; --leather:#B98A6F; color-scheme:dark;
  }
}
:root[data-theme="dark"] .uftr{
  --ground:#0E1116; --surface:#161A21; --ink:#E7E5E0; --muted:#949AA5;
  --rule:#2A303A; --brass:#CDA85C; --leather:#B98A6F; color-scheme:dark;
}
.uftr,
.uftr *{box-sizing:border-box}
.uftr{background:var(--ground);color:var(--ink);font:400 1.0625rem/1.65 var(--body);padding-inline:clamp(16px,4vw,56px);padding-block:0 72px}
.uftr .wrap{max-width:1180px;margin:0 auto}
.uftr img{max-width:100%;display:block}
.uftr h1,.uftr h2,.uftr h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:.01em}
.uftr p{margin:0}
.uftr .label{font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.uftr .brass{color:var(--brass)}

/* Hero */
.uftr .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:end;padding-block:clamp(32px,6vw,72px) clamp(40px,6vw,80px);border-bottom:1px solid var(--rule)}
.uftr .hero figure{margin:0}
.uftr .hero figure button{aspect-ratio:9/14;max-height:78vh}
.uftr .hero figure img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.uftr .hero-text{display:flex;flex-direction:column;gap:22px;padding-bottom:8px}
.uftr .motto{font:italic 400 1.05rem/1.4 var(--body);color:var(--brass)}
.uftr h1{font-weight:800;font-size:clamp(3.4rem,9vw,7.4rem);line-height:.86;text-transform:uppercase}
.uftr .dek{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;max-width:34ch}
.uftr .facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:10px 32px;padding-top:18px;border-top:1px solid var(--rule)}
.uftr .facts div{display:flex;flex-direction:column;gap:2px}
.uftr .facts b{font:500 1.35rem/1.2 var(--display);letter-spacing:.02em}

/* Statement */
.uftr .statement{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);padding-block:clamp(48px,7vw,96px);border-bottom:1px solid var(--rule)}
.uftr .statement h2{font-weight:500;font-size:1.5rem;text-transform:uppercase}
.uftr .prose{display:flex;flex-direction:column;gap:1.1em;max-width:62ch}
.uftr .prose .lead{font-size:1.3rem;line-height:1.55}
.uftr .prose em{font-style:italic}

/* Plates */
.uftr .plates{display:flex;flex-direction:column}
.uftr .plate{display:grid;gap:clamp(24px,4vw,56px);padding-block:clamp(48px,7vw,88px);border-bottom:1px solid var(--rule);align-items:center}
.uftr .plate.portrait{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.uftr .plate.portrait.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.uftr .plate.portrait.flip figure{order:2}
.uftr .plate.wide{grid-template-columns:1fr}
.uftr .plate figure{margin:0;display:flex;flex-direction:column;gap:10px}
.uftr .plate figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.uftr .plate-text{display:flex;flex-direction:column;gap:16px;max-width:52ch}
.uftr .plate.wide .plate-text{max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px clamp(24px,5vw,72px)}
.uftr .plate.wide .plate-text .col{display:flex;flex-direction:column;gap:16px}
.uftr .plate h3{font-weight:800;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:.95;text-transform:uppercase}
.uftr .plate .num{font:500 .8rem/1 var(--mono);letter-spacing:.16em;color:var(--brass);text-transform:uppercase}
.uftr .notes{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.95rem}
.uftr .notes dt{font:500 .72rem/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.uftr .notes dd{margin:0}

.uftr button.view{all:unset;cursor:zoom-in;display:block;width:100%;overflow:hidden;background:var(--surface)}
.uftr button.view:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.uftr button.view img{width:100%;transition:transform .6s ease}
@media (hover:hover){.uftr button.view:hover img{transform:scale(1.015)}}

/* Arc */
.uftr .arc{padding-block:clamp(48px,7vw,88px);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);border-bottom:1px solid var(--rule)}
.uftr .arc h2{font-weight:500;font-size:1.5rem;text-transform:uppercase}
.uftr .track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.uftr .track div{padding:14px 18px 0 0;display:flex;flex-direction:column;gap:6px;position:relative}
.uftr .track div::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--ground);border:2px solid var(--ink);border-radius:50%}
.uftr .track div:last-child::before{background:var(--brass);border-color:var(--brass)}
.uftr .track b{font:800 1.4rem/1.1 var(--display);text-transform:uppercase}
.uftr .track p{font-size:.95rem;color:var(--muted)}

.uftr .credits{padding-top:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.uftr dialog{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
.uftr dialog::backdrop{background:rgba(8,10,14,.92)}
.uftr dialog img{max-width:96vw;max-height:94vh;width:auto;height:auto}
.uftr dialog button{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:18px;font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:#E7E5E0;color:#15191F;border:0;padding:10px 14px;cursor:pointer}

@media (max-width:820px){
  .uftr .hero,.uftr .statement,.uftr .arc,.uftr .plate.portrait,.uftr .plate.portrait.flip,.uftr .plate.wide .plate-text{grid-template-columns:1fr}
  .uftr .plate.portrait.flip figure{order:0}
  .uftr .hero figure button{max-height:none}
  .uftr .facts{grid-template-columns:repeat(2,auto)}
  .uftr .track{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--ink);gap:22px}
  .uftr .track div{padding:0 0 0 20px}
  .uftr .track div::before{top:6px;left:-7px}
}
@media (prefers-reduced-motion:reduce){.uftr button.view img{transition:none}}