/*
 * marlubie.com. The same family as victodo.marlubie.com and wholetake.marlubie.com:
 * warm paper, olive ink, sage green; Newsreader for headings, IBM Plex Sans for text.
 * Colours are only set as the tokens below (light, then dark). `pnpm check` measures every
 * text and focus pair against WCAG (text 4.5:1, focus ring 3:1).
 * Fonts are served from /fonts (SIL Open Font License 1.1, licenses next to them).
 * Chinese text uses the reader's system fonts.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-opsz-normal.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;
}

:root {
  color-scheme: light dark;
  --paper: #f8f6ee;
  --surface: #fffef9;
  --tint: #e7efe4;
  --line: #e3dfce;
  --control: #7e8472;
  --ink: #26291f;
  --ink-2: #3a3d33;
  --ink-3: #6f6a5b;
  --accent: #3b6247;
  --accent-strong: #2f5039;
  --on-accent: #fffef9;
  --focus: #3b6247;

  --display: "Newsreader", "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  --text: "IBM Plex Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 0.875rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14170f;
    --surface: #1e221b;
    --tint: #26382b;
    --line: #2c312a;
    --control: #858a78;
    --ink: #efebdd;
    --ink-2: #c9cdbf;
    --ink-3: #a3a895;
    --accent: #9fc7aa;
    --accent-strong: #b5d6bd;
    --on-accent: #14170f;
    --focus: #9fc7aa;
  }
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

body:lang(zh) {
  line-height: 1.8;
}

h1,
h2,
h3,
h4,
p,
ul,
dl,
dd,
address {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--accent-strong);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -10rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
  color: var(--on-accent);
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--line);
}

.header-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav lang";
  align-items: center;
  gap: 0.5rem 2rem;
  padding-block: 1rem;
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand svg {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
}

.nav {
  grid-area: nav;
  justify-self: end;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--ink-2);
  font-size: 0.975rem;
  font-weight: 500;
  text-decoration: none;
}

.nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.lang-link {
  grid-area: lang;
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--control);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.lang-link:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* Narrow screens: the brand and the language link share the first line (the language link moves
   to its own line when large text leaves no room), the page links take the line below. */
@media (max-width: 47.99rem) {
  .header-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
  }

  .brand {
    min-width: 0;
  }

  .nav {
    order: 1;
    flex-basis: 100%;
  }

  .nav ul {
    gap: 0 1.25rem;
  }
}

/* Hero */

.hero {
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.eyebrow {
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 {
  max-width: 22ch;
  margin-block: 0.75rem 1.25rem;
  font-family: var(--display);
  font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:lang(zh) h1 {
  line-height: 1.2;
  letter-spacing: 0;
}

/* Chinese headings break at spaces and punctuation, not inside a word such as 製作. */
:lang(zh) h1,
:lang(zh) h2 {
  word-break: keep-all;
}

.lede {
  max-width: 58ch;
  color: var(--ink-2);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.6;
}

.jump {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .jump {
    grid-template-columns: repeat(2, minmax(0, 22rem));
  }
}

.jump a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  align-items: center;
  gap: 0.15rem 1rem;
  height: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.jump a:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.jump-name {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
}

.jump-desc {
  grid-column: 1;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

.jump-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 1.25rem;
}

/* Sections */

.section {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  scroll-margin-top: 0.5rem;
}

.section-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 60rem) {
  .section-grid {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3rem;
  }
}

.section-num {
  color: var(--ink-3);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

:lang(zh) h2 {
  letter-spacing: 0;
  line-height: 1.3;
}

.section-body {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.prose {
  max-width: 64ch;
  color: var(--ink-2);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* Products */

.products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 0.5rem;
}

@media (min-width: 52rem) {
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.product {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  scroll-margin-top: 1rem;
}

.product-kind {
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.5;
}

h3 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.6rem + 1vw, 2.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.product h3 + .product-kind {
  margin-top: -0.85rem;
}

.product-lede {
  color: var(--ink);
  font-size: 1.075rem;
}

h4 {
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.points {
  display: grid;
  gap: 0.55rem;
  margin-top: -0.5rem;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
}

.points li {
  position: relative;
  padding-left: 1.2rem;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}

.price {
  padding: 0.85rem 1rem;
  border-radius: 0.6rem;
  background: var(--tint);
  color: var(--ink);
}

.price strong {
  font-weight: 600;
}

.product-actions {
  display: grid;
  gap: 1rem;
  padding-top: 0.25rem;
}

.button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  /* Transparent here; Windows High Contrast draws it, so the button keeps its edge there. */
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  /* A host name has no break point; with large text it may break (after <wbr>, else anywhere). */
  overflow-wrap: anywhere;
}

.button:hover {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: -0.6rem;
  padding: 0;
  list-style: none;
}

/* Payments */

.facts {
  max-width: 52rem;
}

.facts > div {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
}

.facts > div:first-child {
  border-top: 0;
  padding-top: 0.25rem;
}

@media (min-width: 40rem) {
  .facts > div {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

.facts dt {
  font-weight: 600;
}

.facts dd {
  color: var(--ink-2);
}

/* Contact */

.email {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

address {
  color: var(--ink-2);
  font-style: normal;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2rem 3rem;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.footer-policies {
  display: grid;
  gap: 1.25rem 3.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 1rem;
}

@media (min-width: 48rem) {
  .footer-policies {
    grid-template-columns: auto auto;
    justify-content: start;
  }
}

.footer-title {
  margin-bottom: 0.4rem;
  color: var(--ink-2);
  font-weight: 600;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding: 0;
  list-style: none;
}

/* Not-found page */

.notfound {
  padding-block: clamp(3rem, 10vw, 7rem);
}

.notfound h2 {
  margin-top: 3rem;
}

.notfound p {
  margin-top: 1rem;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  a,
  .button,
  .lang-link,
  .jump a {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }
}

/* Windows High Contrast drops backgrounds: draw the list bullets in the text colour. */
@media (forced-colors: active) {
  .points li::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

@media print {
  .skip,
  .nav,
  .lang-link,
  .jump {
    display: none;
  }

  .product {
    break-inside: avoid;
  }
}