@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-wght.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-wght.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* spacing scale: 4 8 16 24 40 64 104 */
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:104px;
  --ink:#0d0d0f;--ink-2:#1c1d21;--white:#ffffff;--chalk:#f4f4f2;--steel:#55595f;--line:#c9cbce;--line-dk:#3a3c41;
  --cognac:#8a4a1f;--cognac-lt:#d9a476;--grey-lt:#c4c6ca;
  --display:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --text:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55}
h1,h2,h3{margin:0;font-weight:500}
p{margin:0}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:var(--s3);top:-80px;min-height:44px;display:inline-flex;align-items:center;background:var(--white);color:var(--ink);padding:var(--s2) var(--s3);z-index:10}
.skip:focus{top:var(--s2)}
:focus-visible{outline:3px solid var(--cognac);outline-offset:3px}
.hero :focus-visible,.tux :focus-visible,.foot :focus-visible{outline-color:var(--cognac-lt)}

/* bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s4);background:var(--ink);color:var(--white);border-bottom:1px solid var(--line-dk)}
.wordmark{display:flex;align-items:baseline;gap:var(--s2);text-decoration:none;min-height:44px;align-content:center;flex-wrap:wrap;padding-top:var(--s2)}
.wm-name{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:.06em}
.wm-sub{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-lt);font-weight:500}
.bar-call{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:0 var(--s3);border:1px solid var(--white);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.bar-call:hover{background:var(--white);color:var(--ink)}

/* hero */
.hero{background:var(--ink);color:var(--white)}
.hero-copy{padding:var(--s6) var(--s4) var(--s5)}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(54px,15vw,132px);line-height:.92;letter-spacing:-.02em;max-width:9ch}
.hero-lede{margin-top:var(--s4);font-size:19px;line-height:1.5;color:#e4e5e7;max-width:32ch}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.btn{display:inline-flex;flex-wrap:wrap;column-gap:.4em;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:var(--s3) var(--s4);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid currentColor;transition:background-color .15s,color .15s}
.btn-light{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-light:hover{background:var(--cognac-lt);border-color:var(--cognac-lt)}
.btn-ghost{background:transparent;color:var(--white)}
.btn-ghost:hover{background:var(--white);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-dark:hover{background:var(--cognac);border-color:var(--cognac)}
.ruler{height:14px;margin-top:var(--s5);background:url(../img/ruler.svg) repeat-x left top}
.ruler-light{background-image:url(../img/ruler-light.svg);opacity:1}
.hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s4) 0 0}
.hero-facts dt{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cognac-lt);font-weight:600}
.hero-facts dd{margin:var(--s2) 0 0;font-size:15px;line-height:1.5;color:#e4e5e7}

/* frames */
.frame{margin:0}
.frame-box{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:var(--s3);background:var(--chalk);border:1px solid var(--line)}
.frame-box span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);font-weight:600;padding:var(--s2);border-top:1px solid var(--steel)}
.frame figcaption{margin-top:var(--s2);font-size:14px;color:var(--steel)}
.frame-hero{padding:0 var(--s4) var(--s5)}
.frame-hero .frame-box{aspect-ratio:16/10;background:var(--ink-2);border-color:var(--line-dk)}
.frame-hero .frame-box span{color:var(--grey-lt);border-color:var(--grey-lt)}
.frame-tall{aspect-ratio:4/3}

/* racks */
.racks{max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s4)}
.sec-head{margin-bottom:var(--s5)}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--cognac)}
.eyebrow-light{color:var(--cognac-lt)}
h2{font-family:var(--display);font-weight:500;font-size:clamp(42px,11vw,84px);line-height:.98;letter-spacing:-.015em;margin-top:var(--s2)}
.depts{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.depts li{display:flex;align-items:baseline;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.tag{flex:0 0 auto;width:64px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);font-weight:600;font-variant-numeric:tabular-nums}
.dept{font-family:var(--display);font-size:clamp(32px,8.5vw,56px);line-height:1.05;font-weight:500}
.frames{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.frames .frame-box{aspect-ratio:3/4;padding:var(--s2)}
.frames .frame-box span{font-size:11px;letter-spacing:.14em}

/* tux */
.tux{background:var(--ink);color:var(--white);padding:var(--s6) var(--s4)}
.tux > *{max-width:820px;margin-left:auto;margin-right:auto}
.tux-lede{margin-top:var(--s4);font-size:19px;line-height:1.55;color:#e4e5e7}
.slot{margin:var(--s4) 0;font-size:16px;color:var(--steel);border:1px dashed var(--steel);padding:var(--s3)}
.slot-dark{color:var(--grey-lt);border-color:#8d9096}
.tux .btn{display:flex;width:100%}
.tux .ruler{margin-top:var(--s5)}
.slot-inline{color:var(--steel);font-weight:500}

/* fit */
.fit{max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s4);display:grid;gap:var(--s5)}

/* visit */
.visit{background:var(--chalk);border-top:1px solid var(--line);padding:var(--s6) var(--s4)}
.visit > h2{max-width:var(--wrap);margin:0 auto var(--s5)}
.visit-grid{max-width:var(--wrap);margin:0 auto;display:grid;gap:var(--s5)}
.visit h3{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--cognac);margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:2px solid var(--ink)}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.textlink:hover{color:var(--cognac);text-decoration-thickness:2px}
.textlink.big{font-family:var(--display);font-size:34px;font-weight:600;font-variant-numeric:lining-nums}
.hours{border-collapse:collapse;width:100%;font-size:16px}
.hours th,.hours td{text-align:left;padding:var(--s2) 0;border-bottom:1px solid var(--line);font-weight:400;vertical-align:top}
.hours td{text-align:right;font-weight:600;padding-left:var(--s3)}

/* footer */
.foot{background:var(--ink);color:var(--white);padding:var(--s5) var(--s4);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.foot-name{font-family:var(--display);font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.foot-demo{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-lt)}

@media (min-width:760px){
  .bar{padding:var(--s3) var(--s5)}
  .hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
  .hero-copy{padding:var(--s7) var(--s5) var(--s6)}
  .frame-hero{padding:var(--s6) var(--s5) var(--s6) 0;display:flex}
  .frame-hero .frame-box{aspect-ratio:auto;flex:1;min-height:420px}
  .racks{padding:var(--s7) var(--s5)}
  .depts{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6)}
  .frames{gap:var(--s5)}
  .frames .frame-box{aspect-ratio:4/3;padding:var(--s3)}
  .frames .frame-box span{font-size:12px;letter-spacing:.2em}
  .tux{padding:var(--s7) var(--s5)}
  .tux .btn{display:inline-flex;width:auto}
  .fit{grid-template-columns:1fr 1fr;align-items:center;padding:var(--s7) var(--s5)}
  .frame-tall{aspect-ratio:1/1}
  .visit{padding:var(--s7) var(--s5)}
  .visit-grid{grid-template-columns:1fr 1.2fr 1fr;column-gap:var(--s6)}
  .foot{padding:var(--s5)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.tux > .slot{margin:var(--s4) auto}
@media (min-width:760px){.tux > .btn{display:flex;width:fit-content;margin-left:calc((100% - min(820px,100%))/2);margin-right:0}}