/* Iconic Furniture, rebuilt Oct 2026: no jQuery, no third-party scripts.
   Curtain scroll: each panel sticks and the next slides over it (owner chose this, 19 Oct 2026).
   Browser support: position:sticky, clamp(), grid and <picture> WebP are in every
   browser since 2020. svh units (2022) fall back to vh. */

@font-face { font-family: "Lato"; font-weight: 100; font-style: normal; font-display: swap; src: url("../fonts/lato-100.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 300; font-style: italic; font-display: swap; src: url("../fonts/lato-300i.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/lato-700.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #263647; color: #fff; font-family: "Lato", "Helvetica Neue", Arial, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: #fff; }
h1, h2, p { margin: 0; }

/* Panels */
.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 9vh, 110px) clamp(20px, 5vw, 64px);
  background: var(--bg, #263647);
  overflow: hidden;
}

/* Curtain: panels stick to the top and the next one slides over. Only where
   the screen is tall enough; iconic.js also releases any panel taller than the screen. */
@media (min-height: 520px) {
  .panel { position: sticky; top: 0; }
}
.panel.is-tall { position: relative; }

/* Cover */
.cover { --bg: #CE4D27; text-align: center; }
.cover h1 { font-weight: 100; font-size: clamp(54px, 10.5vw, 120px); line-height: 1.02; letter-spacing: .01em; }
.cover h1 span { display: block; font-weight: 400; }
.cover p { font-size: clamp(17px, 1.1vw + 12px, 24px); line-height: 1.35; max-width: 26em; margin: clamp(28px, 5vh, 60px) auto 0; }
.scroll-cue { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 10px; }
.scroll-cue img { width: 88px; animation: cue-bounce 2.4s ease-in-out 1s 3; }
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Chairs */
.chair-inner {
  width: 100%;
  max-width: 1024px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: clamp(24px, 4vh, 40px);
  text-align: center;
}
.chair-img img { width: auto; max-width: min(78vw, 360px); max-height: 46vh; max-height: 46svh; }
.wide .chair-img img { max-width: min(86vw, 440px); }
.chair-text { max-width: 34em; }
.chair h2 { font-weight: 700; font-size: clamp(25px, 1.4vw + 18px, 36px); line-height: 1.15; letter-spacing: .02em; margin-bottom: .55em; }
.chair p { font-size: clamp(17px, .9vw + 12px, 24px); line-height: 1.38; }
.chair .credit { font-style: italic; font-size: clamp(14px, .3vw + 12px, 16px); margin-top: 1.2em; }

@media (min-width: 900px) {
  .chair-inner { grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 6vw, 110px); }
  .chair-img img { max-width: 100%; max-height: 72vh; max-height: 72svh; }
  .wide .chair-img img { max-width: 100%; }
  .img-left .chair-img { justify-self: end; }
  .img-left .chair-text { justify-self: start; text-align: left; }
  .img-right .chair-img { order: 2; justify-self: start; }
  .img-right .chair-text { order: 1; justify-self: end; text-align: right; }
  .chair-text { max-width: 450px; }
  .wide .chair-inner { grid-template-columns: 2fr 3fr; }
}

/* About LLI */
.about { --bg: #263647; text-align: center; }
.about-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 890px; }
.about-logo { display: block; padding-bottom: 28px; border-bottom: 1px solid #fff; }
.about-logo img { width: 72px; }
.about p { font-size: clamp(17px, .9vw + 12px, 24px); line-height: 1.38; }
@media (min-width: 768px) {
  .about-inner { flex-direction: row; text-align: left; gap: 0; }
  .about-logo { flex: none; padding: 110px 64px 110px 0; border-bottom: 0; border-right: 1px solid #fff; }
  .about-logo img { width: 91px; }
  .about-inner p { padding-left: 64px; }
}

/* Share: fixed counts, plain links, nothing loaded from other sites */
.share { margin-top: clamp(40px, 8vh, 80px); }
.share-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.share-links a { display: inline-block; font-size: 15px; font-weight: 400; letter-spacing: .04em; text-decoration: none; border: 1px solid rgba(255,255,255,.7); padding: 10px 16px; min-height: 44px; line-height: 22px; transition: background-color .2s, color .2s; }
.share-links a:hover, .share-links a:focus-visible { background: #fff; color: #263647; }
.share-links .count { font-weight: 300; opacity: .8; margin-left: 4px; }

a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue img { animation: none; }
}