/* v64 the details page (/about/). An information sheet in the site's hand: blue ink on warm paper, a Swiss grid of
   numbered sections, Newsreader for display and Inter for reading. src/about.js makes the words part around the cursor
   like water and fall into a pile when the red button is pressed; without it this is a plain, readable page. */
html.page-about { --ab-ink: #1a1fa0; --ab-soft: rgba(26, 31, 160, .68); --ab-hair: rgba(26, 31, 160, .22); --paper: #f4f1e8;
  background: var(--paper); color: var(--ab-ink); scrollbar-gutter: stable; }
.page-about body { background: var(--paper); color: var(--ab-ink); }
.page-about ::selection { background: var(--ab-ink); color: var(--paper); }
/* the bar is solid blue from the start (there is no cover to wait for), mark and menu in view */
.page-about .top::before { opacity: 1; }
.js.page-about .top:not(.past) .home, .js.page-about .top:not(.moved) nav { opacity: 1; visibility: visible; pointer-events: auto; }

.ab { max-width: 1480px; margin: 0 auto; padding: calc(var(--bar) + clamp(56px, 9vw, 150px)) var(--gut) clamp(72px, 9vw, 140px); }
:where(.ab) a { color: inherit; display: inline-block; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
:where(.ab) a:hover { background-size: 0 1px; background-position: 100% 100%; transition: background-size .5s var(--ease); }
:where(.ab) a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
:where(.ab) :is(h1, h2, h3) { margin: 0; font-weight: inherit; }
:where(.ab) :is(p, ul, ol, dl, dd, blockquote) { margin: 0; padding: 0; }
:where(.ab) li { list-style: none; }
.ab-soft { color: var(--ab-soft); }

/* hero */
.ab-hero { padding-bottom: clamp(48px, 7vw, 110px); border-bottom: 1px solid var(--ab-hair); }
.ab-kick { display: block; max-width: 40ch; text-transform: lowercase; margin-bottom: clamp(18px, 2.4vw, 34px); font: 500 13px/1.45 var(--sans); letter-spacing: .06em; color: var(--ab-soft); }
.ab-h1 { display: block; font: 300 clamp(78px, 15.5vw, 236px)/.86 var(--serif); letter-spacing: -.04em; text-transform: lowercase; margin-left: -.04em; }
.ab-lede { max-width: 30ch; margin: clamp(30px, 4vw, 60px) 0 0 auto; font-size: clamp(20px, 1.75vw, 27px); line-height: 1.38; letter-spacing: -.012em; }

/* numbered sections: label column, body column */
.ab-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 22px clamp(28px, 4vw, 72px); padding: clamp(46px, 6vw, 96px) 0; border-bottom: 1px solid var(--ab-hair); }
.ab-n { display: block; margin-bottom: 12px; font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--ab-soft); font-variant-numeric: tabular-nums; }
.ab-label h2 { font: 400 clamp(34px, 3.5vw, 58px)/1 var(--serif); letter-spacing: -.025em; text-transform: lowercase; }
.ab-body { max-width: 780px; font-size: 18px; line-height: 1.62; }
.ab-body > p + p { margin-top: 14px; }
.ab-body h3 { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; color: var(--ab-soft); margin: 30px 0 10px; }
.ab-body h3:first-child { margin-top: 0; }

/* the short version: a spec sheet */
.ab-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 4px 28px; padding: 14px 0; border-top: 1px solid var(--ab-hair); }
.ab-facts > div:last-child { border-bottom: 1px solid var(--ab-hair); }
.ab-facts dt { font-size: 14px; line-height: 1.75; color: var(--ab-soft); }
.ab-facts dd a + a { margin-left: 18px; }

/* showrooms */
.ab-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.ab-rooms li { padding: 18px 0 24px; border-top: 1px solid var(--ab-hair); }
.ab-rooms h3, .ab-cal + h3 { font: 400 clamp(28px, 2.4vw, 36px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ab-ink); text-transform: lowercase; margin: 0 0 12px; }
.ab-rooms p { font-size: 16px; line-height: 1.55; }
.ab-rooms p + p { margin-top: 8px; }
.ab-cta { margin-top: 26px; }
.ab-btn { padding: 12px 24px; border: 1px solid currentColor; border-radius: 999px; background: none; font-size: 15px; transition: background .35s var(--ease), color .35s var(--ease); }
.ab-btn:hover { background: var(--ab-ink); color: var(--paper); }

/* the calendar */
.ab-body > .ab-soft:first-child { margin-bottom: 18px; }
.ab-cal li { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 2px 20px; padding: 11px 0; border-top: 1px solid var(--ab-hair); font-size: 16px; line-height: 1.5; }
.ab-cal li:last-child { border-bottom: 1px solid var(--ab-hair); }
.ab-cal li > span:first-child { font-variant-numeric: tabular-nums; }

/* designers */
.ab-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.ab-brands li { padding: 18px 0 22px; border-top: 1px solid var(--ab-hair); }
/* brand names in the house lower case, as on the home page (the HTML keeps their own case for search and AI) */
.ab-brands h3 { margin: 0 0 6px; font: 400 clamp(28px, 2.4vw, 36px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ab-ink); text-transform: lowercase; }
.ab-brands p { font-size: 16px; line-height: 1.55; }
.ab-brands p + p { margin-top: 6px; }

/* reviews */
.ab-quotes li + li { margin-top: 30px; }
.ab-quotes blockquote { font: italic 300 clamp(23px, 2vw, 30px)/1.32 var(--serif); letter-spacing: -.012em; }
.ab-cite { margin-top: 10px; font-size: 14px; color: var(--ab-soft); }
.ab-credit { margin-top: 34px; font-size: 14px; color: var(--ab-soft); }

/* questions */
.ab-faq > div { padding: 18px 0 20px; border-top: 1px solid var(--ab-hair); }
.ab-faq > div:last-child { border-bottom: 1px solid var(--ab-hair); }
.ab-faq dt { font-weight: 600; font-size: 18px; line-height: 1.45; margin-bottom: 6px; }
.ab-faq dd { color: var(--ab-soft); }

/* say hello */
.ab-links { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 22px; font: 400 clamp(26px, 2.6vw, 40px)/1.2 var(--serif); letter-spacing: -.02em; }

/* the plain footer, on paper; room at its foot so the button never covers a link */
.page-about .foot { color: var(--ab-soft); border-top: 1px solid var(--ab-hair); padding-bottom: 150px; }
.page-about .foot a:hover { color: var(--ab-ink); }

/* src/about.js: every word is its own box (so the line breaks stay the browser's own), every letter inside it too, and
   each word or letter can move without moving anything else. The page reads the original text from .sr-only. */
.ab-w { display: inline-block; white-space: nowrap; }
/* the split copy keeps the plain text's own line breaks (about.js pins them with <br>) and never wraps by itself */
.ab-pinned { white-space: nowrap; }
.ab-g { display: inline-block; }
html.ab-fallen, html.ab-fallen body { overflow: hidden; }
.ab-grab { position: fixed; inset: 0; z-index: 39; touch-action: none; cursor: grab; }
.ab-grab:active { cursor: grabbing; }

/* the big red button */
.ab-bored { position: fixed; z-index: 41; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 116px; height: 116px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 12px 14px rgba(40, 8, 8, .26)) drop-shadow(0 2px 3px rgba(40, 8, 8, .32));
  transition: translate .18s var(--ease), filter .18s var(--ease), scale .12s var(--ease); }
.ab-bored img { display: block; width: 100%; height: 100%; pointer-events: none; }
.ab-bored-t { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ab-bored-a, .ab-bored-b { grid-area: 1 / 1; font: 700 14.5px/1.04 var(--sans); letter-spacing: .01em; text-align: center; text-transform: lowercase;
  text-shadow: 0 1px 0 rgba(110, 0, 0, .55), 0 0 8px rgba(120, 0, 0, .25); transition: opacity .2s; }
.ab-bored-b { opacity: 0; }
.ab-bored[aria-pressed="true"] .ab-bored-a { opacity: 0; }
.ab-bored[aria-pressed="true"] .ab-bored-b { opacity: 1; }
.ab-bored:hover { translate: 0 -2px; filter: drop-shadow(0 16px 16px rgba(40, 8, 8, .24)) drop-shadow(0 3px 4px rgba(40, 8, 8, .3)); }
.ab-bored:active, .ab-bored.is-pressing { translate: 0 2px; scale: .955; filter: drop-shadow(0 5px 6px rgba(40, 8, 8, .3)) drop-shadow(0 1px 1px rgba(40, 8, 8, .4)); }
.ab-bored:focus-visible { outline: 2px solid var(--ab-ink); outline-offset: 6px; }
.ab-bored[disabled] { cursor: progress; }
html:not(.js) .ab-bored { display: none; }

@media (max-width: 900px) {
  .ab-sec { grid-template-columns: minmax(0, 1fr); }
  .ab-lede { margin-left: 0; max-width: 26ch; }
}
@media (max-width: 700px) {
  .ab-body { font-size: 17px; }
  .ab-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ab-rooms, .ab-brands { grid-template-columns: minmax(0, 1fr); }
  .ab-cal li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .ab-cal li > span:last-child { grid-column: 2; }
  .ab-bored { width: 92px; height: 92px; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .ab-bored-a, .ab-bored-b { font-size: 12px; }
  .page-about .foot { padding-bottom: 124px; }
}
@media print { .ab-bored { display: none; } .page-about .top { position: static; } }