/* Kept app: editorial refinement. Square corners, Didone headings, hairline rules, tracked labels, no bounce. */
body{-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.025em}
h1{font-size:clamp(2rem,5vw,3rem);line-height:1}
h2{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.02}
h3{font-size:1.35rem;font-weight:500}
em,.hero h2 em{font-style:italic}
.cap,.eyebrow,.small.cap{letter-spacing:.16em}
.cap{font-size:.68rem;font-weight:600;text-transform:uppercase}

/* controls */
.btn{border-radius:0;border-width:1px;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600;min-height:44px;padding:.8em 1.3em}
.btn.primary{box-shadow:none}
.btn.ghost{border-color:var(--fg)}
.chip,.seg button,.seg a,.cat-tabs button,.before-btn,.final-compare figcaption{border-radius:0!important}
.seg button,.seg a,.cat-tabs button{border-width:1px;border-color:var(--fg);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.chip{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
input,select,textarea{border-radius:0!important}
.meter{height:3px;border-radius:0}.meter i{border-radius:0}
.dots i{border-radius:0;width:12px;height:3px;border:0;background:var(--line)}.dots i.on{background:var(--accent)}

/* cards: hairline rules instead of soft boxes */
.card{border-radius:0;box-shadow:none!important;border:1px solid var(--fg)!important;background:transparent}
[data-side=barber] .card,[data-side=jr] .card{border-width:1px}
.look-card{border-radius:0;border:1px solid var(--line);background:transparent}
.look-card:hover{transform:none;box-shadow:none;border-color:var(--fg)}
.toast,.auth-card{border-radius:0}
.auth-card{border:1px solid var(--fg)}

/* hero: cover story */
.hero{border-radius:0;padding:clamp(26px,5vw,56px) clamp(20px,4vw,48px);min-height:220px;display:grid;align-content:end}
.hero h2{font-size:clamp(2.2rem,7vw,4.6rem);line-height:.96;letter-spacing:-.045em;max-width:12ch}
.hero p:first-child,.hero .cap{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.hero p{font-size:1rem;opacity:.85}
.hero .btn.primary{background:var(--hero-ink);color:var(--hero);border-color:var(--hero-ink)}
.hero .btn.ghost{border-color:color-mix(in srgb,var(--hero-ink) 55%,transparent);color:var(--hero-ink)}
.hero-art i{display:none}
.hero::before{content:"";position:absolute;right:clamp(16px,5vw,60px);top:0;bottom:0;width:min(34%,260px);z-index:-1;border:1px solid color-mix(in srgb,var(--hero-ink) 28%,transparent);border-top:0;border-radius:999px 999px 0 0;margin-top:clamp(18px,4vw,40px);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 34%,transparent),transparent 78%);transform:translate3d(calc((var(--mx,.5) - .5) * 30px * var(--parallax)),calc((var(--my,.5) - .5) * 20px * var(--parallax)),0);transition:transform .6s var(--ease)}
@media (max-width:560px){.hero::before{opacity:.5;width:44%}}
.hero{background:radial-gradient(110% 120% at 85% 0%,color-mix(in srgb,var(--accent) 26%,var(--hero)),var(--hero) 62%)}

/* nav: no dashed outline, quiet active state */
.nav-i.cta:not(.on){border:1px solid var(--accent)}
.nav-i{border-radius:0;font-size:.8rem;letter-spacing:.06em}
.nav-i.on{box-shadow:inset 3px 0 0 var(--accent);background:var(--accent-soft);color:var(--fg);border-radius:0}
.tab.cta .ic{border-radius:0;box-shadow:none}
.brand .tile,.tile{border-radius:2px}
.avatar{border-radius:50%}

/* hot magazine: solid color plates, accent buttons */
.hero{background:var(--hero)}
.hero::before{background:var(--accent);border-color:var(--accent)}
.hero .btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
[data-side=jr] .btn.primary,[data-side=jr] .hero .btn.primary{color:#0E1A08}
.card{border-color:var(--fg)!important}
.nav-i.on{background:var(--accent);color:var(--on-accent);box-shadow:none}
.nav-i.cta:not(.on){border-color:var(--fg)}
.stage-empty,.stage-empty h2,.stage-empty h3,.stage-empty p{color:#fff}.stage-empty p{opacity:.8}
select{font:inherit;letter-spacing:0;text-transform:none}

/* studio: nothing scrolls sideways or gets clipped */
.cat-tabs { flex-wrap: wrap; overflow: visible; }
.cat-tabs button, .cat-tabs .btn { flex: 1 1 auto; }
.look-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; overflow: visible; padding: 4px 0 6px; scroll-snap-type: none; }
.look-strip .look-card { width: auto; min-width: 0; }
.look-strip .look-card b, .look-strip .look-card small { overflow-wrap: anywhere; }

/* ---- real photography (black and white, tinted by the frame color) ---- */
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--oy,20%);mix-blend-mode:multiply;filter:contrast(1.08)}
.hero.has-ph{padding-right:calc(clamp(96px,26%,190px) + 26px);min-height:190px}
.hero-ph{position:absolute;right:14px;top:14px;bottom:0;width:clamp(96px,26%,190px);background:var(--hero-ink);overflow:hidden;border-radius:999px 999px 0 0;isolation:isolate}
@media(max-width:420px){.hero-ph{display:none}.hero.has-ph{padding-right:20px;min-height:0}}
.auth-ph{display:none}
@media(min-width:900px){
  .auth{grid-template-columns:auto auto;gap:clamp(28px,5vw,72px);justify-content:center;align-items:center;align-content:center}
  .auth-ph{display:block;position:relative;width:min(30vw,360px);height:min(78vh,600px);background:var(--hero-ink);border-radius:999px 999px 0 0;overflow:hidden;isolation:isolate}
}
.ac-ic.ac-ph{position:relative;width:64px;height:64px;overflow:hidden;isolation:isolate;border-radius:var(--radius)}
.ac-banner{position:relative;height:clamp(120px,22vw,200px);background:var(--accent);overflow:hidden;border-radius:var(--radius);margin:10px 0;isolation:isolate}
.ac-banner .ph{object-position:50% var(--oy,30%)}

/* one control height */
.btn, .btn.sm, .btn.ghost, .btn.primary { box-sizing: border-box; min-height: 44px; padding-block: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.1; }
.btn.sm { min-height: 44px; }
.chips .chip, .cat-tabs button { min-height: 36px; }
.btn{padding-block:6px}

/* mobile: list rows wrap instead of overflowing, inputs ellipsize long placeholders */
.li{min-width:0;flex-wrap:wrap}
.li .grow{min-width:0;flex:1 1 120px;overflow-wrap:anywhere}
.li .chip{flex:none}
input,select,textarea{text-overflow:ellipsis;max-width:100%}