/* The homepage, for people who aren't signed in. It borrows the cut list's
   drawing language (beige parts with brown letters, orange dimension lines,
   hatched waste, dashed offcuts, red saw cuts) so it looks like Offcut and
   not like a template. Archivo and IBM Plex Mono are served from here (SIL
   Open Font License), so visitors' browsers never call Google. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/archivo-latin-ext-a0aa4f2d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/archivo-latin-591a8b69.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-500-latin-ext-2cd882f8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-500-latin-deab9c2b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.hp {
  --hp-display: "Archivo", var(--font);
  --hp-mono: "IBM Plex Mono", var(--mono);
  --hp-part: #e8d3a6;
  --hp-mark: #8a4418;
  --hp-dim: #b5652b;
  --hp-cut: #c2391b;
  --hp-stock: #6f6455;
  --hp-hatch: #cfc5b6;
  --hp-offcut: #a89b88;
  --hp-wrap: 1180px;
  padding: 0;
  overflow-x: clip;
}
.hp h2 { font-family: var(--hp-display); font-stretch: 78%; font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 1.25rem; }
.hp-wrap { max-width: var(--hp-wrap); margin: 0 auto; padding: 0 1.25rem; }
.hp-label { margin: 0 0 1rem; font: 500 0.78rem var(--hp-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* A dimension line: ticks at both ends, the measure in the middle. */
.hp-dim { display: flex; align-items: center; gap: 0.75rem; height: 14px; border-inline: 1px solid var(--hp-dim); color: var(--hp-dim); font: 500 0.8rem var(--hp-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.hp-dim::before, .hp-dim::after { content: ""; flex: 1; border-top: 1px solid currentColor; }
.hp-dim:empty { gap: 0; }

.hp-button { display: inline-block; padding: 0.85rem 1.5rem; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--accent); border-color: var(--accent); color: #fff; font: 700 1rem var(--font); text-decoration: none; transition: background 0.15s; }
.hp-button:hover { background: #9c5422; border-color: #9c5422; }
.hp-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hp-dim); text-underline-offset: 0.25em; }
.topbar__links .hp-topbar-cta { color: #f1c39b; font-weight: 600; }

/* Hero: drawing paper with a 10 mm grid. */
.hp-hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(43, 38, 32, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 38, 32, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(43, 38, 32, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 38, 32, 0.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  border-bottom: 1px solid var(--line);
}
.hp-hero__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem 3rem; align-items: end; }
.hp-hero__title-block { min-width: 0; }
.hp-hero__title-block .hp-dim { margin-bottom: 1rem; max-width: 42rem; }
.hp-hero h1 { margin: 0; font-family: var(--hp-display); font-stretch: 72%; font-weight: 850; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 0.9; letter-spacing: -0.015em; text-transform: uppercase; }
.hp-hero h1 span { display: block; }
.hp-hero__lede { margin: 0 0 1.5rem; font-size: 1.15rem; line-height: 1.5; color: #4f463c; }
.hp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hp-fig { margin: 0; }
.hp-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--hp-stock); background: var(--surface); }
.hp-fig figcaption { margin-top: 0.6rem; font: 500 0.78rem var(--hp-mono); color: var(--muted); }
.hp-hero__fig { margin-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* What you get, laid out as parts on a sheet. */
.hp-get { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.hp-sheet {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1.5px solid var(--hp-stock);
  background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--hp-hatch) 7px 8px), #f7f3ec;
}
.hp-part { position: relative; padding: 2.25rem 1.5rem 1.5rem; border: 1.25px solid var(--ink); background: var(--hp-part); min-height: 15rem; }
.hp-part--a { grid-column: span 7; }
.hp-part--b { grid-column: span 5; }
.hp-part--c { grid-column: span 5; }
.hp-part--d { grid-column: span 4; }
.hp-offcut { grid-column: span 3; display: grid; place-items: center; padding: 1.5rem; border: 1px dashed var(--hp-offcut); background: #f7f3ec; color: #8a7f70; font-style: italic; text-align: center; }
.hp-part__size { position: absolute; top: 0.6rem; left: 0; right: 0; text-align: center; font: 500 0.8rem var(--hp-mono); color: #5b5146; }
.hp-part__mark { position: absolute; right: 1.25rem; bottom: 0.5rem; font-family: var(--hp-display); font-weight: 900; font-size: 5.5rem; line-height: 1; color: var(--hp-mark); opacity: 0.9; pointer-events: none; }
.hp-part h3 { margin: 0 0 0.5rem; font-family: var(--hp-display); font-stretch: 80%; font-weight: 800; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.hp-part p { margin: 0; max-width: 30rem; padding-right: 4rem; color: #3d352d; }

/* The cut list. */
.hp-cutlist { padding: clamp(3.5rem, 7vw, 6rem) 0 0; }
.hp-cutlist__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3rem; align-items: start; }
.hp-specs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.hp-specs li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); color: #4f463c; }
.hp-specs b { font-family: var(--hp-display); font-weight: 900; font-size: 1.35rem; line-height: 1.1; color: var(--hp-mark); }
.hp-specs strong { color: var(--ink); }

/* Design with Claude or ChatGPT: the shop at night. */
.hp-ai {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(246, 243, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 243, 238, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #f6f3ee;
}
.hp-ai .hp-label { color: #b9ad9e; }
.hp-ai__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; }
.hp-ai__copy p { color: #d8cfc2; }
.hp-ai__copy .hp-button { margin-top: 0.75rem; }
.hp-transcript { margin: 0; border: 1px solid rgba(246, 243, 238, 0.18); background: #221e19; font: 500 0.88rem/1.55 var(--hp-mono); }
.hp-transcript__bar { padding: 0.5rem 1rem; border-bottom: 1px solid rgba(246, 243, 238, 0.12); color: #8f8476; font-size: 0.75rem; }
.hp-transcript__body { padding: 1.25rem; display: grid; gap: 1rem; }
.hp-transcript p { margin: 0; color: #e9e2d6; }
.hp-transcript__who { display: block; margin-bottom: 0.2rem; color: #e7a46f; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hp-transcript ol { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 1px solid rgba(231, 164, 111, 0.4); color: #a99d8d; }
.hp-transcript ol li::before { content: "→ "; color: #e7a46f; }

/* Three steps, as numbered saw cuts. */
.hp-steps { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.hp-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.hp-steps li { padding-top: 1.25rem; border-top: 2px solid var(--hp-cut); color: #4f463c; }
.hp-steps__cut { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font: 500 0.78rem var(--hp-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hp-cut); }
.hp-steps__cut::before { content: attr(data-n); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1.5px solid var(--hp-cut); border-radius: 50%; background: #fff; font-weight: 700; }
.hp-steps strong { display: block; margin-bottom: 0.35rem; font-family: var(--hp-display); font-stretch: 85%; font-weight: 800; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }

/* Questions. */
.hp-faq { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.hp-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3rem; }
.hp-faq dl { margin: 0; border-top: 1px solid var(--ink); }
.hp-faq dt { padding-top: 1rem; font-weight: 700; }
.hp-faq dd { margin: 0.3rem 0 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: #4f463c; }

/* Sharing: the two kinds of link, as two more lettered parts. */
.hp-share { padding: clamp(3.5rem, 7vw, 6rem) 0 0; }
.hp-share__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; }
.hp-share__lede { color: #4f463c; font-size: 1.05rem; max-width: 34rem; }
.hp-share__sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-share__part { min-height: 13rem; }

/* The end: a strip of waste, then one last ask. */
.hp-end { margin-top: clamp(2rem, 5vw, 4rem); border-top: 1.5px solid var(--hp-stock); }
.hp-end__waste { height: 28px; background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--hp-hatch) 7px 8px), #f7f3ec; border-bottom: 1.5px solid var(--hp-stock); }
.hp-end__inner { padding: clamp(3rem, 6vw, 5rem) 1.25rem; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; }
.hp-end h2 { margin: 0; font-size: clamp(2.2rem, 5.5vw, 4rem); max-width: 14ch; }

@media (max-width: 860px) {
  .hp-hero__head, .hp-cutlist__grid, .hp-ai__grid, .hp-share__grid, .hp-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-share__sheet { grid-template-columns: minmax(0, 1fr); }
  .hp-part--a, .hp-part--b, .hp-part--c, .hp-part--d { grid-column: span 12; }
  .hp-offcut { grid-column: span 12; min-height: 5rem; }
  .hp-steps ol { grid-template-columns: minmax(0, 1fr); }
  .hp-part { min-height: 0; }
  .hp-part__mark { font-size: 4rem; }
}

/* Footer: who to write to, and who made it. */
.hp-footer { border-top: 1px solid var(--line); }
.hp-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.5rem; padding-bottom: 1.5rem; font: 500 0.8rem var(--hp-mono); color: var(--muted); }
.hp-footer p { margin: 0; }
.hp-footer a { color: var(--ink); text-decoration-color: var(--hp-dim); text-underline-offset: 0.2em; }
.hp-footer__heart { color: var(--hp-cut); }