/* ---------- v14: shorter home ---------- */
/* hero: logo, one line, one CTA, one left edge */
.hero.h13 .name.h14{grid-column:2/6;grid-row:2;align-self:center;padding:var(--pad)}
.hero.h13 .h-logo{margin:0;line-height:0}
.hero.h13 .h-logo img{display:block;width:clamp(260px,24vw,380px);height:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.hero.h13 .h-line{margin:clamp(22px,2.4vw,32px) 0 0;font-size:13px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--light);text-shadow:0 1px 3px rgba(0,0,0,.5)}
@media (max-width:640px){
  .hero.h13 .in{grid-template-rows:auto 1fr auto}
  .hero.h13 .name.h14{grid-column:1/4;grid-row:2;padding:0 var(--pad)}
  .hero.h13 .h-logo img{width:190px}
  .hero.h13 .h-line{font-size:11.5px;letter-spacing:.14em;margin-top:20px}
  .hero.h13 .fh,.hero.h13 nav{grid-row:3}
}
@media (max-width:380px){.hero.h13 .h-line{font-size:11px;letter-spacing:.1em}}
@media (max-width:380px) and (max-height:700px){.hero.h13 .h-logo img{width:164px}.hero.h13 .h-line{margin-top:16px}}

/* spotlight: one screen, photo inset on all sides */
.spot{height:100vh;height:100svh;min-height:560px;box-sizing:border-box;padding:clamp(24px,4vw,64px);border-top:1px solid var(--line)}
.sp{display:grid;height:100%;grid-template-columns:minmax(0,1fr) minmax(260px,27%);gap:clamp(24px,3.4vw,64px);align-items:end}
.sp-ph{height:100%;min-height:0;overflow:hidden;background:#e4e1db}
.sp-ph img{width:100%;height:100%;object-fit:cover}
.sp-meta{padding-bottom:4px}
.sp-lab{margin:0 0 6px;font-size:12px;font-weight:450;color:var(--ink)}
.sp-b{margin:0 0 clamp(20px,3vh,36px);color:var(--ink-2)}
.sp-addr{margin:0;font-weight:300;font-size:clamp(24px,2.2vw,34px);letter-spacing:.04em;line-height:1.2}
.sp-spec{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sp-price{margin:clamp(16px,2.4vh,28px) 0 0;font-weight:300;font-size:clamp(28px,2.8vw,44px);letter-spacing:.02em;line-height:1}
.sp-cta{display:inline-block;margin-top:clamp(20px,3vh,36px);font-size:12px;border-bottom:1px solid currentColor;padding-bottom:4px}
.sp:hover .sp-addr,.sp:focus-visible .sp-addr{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.sp:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
@media (max-width:640px){
  .spot{padding:20px}
  .sp{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:16px;align-items:start}
  .sp-b{margin-bottom:12px}
  .sp-addr{font-size:22px}
  .sp-spec{font-size:14px;margin-top:6px}
  .sp-price{font-size:28px;margin-top:12px}
  .sp-cta{margin-top:14px}
}
/* two-up cards (~50vh) */
.act,.ps{border-top:1px solid var(--line)}
.act>.bl-h,.ps>.bl-h{border-top:0;padding-top:clamp(28px,3.4vw,48px);padding-bottom:clamp(16px,1.8vw,24px)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,40px);padding:0 clamp(20px,4vw,56px) clamp(36px,4vw,56px)}
.cd>a{display:block}
.cd-ph{height:calc(50vh - 112px);height:calc(50svh - 112px);min-height:220px;overflow:hidden;background:#e4e1db}
.cd-ph img{width:100%;height:100%;object-fit:cover}
.cd-ph.none{display:flex;align-items:center;justify-content:center}
.cd-ph.none span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cd-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding-top:12px}
.cd-lab{grid-column:1/3;margin:0 0 4px;color:var(--ink-2)}
.cd-addr{grid-column:1;margin:0;font-size:17px;font-weight:350;letter-spacing:.01em;line-height:1.3}
.cd-price{grid-column:2;grid-row:2;margin:0;font-size:20px;font-weight:300;letter-spacing:.02em;text-align:right}
.cd-spec{grid-column:1/3;margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.cd>a:hover .cd-addr,.cd>a:focus-visible .cd-addr{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.cd>a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (max-width:640px){
  .two{grid-template-columns:1fr;gap:22px;padding:0 20px 32px}
  .cd-ph{height:calc(50svh - 120px);min-height:170px}
  .cd-meta{padding-top:10px}
  .cd-addr{font-size:16px}
  .cd-price{font-size:17px}
}
/* about stats (t108u): Glenn's pair + Compass's pair inside About; thin rules, modest numerals */
.abs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(48px,5vw,80px);border-top:1px solid var(--line)}
.abs.solo{grid-template-columns:minmax(0,1fr)}
.abs-g{padding:clamp(24px,2.4vw,36px) clamp(20px,3vw,48px) 0 0}
.abs-g+.abs-g{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,48px)}
.abs-k{margin:0 0 clamp(18px,2vw,28px);font-size:11.5px;font-weight:450;color:var(--ink-2)}
.abs-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.abs-n{margin:0;font-variant-numeric:tabular-nums;font-weight:200;font-size:clamp(40px,3.6vw,56px);letter-spacing:-.01em;line-height:1}
.abs-n sup{font-size:.34em;vertical-align:1.4em;margin-left:.06em;font-weight:300;letter-spacing:0}
.abs-t{margin:12px 0 0;font-size:13px;line-height:1.4;color:var(--ink)}
.abs-src{margin:clamp(24px,2.4vw,36px) 0 0;font-size:12px;line-height:1.5;color:var(--ink-2);max-width:70ch}
@media (max-width:640px){
  .abs{grid-template-columns:1fr;margin-top:40px}
  .abs-g{padding:24px 0 0}
  .abs-g+.abs-g{border-left:0;border-top:1px solid var(--line);margin-top:28px;padding-left:0}
  .abs-k{margin-bottom:16px}
  .abs-n{font-size:40px}
  .abs-t{font-size:12.5px;margin-top:10px}
  .abs-src{margin-top:24px}
}
.ab-team{margin:18px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:40ch}
.about-grid .ab-team+.more{margin-top:20px}
/* t122u: longer bio, one step smaller so it balances against the portrait and details */
#about .about-grid .lede{font-size:clamp(19px,1.6vw,24px);line-height:1.45;max-width:38ch}
.ps-more{margin:0;padding:0 clamp(20px,4vw,56px) clamp(40px,5vw,72px)}

/* paper hero shared by C1-C3 */
.hero.h13.pp{background:var(--paper);color:var(--ink);min-height:100vh;min-height:100svh}
.hero.pp::before{display:none}
.hero.pp .rules{z-index:1}.hero.pp .rules i{background:rgba(17,17,17,.09)}
.hero.pp .in{--light:var(--ink);--light-2:var(--ink);--k1:var(--ink);--k2:var(--ink);--k3:var(--ink);--k4:var(--ink)}
.hero.pp .enq,.hero.pp .fh,.hero.pp nav a{color:var(--ink)}
@media (hover:hover) and (min-width:641px){.hero.pp nav a:hover,.hero.pp nav a:focus-visible{background:rgba(17,17,17,.05);-webkit-backdrop-filter:none;backdrop-filter:none}}
.hero.pp .pst{grid-column:1/-1;grid-row:2;position:relative;padding:0;align-self:stretch;justify-self:stretch;width:100%;z-index:1;pointer-events:none;--u:min(1vw,1.5svh);min-height:calc(52 * var(--u))}
.hero.pp .comp{position:absolute;left:50%;top:50%;width:calc(100 * var(--u));height:calc(52 * var(--u));transform:translate(-50%,-50%)}
.hero.pp .pr{position:absolute;margin:0;background:#fff}
.hero.pp .pr picture{position:absolute;inset:0;width:auto;height:auto}
.hero.pp .pr img{display:block;width:100%;height:100%;object-fit:cover}
.hero.pp .pr.ck img{filter:grayscale(100%);object-position:58% 55%}
.hero.pp .h-logo{margin:0;line-height:0;position:absolute}
.hero.pp .h-logo img{display:block;width:100%;height:auto;filter:none}
.hero.pp .h-line{position:absolute;margin:0;text-align:left;color:var(--ink);text-shadow:none;font-size:13px;letter-spacing:.16em}
.hero.pp .sh{box-shadow:0 1px 1px rgba(20,16,10,.10),0 3px 6px rgba(20,16,10,.08),0 14px 28px -8px rgba(20,16,10,.22),0 32px 60px -24px rgba(20,16,10,.25)}
@media (max-width:640px){
  .hero.pp .pst{--u:min(1vw,.43svh);min-height:calc(146 * var(--u))}
  .hero.pp .comp{height:calc(146 * var(--u))}
  .hero.pp .h-line{font-size:11.5px;letter-spacing:.14em;max-width:250px}
}
@media (max-width:380px){.hero.pp .h-line{font-size:11px;letter-spacing:.1em}}
/* C3 magazine spread: clock bleeds off the right edge, stoop print over its corner */
.hero.pp.c3 .comp{left:0;right:0;width:auto;transform:translateY(-50%)}
.hero.pp.c3 .ck{right:0;top:calc(1*var(--u));width:calc(60*var(--u));aspect-ratio:3/2}
.hero.pp.c3 .gp{right:calc(46*var(--u));top:calc(27*var(--u));width:calc(18*var(--u));aspect-ratio:4/5;z-index:2;outline:calc(.8*var(--u)) solid var(--paper)}
.hero.pp.c3 .h-logo{left:calc(10vw + var(--pad));top:calc(5*var(--u));width:calc(19*var(--u))}
.hero.pp.c3 .h-line{left:calc(10vw + var(--pad));top:calc(25*var(--u));width:calc(20*var(--u));line-height:1.7}
@media (max-width:640px){
  /* t100u: phones only, both prints ~25% larger; the clock print starts right under the one line (no fixed gap) */
  .hero.pp .pst{--u:min(1vw,calc((100svh - 244px)/148));--ckt:calc(42*var(--u) + 44px);min-height:calc(var(--ckt) + 106*var(--u))}
  .hero.pp .comp{height:calc(var(--ckt) + 106*var(--u))}
  .hero.pp.c3 .h-logo{left:calc(var(--pad));top:calc(4*var(--u));width:calc(38*var(--u))}
  .hero.pp.c3 .h-line{left:calc(var(--pad));top:calc(42*var(--u));width:auto}
  .hero.pp.c3 .ck{top:var(--ckt);width:min(88vw,calc(92*var(--u)));aspect-ratio:4/3}
  .hero.pp.c3 .ck img{object-position:56% 60%}
  .hero.pp.c3 .gp{right:auto;left:max(var(--pad),calc(100% - min(88vw,calc(92*var(--u))) - 18*var(--u)));top:calc(var(--ckt) + 50*var(--u));width:calc(43*var(--u));outline-width:calc(1.2*var(--u))}
}
/* opt A (t114u/t124u): Compass wordmark set into the tagline, cap-height, on the text baseline */
.hero.pp .h-line .h-co{display:block;white-space:nowrap}
.hero.pp .h-line .h-cm{display:inline-block;height:.88em;width:auto;vertical-align:baseline;margin-right:.3em;filter:none;opacity:1}
/* t126u: D1 'Centered' from compass-opts/apply_hero_d.py, desktop only, at the current print sizes (Glenn: no extra size increase,
   so D1's 4% scale-up is left out; widths/offsets stay 60u / 18u / 46u and only the centering is applied) */
@media (min-width:641px){
  .hero.pp.c3 .comp{--l0:calc(10vw + var(--pad) + 18*var(--u));--cw:calc(64*var(--u));--g:max(calc(3*var(--u)),calc((100% - var(--l0) - var(--cw))/2))}
  .hero.pp.c3 .ck{right:var(--g);top:calc(1*var(--u));width:calc(60*var(--u))}
  .hero.pp.c3 .gp{right:calc(var(--g) + 46*var(--u));top:calc(27*var(--u));width:calc(18*var(--u))}
}
/* t126u: paper-print shadows, layered, low opacity, offset down; the stoop print casts a little onto the clock */
.hero.pp .pr.sh{box-shadow:0 2px 4px rgba(20,16,10,.08),0 18px 40px -8px rgba(20,16,10,.22)}
.hero.pp .pr.gp.sh{box-shadow:0 2px 4px rgba(20,16,10,.10),0 10px 18px -6px rgba(20,16,10,.20),0 24px 44px -10px rgba(20,16,10,.24)}
@media (max-width:640px){
  .hero.pp .pr.sh{box-shadow:0 1px 3px rgba(20,16,10,.07),0 12px 28px -8px rgba(20,16,10,.17)}
  .hero.pp .pr.gp.sh{box-shadow:0 1px 3px rgba(20,16,10,.08),0 8px 14px -6px rgba(20,16,10,.16),0 18px 32px -10px rgba(20,16,10,.19)}
}
@media (min-width:641px) and (hover:hover){
  .hero.pp .pr.sh{transition:translate .3s ease,box-shadow .3s ease}
  .hero.pp .pr.sh:hover{translate:0 -2px;box-shadow:0 3px 6px rgba(20,16,10,.09),0 26px 52px -10px rgba(20,16,10,.27)}
  .hero.pp .pr.gp.sh:hover{box-shadow:0 3px 6px rgba(20,16,10,.11),0 14px 24px -6px rgba(20,16,10,.22),0 32px 56px -12px rgba(20,16,10,.28)}
}
@media (prefers-reduced-motion:reduce){.hero.pp .pr.sh{transition:none}.hero.pp .pr.sh:hover{translate:none}}

/* t139u signature draw-on (sig.js). The real <img> keeps the layout and is the final state; the overlay svg sits exactly on it */
.hero .h-logo .sig{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.hero .h-logo .sig path{fill:#000}
.sig-pre .hero .h-logo img{visibility:hidden;animation:sigSafe 0s 2.6s forwards}  /* JS never ran -> logo still appears */
.sig-run .hero .h-logo img{animation:none;visibility:hidden}
@keyframes sigSafe{to{visibility:visible}}
@media (prefers-reduced-motion:reduce){.sig-pre .hero .h-logo img{visibility:visible;animation:none}.hero .h-logo .sig{display:none}}
.hero.pp .h-line .h-co>picture{display:contents}