/* PINE — Nordic functionalist catalogue.
   Aluminium ground, ink type and rules, photo plates; white marks the current choice;
   the only colour is filament colour. One typeface, three sizes (s / m / l) plus the
   PINE figure on the home page. */

:root {
  --alu: #C8CACD;
  --plate: #E5E5E9;
  --ink: #0E0F11;
  --white: #FFFFFF;

  --s: 12px;
  --m: 17px;
  --l: clamp(32px, 3.3vw, 56px);

  --gutter: 24px;
  --margin: clamp(16px, 2.8vw, 40px);
  --top: 56px;
  --rule: 1px solid var(--ink);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--alu); -webkit-text-size-adjust: 100%; }
body {
  background: var(--alu);
  color: var(--ink);
  font: 400 var(--m)/1.42 'Schibsted Grotesk', system-ui, sans-serif;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { padding-inline: max(var(--margin), calc((100vw - 1680px) / 2)); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.s { font-size: var(--s); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.l { font-size: var(--l); line-height: 1.04; letter-spacing: -0.028em; font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.strong { font-weight: 600; }
.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text a, .note a, .none a, .foot a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Away line: shown on every page when the shop is paused */
.away { background: var(--ink); color: var(--alu); }
.away .wrap { padding-block: 10px; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 10; background: var(--alu); border-bottom: var(--rule); }
.top .grid { height: var(--top); align-items: center; }
.mark { grid-column: 1 / span 2; font-weight: 700; letter-spacing: 0.06em; }
/* Search: a ruled field with its label inside, the one box in the top bar */
.find { grid-column: 3 / span 6; display: flex; align-items: center; gap: 14px; height: 38px;
  border: var(--rule); padding: 0 12px; background: var(--plate); cursor: text; }
.find:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.find label { white-space: nowrap; cursor: text; }
.find-short { display: none; }
.find input {
  flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; border-radius: 0;
  font-weight: 600; outline: none; -webkit-appearance: none; appearance: none;
}
.find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nav { grid-column: 9 / span 4; justify-self: end; display: flex; gap: 32px; }
.nav a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Home: the figure */
.masthead { padding-top: 20px; overflow: hidden; container-type: inline-size; }
/* Ink of "PINE" in Schibsted Grotesk 700 at -0.045em tracking is 2.229em wide and
   starts 0.0694em right of the origin: size and shift it to sit exactly on the margins. */
.figure {
  font-weight: 700;
  font-size: calc(100cqi / 2.229);
  line-height: 0.74;
  letter-spacing: -0.045em;
  margin-left: -0.0694em;
  white-space: nowrap;
  padding-top: 0.06em;
}

.intro { padding-block: 40px 96px; border-bottom: var(--rule); }
.intro h1 { grid-column: 1 / span 8; max-width: 22em; }
.intro .facts { grid-column: 10 / span 3; align-self: end; }

.facts div { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 10px 12px; border-top: var(--rule); }
.facts div:last-child { border-bottom: var(--rule); }
.facts dt { margin-bottom: 4px; }

/* Catalogue */
.catalogue { padding-top: 24px; padding-bottom: 120px; }
.index { grid-column: 1 / span 3; position: sticky; top: calc(var(--top) + 24px); align-self: start;
  max-height: calc(100vh - var(--top) - 48px); overflow-y: auto; scrollbar-width: none; }
.index::-webkit-scrollbar { display: none; }
.index > .s { padding-bottom: 10px; }
.index li button {
  width: 100%; display: flex; justify-content: space-between; gap: 16px; text-align: left;
  padding: 2px 8px 3px; margin-left: -8px; width: calc(100% + 8px);
}
.index li button:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.index li button[aria-pressed="true"] { background: var(--white); font-weight: 600; }
.index-select { display: none; }

.cards { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 48px; align-content: start; }
.card { display: block; }
.plate { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--plate); overflow: hidden; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate .alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .alt { opacity: 1; }
.cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding-top: 12px; }
.cap .price { grid-column: 2; grid-row: 1; text-align: right; }
.cap .model { grid-column: 1 / -1; }
.card:hover .model { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sw { display: flex; gap: 4px; margin-top: 10px; }
.sw i { width: 10px; height: 10px; box-shadow: inset 0 0 0 1px var(--ink); }
.none { grid-column: 4 / span 6; grid-row: 1; align-self: start; padding-top: 2px; }

/* Request a stand */
.ask { border-top: var(--rule); padding-block: 12px 120px; }
.ask h2 { grid-column: 1 / span 3; padding-top: 4px; }
.ask-form { grid-column: 4 / span 9; }
.ask-form > .l { margin-bottom: 32px; max-width: 18em; }
.ask-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: var(--gutter); align-items: end; }
.ask-row input {
  font-size: var(--l); line-height: 1.1; letter-spacing: -0.028em; font-weight: 500;
  background: transparent; border: 0; border-bottom: var(--rule); border-radius: 0;
  padding: 0 0 8px; outline: none; min-width: 0; -webkit-appearance: none; appearance: none;
}
.ask-row input:focus-visible { border-bottom-width: 3px; padding-bottom: 6px; }

/* Product */
.product { padding-top: 32px; padding-bottom: 96px; row-gap: 64px; }
.gallery { grid-column: 1 / span 7; }
.stage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--plate); }
.thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.thumbs button { display: block; padding: 0; background: var(--plate); }
.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumbs button[aria-pressed="true"] { outline: 2px solid var(--white); outline-offset: 2px; }
.thumbs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.buy { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.buy-in { position: sticky; top: calc(var(--top) + 32px); padding-left: calc(var(--gutter) * 1); }
.buy-in > .strong { margin-bottom: 6px; }
.buy-in h1 { margin-bottom: 12px; }
.buy-in .sub { margin-bottom: 4px; }
.buy-in .price { margin: 24px 0 28px; }
.opt { border: 0; border-top: var(--rule); padding: 12px 0 20px; }
.opt legend { float: left; width: 100%; margin-bottom: 14px; }
.opt legend span { font-weight: 600; margin-left: 8px; }
.colors { clear: both; display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; cursor: pointer; }
.swatch input, .cell input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch i { display: block; width: 36px; height: 36px; box-shadow: inset 0 0 0 1px var(--ink); }
.swatch input:checked + i { outline: 3px solid var(--white); outline-offset: 3px; }
.swatch input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 3px; }
.cells { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.cell span { display: block; padding: 9px 14px 10px; border: var(--rule); cursor: pointer; }
.cell span b { font-weight: 600; margin-left: 10px; }
.cell input:checked + span { background: var(--white); }
.cell input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.qty { display: flex; align-items: center; border-top: var(--rule); padding: 12px 0 20px; }
.qty .s { flex: 1; }
.qty button { width: 40px; height: 40px; border: var(--rule); font-size: 20px; line-height: 1; }
.qty output { width: 48px; text-align: center; font-weight: 600; }
.slab {
  display: block; width: 100%; height: 60px; background: var(--ink); color: var(--alu);
  font-weight: 600; text-align: left; padding: 0 20px; letter-spacing: 0.01em;
}
.slab:hover { color: var(--white); }
.slab:disabled { cursor: default; color: var(--alu); }
.buy-in .slab:disabled { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ghost {
  display: block; width: 100%; height: 48px; margin-top: 8px; padding: 0 20px; text-align: left;
  border: var(--rule); font-weight: 600;
}
.ghost:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ghost:disabled { cursor: default; text-decoration: none; }
.note { margin-top: 12px; }
.err { font-weight: 600; }
.buy .facts { margin-top: 40px; }
.promise { margin-top: 20px; max-width: 30em; font-weight: 500; }
.buy .facts div { grid-template-columns: 8.5em minmax(0, 1fr); column-gap: 16px; }
.buy .facts dt { margin: 3px 0 0; }

.about { grid-column: 1 / span 7; border-top: var(--rule); padding-top: 12px; }
.about > .s { margin-bottom: 20px; }
.about p { max-width: 36em; margin-bottom: 1em; }
.about .s { margin: 28px 0 10px; }
.about ul { max-width: 36em; margin-bottom: 1em; }
.about li { padding-left: 1.1em; text-indent: -1.1em; }
.about li::before { content: "—"; display: inline-block; width: 1.1em; text-indent: 0; }
.about ol { max-width: 36em; margin-bottom: 1em; padding: 0; list-style: none; counter-reset: step; }
.about ol li { counter-increment: step; padding-left: 1.6em; text-indent: -1.6em; }
.about ol li::before { content: counter(step) "."; width: 1.6em; font-variant-numeric: tabular-nums; }
.spec { max-width: 36em; margin-bottom: 1em; }
.spec div { display: grid; grid-template-columns: 9em minmax(0, 1fr); column-gap: 16px; padding-block: 6px 7px; border-top: var(--rule); }
.spec div:last-child { border-bottom: var(--rule); }
.spec dd { font-variant-numeric: tabular-nums; }

.more { border-top: var(--rule); padding-top: 12px; padding-bottom: 120px; }
.more h2 { grid-column: 1 / span 3; }
.more .cards { grid-column: 4 / span 9; }

/* Cart */
.cart, .plain { padding-top: 40px; padding-bottom: 140px; }
.cart h1, .plain h1 { grid-column: 1 / -1; margin-bottom: 48px; }
.lines { grid-column: 1 / span 8; border-top: var(--rule); }
.line { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; column-gap: var(--gutter);
  align-items: start; padding-block: 16px; border-bottom: var(--rule); }
.line .plate { width: 120px; }
.line .what p:first-child { font-weight: 600; }
.line .what .remove { margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.line .qty { border: 0; padding: 0; }
.line .qty button { width: 32px; height: 32px; font-size: 17px; }
.line .qty output { width: 36px; }
.line .total { min-width: 4em; text-align: right; font-weight: 600; }
.empty { padding-block: 16px; }
.sum { grid-column: 10 / span 3; }
.sum dl div { display: flex; justify-content: space-between; padding-block: 8px 9px; border-top: var(--rule); }
.sum dl .total { font-weight: 600; border-bottom: var(--rule); }
.sum .slab { margin-top: 24px; }

/* Plain pages */
.plain .text { grid-column: 4 / span 6; }
.plain .text p { margin-bottom: 1em; max-width: 36em; }
.rows { grid-column: 1 / -1; }
.plain .lead-mail { grid-column: 1 / -1; margin: -24px 0 64px; }
.plain .lead-mail a { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 2px; }
.plain .updated { grid-column: 1 / -1; margin: -32px 0 40px; }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  border-top: var(--rule); padding-block: 12px 40px; }
.row h2 { grid-column: 1 / span 3; padding-top: 4px; }
.row .text { grid-column: 4 / span 6; }

/* Footer */
.foot { border-top: var(--rule); padding-block: 20px 48px; }
.foot-a { grid-column: 1 / span 5; max-width: 26em; }
.foot-b { grid-column: 7 / span 2; }
.foot-c { grid-column: 9 / span 2; }
.foot-d { grid-column: 11 / span 2; }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro h1 { grid-column: 1 / span 12; }
  .intro .facts { grid-column: 1 / span 12; margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
  .intro .facts div:last-child { border-bottom: 0; }
  .gallery { grid-column: 1 / span 6; }
  .buy { grid-column: 7 / span 6; }
  .about { grid-column: 1 / span 6; }
  .lines { grid-column: 1 / span 12; }
  .sum { grid-column: 7 / span 6; margin-top: 40px; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --top: 52px; }
  .find { height: 34px; padding: 0 10px; gap: 10px; }
  .find-long { display: none; }
  .find-short { display: inline; }
  .mark { grid-column: 1 / span 3; }
  .find { grid-column: 4 / span 6; }
  .nav { grid-column: 10 / span 3; gap: 16px; }
  .nav a[href="/info/"] { display: none; }
  .intro { padding-block: 24px 56px; }
  .intro .facts { grid-template-columns: minmax(0, 1fr); }
  .intro .facts div:last-child { border-bottom: var(--rule); }
  .index { grid-column: 1 / -1; position: static; max-height: none; margin-bottom: 24px; }
  .index > .s, .index ul { display: none; }
  .catalogue { padding-top: 0; }
  .index-select { display: flex; align-items: center; gap: 16px; border-bottom: var(--rule); padding-block: 10px; }
  .index-select select { flex: 1; background: transparent; border: 0; font-weight: 600; -webkit-appearance: none; appearance: none; border-radius: 0; }
  .cards { grid-column: 1 / -1; row-gap: 32px; }
  .none { grid-column: 1 / -1; grid-row: auto; }
  .ask h2, .ask-form { grid-column: 1 / -1; }
  .ask h2 { margin-bottom: 16px; }
  .ask-row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .cap { grid-template-columns: minmax(0, 1fr); }
  .cap .price { grid-column: 1; grid-row: auto; text-align: left; order: 3; }
  .product { padding-top: 0; row-gap: 32px; }
  .gallery { grid-column: 1 / -1; }
  .stage { margin-inline: calc(var(--margin) * -1); }
  .thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .buy { grid-column: 1 / -1; grid-row: auto; }
  .buy-in { position: static; padding-left: 0; }
  .about { grid-column: 1 / -1; }
  .more h2 { grid-column: 1 / -1; margin-bottom: 16px; }
  .more .cards { grid-column: 1 / -1; }
  .line { grid-template-columns: 88px minmax(0, 1fr) auto; row-gap: 12px; }
  .line .plate { width: 88px; }
  .line .qty { grid-column: 2; }
  .line .total { grid-column: 3; grid-row: 1; }
  .sum { grid-column: 1 / -1; }
  .plain .text, .row h2, .row .text { grid-column: 1 / -1; }
  .row h2 { margin-bottom: 8px; }
  .foot-a, .foot-b { grid-column: 1 / -1; margin-bottom: 16px; }
  .foot-c { grid-column: 1 / span 6; }
  .foot-d { grid-column: 7 / span 6; }
  .nav a[href="/contact/"] { display: none; }
}

/* How we work */
.how { padding-block: 12px 72px; border-bottom: var(--rule); }
.how h2 { grid-column: 1 / span 3; padding-top: 4px; }
.points { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.points h3 { font-size: var(--m); margin-bottom: 8px; }
.points p { max-width: 24em; }
.points a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 760px) {
  .how h2, .points { grid-column: 1 / -1; }
  .how h2 { margin-bottom: 16px; }
  .points { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

/* Est. line under the figure: two labels on the grid */
.est { padding-top: 14px; }
.est span:first-child { grid-column: 1 / span 3; }
.est span:last-child { grid-column: 10 / span 3; }
@media (max-width: 1100px) { .est span:last-child { grid-column: 7 / span 6; } }

/* Sold out: a struck swatch or cell that cannot be picked */
.swatch.out, .cell.out { cursor: not-allowed; }
.swatch.out i { background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)); }
.cell.out span { text-decoration: line-through; cursor: not-allowed; }
.opt .note { clear: both; margin-top: 12px; }

/* Thank-you page order summary */
.order .spec { max-width: none; }
.order .spec div { grid-template-columns: minmax(0, 1fr) auto; }
.order .spec dd { text-align: right; }
.order .totals { margin-top: 16px; }
.order .totals .strong { font-weight: 600; }