/* Pergo — The Floor That Became a Category · Super Arbor brand exhibit */
@font-face { font-family: "Fraunces"; src: url("../assets/arbor-fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: optional; }
@font-face { font-family: "Fraunces"; src: url("../assets/arbor-fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces Hero"; src: url("../assets/arbor-fraunces-hero.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Hero"; src: url("../assets/arbor-fraunces-hero-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../assets/arbor-mulish.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: optional; }

:root {
  --chalk: #f8f7f3;
  --paper: #ece8df;
  --ink: #151719;
  --ink-soft: #4e5558;
  --blue: #0b5fa8;
  --blue-deep: #073c70;
  --blue-pale: #c9deec;
  --oak: #b58c5d;
  --night: #0a1014;
  --line: #d6d3cb;
  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Mulish", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--chalk); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-feature-settings: "ss01", "ss02"; text-wrap: balance; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #4aa6eb; outline-offset: 3px; }

.smallcaps { font-size: 12px; font-weight: 800; letter-spacing: 0.145em; text-transform: uppercase; }
.serif-i { font-family: var(--serif); font-style: italic; }
.figs { font-variant-numeric: lining-nums tabular-nums; }
.kicker { display: block; margin-bottom: 12px; color: var(--blue); }
.kicker--light { color: #81c6f5; }
.room-title { color: var(--ink); font-size: clamp(42px, 6vw, 78px); font-weight: 560; font-variation-settings: "opsz" 144; line-height: .96; letter-spacing: -.025em; }
.room-title--light { color: var(--chalk); }
.room-sub { max-width: 58ch; margin-top: 15px; color: #626967; line-height: 1.55; }
.room-sub--light { color: rgba(248,247,243,.66); }
.section-head { width: min(1280px, 100%); margin-inline: auto; padding: 0 40px 45px; }
.section-head--center { text-align: center; }
.section-head--center .room-sub { margin-inline: auto; }
.section-head--dark { color: var(--chalk); }
.plate { display: inline-block; margin-bottom: 14px; padding: 5px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.55); color: #686e70; }
.plate--dark { border-color: rgba(248,247,243,.25); background: rgba(248,247,243,.07); color: rgba(248,247,243,.72); }
.line { display: inline-block; width: 56px; height: 1px; background: currentColor; }

.rail { position: fixed; z-index: 90; inset: 0 auto 0 0; width: 3px; background: rgba(11,95,168,.09); }
.rail__fill { width: 100%; height: 0; background: var(--blue); }

/* Prologue */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: var(--night); color: var(--chalk); }
.hero__image { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; filter: saturate(.8) contrast(1.06) brightness(.76); scale: 1.04; }
.hero__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,12,15,.08), rgba(7,12,15,.06) 40%, rgba(7,12,15,.88)), linear-gradient(90deg, rgba(7,12,15,.68), transparent 62%); }
.hero__stack { width: min(1280px,100%); margin-inline: auto; padding: 0 40px 96px; pointer-events: none; }
.hero__eyebrow { margin-bottom: 12px; color: var(--blue-pale); }
.hero__title { margin-left: -.05em; color: var(--chalk); font-family: "Fraunces Hero", ui-serif, Georgia, serif; font-size: clamp(96px, 19vw, 285px); font-weight: 620; font-variation-settings: "opsz" 144; line-height: .8; letter-spacing: -.045em; text-shadow: 0 14px 70px rgba(0,0,0,.38); }
.hero__tagline { margin-top: 22px; color: rgba(248,247,243,.96); font-family: "Fraunces Hero", ui-serif, Georgia, serif; font-size: clamp(22px,2.6vw,31px); }
.hero__rule { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-top: 34px; padding-top: 14px; border-top: 1px solid rgba(248,247,243,.24); color: rgba(248,247,243,.65); }
.hero__cue { position: absolute; z-index: 2; right: 40px; bottom: 40px; display: flex; align-items: center; gap: 12px; color: rgba(248,247,243,.68); }
.hero__credit { position: absolute; z-index: 2; left: 40px; bottom: 14px; max-width: 70ch; font-size: 11px; line-height: 1.4; color: rgba(248,247,243,.48); }
.hero__credit a { color: rgba(248,247,243,.72); }

/* Record */
.record { padding: 140px 0 50px; background: var(--chalk); }
.record__body { width: min(1280px,100%); margin-inline: auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.45fr); gap: 0 64px; }
.record__year-col { position: relative; }
.record__year { position: sticky; top: 25vh; color: var(--blue); font-family: var(--serif); font-size: clamp(96px,13vw,200px); font-weight: 580; font-variation-settings: "opsz" 144; line-height: 1; letter-spacing: -.035em; }
.record__list { list-style: none; margin: 0; padding: 0; }
.record__exhibit { padding: 12vh 0; border-bottom: 1px solid var(--line); }
.record__exhibit:last-child { border-bottom: 0; }
.record__figure { max-width: 520px; margin: 0 0 30px; overflow: hidden; box-shadow: 7px 7px 0 #0a1620; rotate: -1deg; }
.record__figure--wide { max-width: 620px; }
.record__figure img { width: 100%; filter: saturate(.84) contrast(1.04); }
.placard h3 { margin-bottom: 14px; font-size: clamp(27px,3vw,36px); font-weight: 580; line-height: 1.08; }
.placard p { max-width: 57ch; color: var(--ink-soft); }

/* Living floor */
.living { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: radial-gradient(110% 100% at 55% 0,#253640 0,var(--night) 64%,#050809 100%); color: var(--chalk); }
.living::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,8,9,.2), transparent 40%, rgba(5,8,9,.82)), linear-gradient(90deg, rgba(5,8,9,.62), transparent 44%); }
.living__world { position: absolute; z-index: 0; inset: 0; isolation: isolate; }
.living__gl { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.living__poster { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; pointer-events: none; transition: opacity .7s ease; }
.living__poster.is-off { opacity: 0; }
.living__intro { position: absolute; z-index: 2; left: 40px; top: 52px; width: min(530px,calc(100vw - 80px)); pointer-events: none; transition: opacity .45s ease, transform .65s ease; }
.living.is-inspecting .living__intro { opacity: .16; transform: translateY(14px); }
.living__eyebrow { margin-bottom: 10px; color: var(--blue-pale); }
.living__title { max-width: 6ch; color: var(--chalk); font-size: clamp(52px,7vw,106px); font-weight: 560; font-variation-settings: "opsz" 144; line-height: .9; letter-spacing: -.03em; }
.living__lede { max-width: 43ch; margin-top: 17px; color: rgba(248,247,243,.7); font-size: 15px; line-height: 1.55; }
.living__cue { position: absolute; z-index: 2; left: 40px; bottom: 32px; display: flex; align-items: center; gap: 12px; color: rgba(248,247,243,.56); }

.bench { position: absolute; z-index: 3; right: 40px; bottom: 34px; display: grid; gap: 10px; width: min(400px,calc(100vw - 80px)); padding: 14px 16px; border: 1px solid rgba(248,247,243,.2); background: rgba(5,8,9,.64); backdrop-filter: blur(9px); }
.bench__range { display: grid; gap: 5px; color: rgba(248,247,243,.7); }
.bench__range input { width: 100%; accent-color: var(--blue); }
.bench__row { display: flex; gap: 7px; }
.bench__btn { min-height: 40px; padding: 8px 13px; border: 1px solid rgba(248,247,243,.26); background: transparent; color: rgba(248,247,243,.83); font: 800 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease,border-color .15s ease; }
.bench__row .bench__btn { flex: 1; }
.bench__btn:hover { border-color: rgba(248,247,243,.65); }
.bench__btn.is-on,.bench__btn[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: white; }
.swatches { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.swatch { min-width: 0; padding: 0; border: 1px solid rgba(248,247,243,.22); background: rgba(255,255,255,.04); color: rgba(248,247,243,.76); cursor: pointer; }
.swatch img { width: 100%; height: 38px; object-fit: cover; filter: saturate(.9); }
.swatch span { display: block; padding: 5px 2px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch.is-on,.swatch[aria-pressed="true"] { border-color: #62b7ef; box-shadow: inset 0 -2px 0 #62b7ef; }
.factcard { position: absolute; z-index: 4; right: 40px; top: 52px; width: min(390px,calc(100vw - 60px)); padding: 20px 42px 18px 20px; border-left: 3px solid var(--blue); background: var(--chalk); color: var(--ink); box-shadow: 0 28px 65px rgba(0,0,0,.48); }
.factcard__k { margin-bottom: 8px; color: var(--blue); }
.factcard p:not(.factcard__k,.factcard__src) { font-size: 14px; line-height: 1.55; }
.factcard__src { margin-top: 10px; color: #737878; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.factcard__src a { color: var(--blue); }
.factcard__close { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink-soft); font-size: 22px; cursor: pointer; }

/* Plank */
.plank { padding: 130px 0 0; background: linear-gradient(180deg,#0b1217,#080d10); color: var(--chalk); }
.plank__pin { width: min(1440px,100%); min-height: 100vh; margin-inline: auto; padding: 24px 40px 40px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.72fr); gap: 30px; align-items: center; }
.plank__stage { position: relative; height: min(72vh,700px); }
.plank__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.spots { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.spot { position: absolute; translate: -50% -50%; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(248,247,243,.7); border-radius: 50%; background: rgba(5,8,9,.64); color: var(--chalk); font: 800 11px/1 var(--sans); pointer-events: auto; cursor: pointer; transition: background-color .15s ease,border-color .15s ease; }
.spot::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(248,247,243,.25); border-radius: 50%; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.16); opacity: .3; } }
.spot:hover,.spot:focus-visible,.spot[aria-expanded="true"] { border-color: var(--blue); background: var(--blue); }
.spot.is-hidden { display: none; }
.plank__side { display: grid; gap: 14px; align-content: start; }
.plank__controls { display: flex; flex-wrap: wrap; gap: 7px; }
.plank__placard { max-height: 60vh; overflow: auto; padding: 24px; border-left: 3px solid var(--blue); background: var(--chalk); color: var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.42); }
.plank__placard h3 { margin: 2px 0 10px; font-size: 25px; line-height: 1.12; }
.plank__placard p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.plank__placard .source { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: #737879; font-size: 11px; overflow-wrap: anywhere; }
.plank__placard .source a { color: var(--blue); }

/* Material */
.material { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #20170f; color: var(--chalk); }
.material__image { position: absolute; z-index: -3; inset: -12% 0; margin: 0; }
.material__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.08) brightness(.54); transition: opacity .25s ease; }
.material::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(8,9,8,.86),rgba(8,9,8,.24) 68%,rgba(8,9,8,.55)); }
.material__light { position: absolute; z-index: -2; top: -10%; bottom: -10%; left: 52%; width: 18%; rotate: 9deg; background: rgba(255,234,194,.2); filter: blur(34px); animation: rake 8s ease-in-out infinite alternate; }
@keyframes rake { to { translate: 20vw 0; opacity: .45; } }
.material__copy { width: min(1280px,100%); margin-inline: auto; padding: 120px 40px; }
.material__copy .room-title { max-width: 10ch; }
.material__copy > p:not(.kicker) { max-width: 57ch; margin-top: 28px; padding: 20px 24px; border-left: 2px solid #65b4ea; background: rgba(5,8,9,.56); color: rgba(248,247,243,.88); backdrop-filter: blur(5px); }
.material__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.material__tab { min-height: 44px; padding: 8px 14px; border: 1px solid rgba(248,247,243,.32); background: rgba(5,8,9,.4); color: var(--chalk); font-size: 12px; font-weight: 800; cursor: pointer; }
.material__tab.is-on,.material__tab[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); }

/* Real life */
.real { padding: 140px 0 120px; background: var(--paper); }
.real__frame { width: min(1340px,100%); margin: 0 auto; padding: 0 40px; }
.real__frame img { width: 100%; max-height: 760px; object-fit: cover; box-shadow: 8px 8px 0 #0a1620; }
.real__frame figcaption { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 20px; align-items: start; padding: 20px 0 0; color: var(--ink-soft); font-size: 15px; }
.real__claims { width: min(1280px,100%); margin: 100px auto 0; padding: 0 40px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #cfcac0; border: 1px solid #cfcac0; }
.real__claims article { min-height: 330px; padding: 28px; background: var(--chalk); }
.real__big { margin-bottom: 38px; color: var(--blue); font-family: var(--serif); font-size: clamp(54px,6vw,86px); font-weight: 560; line-height: .9; }
.real__claims h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.15; }
.real__claims article > p:last-child { color: var(--ink-soft); font-size: 15px; }

/* Measure */
.measure { padding: 140px 0 120px; background: var(--chalk); }
.measure__wall { width: min(1180px,calc(100% - 80px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.8fr); border: 1px solid var(--line); box-shadow: 10px 10px 0 #0a1620; }
.measure__form { padding: 34px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 24px; background: white; }
.measure__form label { display: grid; gap: 8px; color: var(--ink-soft); }
.measure__field { display: flex; align-items: center; border-bottom: 2px solid var(--ink); }
.measure__field input { min-width: 0; width: 100%; border: 0; background: transparent; color: var(--ink); font-family: var(--serif); font-size: 54px; font-weight: 560; line-height: 1.1; }
.measure__field span { color: #737878; font-weight: 800; }
.measure__form select { width: 100%; min-height: 58px; padding: 0 12px; border: 1px solid var(--line); background: var(--chalk); color: var(--ink); font-weight: 700; }
.measure__result { padding: 34px; background: var(--blue-deep); color: white; }
.measure__cases { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 28px; }
.measure__cases strong { font-family: var(--serif); font-size: clamp(82px,9vw,130px); font-weight: 580; line-height: .8; }
.measure__cases span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.measure__result dl { margin: 0; display: grid; gap: 0; }
.measure__result dl div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.2); }
.measure__result dt { color: rgba(255,255,255,.68); }
.measure__result dd { margin: 0; font-weight: 800; text-align: right; }
.measure__note { margin-top: 24px; color: rgba(255,255,255,.62); font-size: 11.5px; line-height: 1.5; }

/* Gallery */
.gallery { padding: 140px 0 90px; background: var(--paper); }
.gallery__row { width: min(1380px,100%); margin: 0 auto; padding: 0 40px; list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; align-items: end; }
.piece a { display: grid; gap: 6px; text-decoration: none; }
.piece__slab { position: relative; display: block; height: 360px; margin-bottom: 18px; overflow: hidden; box-shadow: 0 25px 35px rgba(10,15,18,.22), 7px 7px 0 #0a1620; transform: perspective(900px) rotateX(2deg); transition: transform .4s cubic-bezier(.2,.8,.3,1); }
.piece__slab img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s ease; }
.piece a:hover .piece__slab { transform: perspective(900px) rotateX(2deg) translateY(-8px); }
.piece a:hover .piece__slab img { scale: 1.04; }
.piece__line { color: var(--blue); }
.piece__line--plain { color: #805f35; }
.piece__name { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.18; }
.piece__price { font-size: 19px; font-weight: 900; }
.piece__price small { color: #6c7271; font-size: 12px; }
.piece__spec { color: #6c7271; font-size: 12px; line-height: 1.45; }
.gallery__close { width: min(920px,100%); margin: 130px auto 0; padding: 0 40px; text-align: center; }
.gallery__closing { font-family: var(--serif); font-size: clamp(36px,5vw,58px); font-weight: 560; line-height: 1.03; }
.gallery__close > p:nth-child(2) { max-width: 54ch; margin: 20px auto 34px; color: var(--ink-soft); }
.gallery__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.cta { min-height: 56px; padding: 0 28px; display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: white; font-weight: 900; text-decoration: none; box-shadow: 4px 4px 0 #0a1620; }
.cta:hover { background: var(--blue-deep); }
.cta--ghost { border: 1px solid var(--ink); background: transparent; color: var(--ink); box-shadow: none; }
.cta--ghost:hover { background: var(--ink); color: white; }
.citations { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--line); text-align: left; }
.citations p { margin-bottom: 8px; color: #5f6664; font-size: 12px; line-height: 1.55; }

@media (max-width: 1023px) {
  .record__body { grid-template-columns: 1fr; }
  .record__year-col { display: none; }
  .living { min-height: 100svh; }
  .plank__pin { grid-template-columns: 1fr; min-height: 0; padding-bottom: 80px; }
  .plank__stage { height: 56vh; min-height: 480px; }
  .real__claims { grid-template-columns: 1fr; max-width: 700px; }
  .real__claims article { min-height: 0; }
  .measure__wall { grid-template-columns: 1fr; max-width: 760px; }
  .gallery__row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { min-height: 100svh; }
  .hero__image img { object-position: 57% 50%; }
  .hero__stack { padding: 0 22px 88px; }
  .hero__title { font-size: clamp(74px,28vw,108px); }
  .hero__tagline { max-width: 15em; margin-top: 16px; font-size: 20px; }
  .hero__rule { margin-top: 22px; gap: 5px; font-size: 10px; }
  .hero__cue { display: none; }
  .hero__credit { left: 22px; right: 22px; bottom: 10px; font-size: 9.5px; }
  .section-head,.record__body,.material__copy,.real__frame,.real__claims,.gallery__row,.gallery__close { padding-left: 22px; padding-right: 22px; }
  .record { padding-top: 100px; }
  .record__exhibit { padding: 8vh 0; }
  .living { min-height: 126svh; }
  .living::after { background: linear-gradient(180deg,rgba(5,8,9,.18),transparent 42%,rgba(5,8,9,.86)); }
  .living__intro { top: auto; left: 22px; bottom: 22px; width: calc(100vw - 44px); }
  .living__title { font-size: clamp(46px,16vw,68px); }
  .living__lede { max-width: 32ch; margin-top: 11px; font-size: 13px; }
  .living__cue { display: none; }
  .bench { top: 14px; right: 16px; bottom: auto; left: 16px; width: auto; padding: 10px 12px; }
  .bench__btn { min-height: 44px; }
  .swatch img { height: 32px; }
  .factcard { top: 274px; right: 16px; width: calc(100vw - 32px); }
  .plank__pin { padding-left: 22px; padding-right: 22px; }
  .plank__stage { height: 52svh; min-height: 390px; }
  .plank__placard { max-height: none; overflow: visible; }
  .material { min-height: 105svh; }
  .material__tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .real__frame figcaption { grid-template-columns: 1fr; }
  .measure__wall { width: calc(100% - 44px); }
  .measure__form { grid-template-columns: 1fr; padding: 24px; }
  .measure__result { padding: 26px 24px; }
  .gallery__row { grid-template-columns: 1fr; }
  .piece__slab { height: 440px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .spot::after { animation: none; }
}