/* ChairLines: white pages in the style of the printed sheets (Sillas/ChairLines.pdf). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: #1d1d1b; line-height: 1.4;
  font-family: "Jost", "Futura", "Century Gothic", sans-serif; font-weight: 300;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
h1 { font-weight: 600; }

/* Home */
.index { max-width: 1120px; margin: 0 auto; padding: 48px clamp(20px, 5vw, 48px) 64px; }
.index-head { margin-bottom: 48px; }
.index-head h1 { font-size: clamp(40px, 8vw, 64px); line-height: 1; letter-spacing: -0.01em; margin: 0 0 16px; }
.lede { font-size: clamp(20px, 3.4vw, 26px); line-height: 1.25; margin: 0; }
.credit { font-size: 14px; margin: 16px 0 0; }
.credit a { text-decoration: none; border-bottom: 1px solid currentColor; }

.chairs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 36px 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
}
.chairs a { display: block; text-decoration: none; }
.chairs img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; margin-bottom: 12px; transition: transform .2s; }
.chairs a:hover img { transform: translateY(-3px); }
.chairs .row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.chairs .row .dot { width: 10px; height: 10px; margin: 0; }
.chairs .n { font-size: 15px; font-weight: 600; }
.chairs .t { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.chairs .d { display: block; font-size: 15px; font-style: italic; }
.chairs .y { display: block; font-size: 15px; }

/* Home, desktop: title column on the left, chairs on the right. */
@media (min-width: 960px) {
  .index { max-width: 1360px; display: grid; grid-template-columns: 290px minmax(0, 1fr); column-gap: 64px; align-items: start; padding-top: 56px; }
  .index-head { position: sticky; top: 56px; margin: 0; }
  .index-head h1 { font-size: 56px; }
  .lede { font-size: 21px; }
  .chairs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 48px 28px; }
}

/* Chair page. Mobile first: one column, like the printed ChairLines sheet. */
.card { max-width: 620px; margin: 0 auto; padding: 28px 20px 40px; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dot { width: 22px; height: 22px; border-radius: 50%; background: var(--dot); margin-top: 6px; }
.id { text-align: right; line-height: 1.15; }
.num { font-size: 40px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.spec { font-size: 12px; font-weight: 300; margin: 2px 0 0; }

.stage { margin: 8px 0 24px; }
.card model-viewer {
  display: block; width: 100%; height: min(92vw, 520px);
  background: #fff; --poster-color: #fff; cursor: grab;
}
.card model-viewer:active { cursor: grabbing; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.progress div { height: 100%; width: 0; background: var(--dot); }
.hint { text-align: center; font-size: 12px; color: #8a8883; margin: 6px 0 0; }

.ident { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ident h1 { font-size: clamp(28px, 7vw, 38px); line-height: 1.1; margin: 0 0 4px; letter-spacing: -0.01em; }
.designer, .year { font-size: clamp(22px, 5.6vw, 30px); line-height: 1.2; margin: 0; }
.designer { font-style: italic; }
.photo { width: clamp(100px, 30%, 170px); height: auto; aspect-ratio: 1; object-fit: contain; flex: none; }

.maker { font-size: 17px; margin: 28px 0 0; padding-bottom: 10px; border-bottom: 1px solid #1d1d1b; }
.desc { font-size: 15px; line-height: 1.45; text-align: justify; hyphens: auto; margin: 12px 0 0; }

/* Download: a plain black pill with an arrow, unmistakably a button. */
.download {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%;
  margin-top: 28px; padding: 14px 24px; border-radius: 999px;
  background: #1d1d1b; color: #fff; text-decoration: none; font-size: 17px; font-weight: 400; line-height: 1.2;
  transition: background-color .15s;
}
.download:hover { background: var(--dot); }
.download:focus-visible { outline: 2px solid var(--dot); outline-offset: 3px; }
.download svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.download small { display: block; font-size: 12px; font-weight: 300; opacity: .8; }

.pager { display: flex; justify-content: space-between; margin-top: 40px; font-size: 14px; }
.pager a { text-decoration: none; padding: 6px 0; }
.pager a:hover { color: var(--dot); }

/* Chair page, desktop: model large on the left, the sheet's text on the right. */
@media (min-width: 960px) {
  .card {
    max-width: 1240px; padding: 36px 48px 56px;
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); column-gap: 64px;
    grid-template-areas: "top top" "stage info"; align-items: start;
  }
  .card-top { grid-area: top; }
  .num { font-size: 48px; }
  .stage { grid-area: stage; position: sticky; top: 24px; margin: 0; }
  .card model-viewer { height: min(calc(100vh - 190px), 720px); min-height: 440px; }
  .info { grid-area: info; padding-top: 24px; }
  .photo { width: 150px; }
  .download { display: inline-flex; width: auto; padding: 14px 32px; }
}