/* Reamlet — design system.
   Palette sampled from the Canva brand board (Reamlet.png).
   Swap these six values and the whole site follows. */

:root {
  --paper:      #F1ECE2;   /* cream field, the brand ground */
  --surface:    #FFFFFF;
  --ink:        #1A1512;   /* warm near-black, from the wordmark */
  --terracotta: #A1481F;   /* primary accent */
  --rust:       #784532;   /* deep accent, hovers */
  --taupe:      #928478;
  --warm-grey:  #958D80;
  --greige:     #D1CABE;   /* rules, hairlines */

  /* Fraunces for display, Arimo for everything read at length. SOFT rounds the
     terminals toward the monoline wordmark; WONK stays off, its angled
     terminals fight the restrained tone. */
  --font-display: Fraunces, "Iowan Old Style", Georgia, serif;
  --font-body: Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-axes: "SOFT" 40, "WONK" 0;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1220px;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.24rem, 1.14rem + 0.5vw, 1.55rem);
  --step-2:  clamp(1.6rem, 1.36rem + 1.1vw, 2.35rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.3vw, 3.6rem);
  --step-4:  clamp(2.6rem, 1.7rem + 4vw, 5rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.22em; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.014em;   /* Fraunces sets tighter than Arimo did */
  text-wrap: balance;         /* no single stranded word on the last line */
  margin: 0;
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* Balanced wrapping is free to break at a hyphen; 'e-ink' must not be. */
.nowrap { white-space: nowrap; }

/* ---------- masthead ---------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--greige);
}
.masthead__row {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; row-gap: 0.25rem;
  min-height: 74px;
}
/* flex:none — without it the nav takes the whole row on narrow screens and
   shrinks the wordmark to zero width, leaving the header unbranded. */
.masthead__logo { flex: none; }
.masthead__logo img { width: 132px; }
.nav { margin-left: auto; display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); align-items: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .masthead__row { padding-block: 0.6rem; min-height: 0; }
  .masthead__logo img { width: 104px; }
  .nav { width: 100%; margin-left: 0; justify-content: space-between; gap: 0.6rem; }
  .nav a { font-size: 0.72rem; letter-spacing: 0.06em; }
}
.nav a {
  text-decoration: none; font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--taupe);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.86rem 1.6rem;
  border: 1px solid var(--terracotta);
  background: var(--terracotta); color: var(--paper);
  font: inherit; font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--rust); border-color: var(--rust); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* A disabled control must not read as clickable. Muted, greyed, and it keeps
   these styles on hover rather than lighting up like a live button. */
.btn:disabled,
.btn:disabled:hover {
  background: var(--greige);
  border-color: var(--warm-grey);
  color: var(--taupe);
  cursor: not-allowed;
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(3.5rem, 9vw, 8rem) clamp(2.5rem, 6vw, 5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { font-size: var(--step-4); max-width: 21ch; }
.hero__lede { font-size: var(--step-1); color: var(--taupe); max-width: 46ch; margin: 1.6rem 0 2.4rem; line-height: 1.45; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.eyebrow {
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--terracotta); margin: 0 0 1.2rem;
}

/* ---------- placeholder slots ---------- */

.ph {
  position: relative;
  display: grid; place-content: center; text-align: center;
  background: var(--greige);
  border: 1px dashed var(--warm-grey);
  color: var(--taupe);
  padding: 2rem 1.5rem;
  border-radius: 2px;
  min-height: 220px;
}
.ph__tag {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--rust);
}
.ph__note { font-size: var(--step--1); margin-top: 0.5rem; max-width: 34ch; }
.ph--tall { aspect-ratio: 3 / 4; min-height: 0; }
.ph--wide { aspect-ratio: 16 / 9; min-height: 0; }

/* ---------- sections ---------- */

.section { padding-block: clamp(3rem, 7vw, 6.5rem); }
.section--paper { background: var(--surface); }
.section__head { max-width: var(--measure); margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section__head h2 { font-size: var(--step-3); }
.section__head p { color: var(--taupe); font-size: var(--step-1); margin: 1rem 0 0; line-height: 1.5; }

/* ---------- product grid ---------- */

.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card__media {
  background: var(--surface); border: 1px solid var(--greige);
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 400ms ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-optical-sizing: auto;
  font-size: var(--step-1); font-weight: 600;
  letter-spacing: -0.012em;
  margin: 1.1rem 0 0.3rem;
}
.card__meta { color: var(--taupe); font-size: var(--step--1); }
.card__price { font-weight: 700; margin-top: 0.5rem; }

/* ---------- device chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.chip {
  border: 1px solid var(--greige); background: var(--surface);
  padding: 0.5rem 0.9rem; border-radius: 999px;
  font-size: var(--step--1); color: var(--taupe); white-space: nowrap;
}
.chip--on { border-color: var(--ink); color: var(--ink); font-weight: 700; }

/* ---------- product detail ---------- */

.pdp { padding-block: clamp(2rem, 5vw, 4rem); }
.pdp__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .pdp__grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.pdp__gallery { display: grid; gap: 1rem; }
.pdp__shot { background: var(--surface); border: 1px solid var(--greige); border-radius: 2px; overflow: hidden; }
.pdp h1 { font-size: var(--step-3); }
.pdp__price {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--step-2); font-weight: 600; margin: 1rem 0 0;
}
.pdp__buy { margin: 1.8rem 0; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.pdp__stub {
  font-size: var(--step--1); color: var(--rust);
  border-left: 2px solid var(--terracotta); padding-left: 0.8rem;
}
.pdp__body { white-space: pre-wrap; max-width: var(--measure); }
.pdp__body h3 { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); margin: 2rem 0 0.6rem; }

.spec { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: var(--step--1); }
.spec th, .spec td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--greige); vertical-align: top; }
.spec th { color: var(--taupe); font-weight: 400; width: 40%; }

/* ---------- pitch rows ---------- */

.pitch { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.pitch h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.pitch p { color: var(--taupe); margin: 0; }
.pitch__rule { height: 2px; background: var(--terracotta); width: 34px; margin-bottom: 1.1rem; }

/* ---------- quote ---------- */

.quote { background: var(--terracotta); color: var(--paper); }
.quote blockquote,
.leather blockquote {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-optical-sizing: auto;
  margin: 0; max-width: 24ch; font-size: var(--step-3);
  font-weight: 600; line-height: 1.12; letter-spacing: -0.014em;
}
.quote cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }

/* ---------- footer ---------- */

.footer { background: var(--ink); color: var(--greige); padding-block: clamp(3rem, 6vw, 5rem); }
.footer a { color: var(--greige); text-decoration: none; }
.footer a:hover { color: var(--paper); text-decoration: underline; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer__logo img { width: 128px; margin-bottom: 1rem; }
.footer h4 { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; color: var(--paper); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--step--1); }
.footer__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--greige) 30%, transparent); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* ---------- banner ---------- */

.banner {
  background: var(--rust); color: var(--paper);
  font-size: var(--step--1); text-align: center;
  padding: 0.7rem var(--gutter);
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; position: fixed; background: var(--ink); color: var(--paper); padding: 0.8rem 1.2rem; z-index: 99; }

/* ═══════════════════════════════════════════════════════════════════
   Texture, depth and motion.

   The flat version read as a spec sheet. reMarkable's pages get their
   depth from alternating full-bleed warm-dark and warm-cream bands, and
   from content that rises into place on scroll — so that is the model
   here, using the leather and badge from the brand board as the real
   material rather than an invented one.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink-deep: #211E1C;                       /* warm near-black band */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-both: cubic-bezier(0.4, 0, 0.2, 1);
  --lift: 0 1px 2px rgba(26,21,18,.05), 0 8px 24px -8px rgba(26,21,18,.18);
  --lift-hi: 0 2px 4px rgba(26,21,18,.06), 0 18px 42px -12px rgba(26,21,18,.28);
}

/* ---------- paper grain ----------
   A single tiled noise layer over the whole page, well under the
   threshold where it reads as "texture" and just stops the flats being
   perfectly flat. Fixed so it does not swim while scrolling. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
.masthead, main, .footer { position: relative; z-index: 2; }

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- depth on cards ---------- */
.card__media {
  box-shadow: var(--lift);
  transition: box-shadow .35s var(--ease-both), transform .35s var(--ease-both);
}
.card:hover .card__media { box-shadow: var(--lift-hi); transform: translateY(-4px); }
.pdp__shot { box-shadow: var(--lift); }

/* ---------- warm-dark band ---------- */
.section--dark {
  background: var(--ink-deep);
  color: var(--greige);
}
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark .section__head p, .section--dark .pitch p { color: var(--warm-grey); }
.section--dark .pitch__rule { background: var(--terracotta); }
.section--dark .chip { background: transparent; border-color: #3A3532; color: var(--warm-grey); }

/* ---------- leather band ----------
   The terracotta field from the brand board, used at full bleed. The
   overlay keeps text contrast up where the grain goes light. */
.leather {
  position: relative;
  background-image: url("/brand/leather.jpg");
  background-size: cover;
  background-position: center;
  color: var(--paper);
  overflow: hidden;
}
.leather::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(120,69,50,.55), rgba(90,48,32,.78));
}
.leather > * { position: relative; z-index: 1; }
.leather blockquote, .leather cite { color: var(--paper); }

/* ---------- badge ---------- */
.badge {
  width: clamp(120px, 16vw, 190px);
  aspect-ratio: 1;
  flex: none;
  animation: badge-spin 42s linear infinite;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }

.badge-row {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap; justify-content: center; text-align: center;
}
@media (min-width: 760px) { .badge-row { flex-wrap: nowrap; text-align: left; } }

/* ---------- full-bleed image band ---------- */
.band { min-height: clamp(320px, 46vh, 560px); display: grid; }
.band > .ph { border: 0; min-height: inherit; border-radius: 0; }

/* ---------- sticky buy bar (product pages) ---------- */
.buybar {
  position: sticky; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--greige);
  padding: 0.8rem var(--gutter);
}
.buybar__row {
  max-width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.buybar__price { font-weight: 700; font-size: var(--step-1); }
.buybar__name { color: var(--taupe); font-size: var(--step--1); margin-right: auto; }

/* ---------- masthead shadow once scrolled ---------- */
.masthead { transition: box-shadow .3s var(--ease-both); }
.masthead.is-stuck { box-shadow: 0 1px 0 var(--greige), 0 10px 30px -18px rgba(26,21,18,.5); }

/* ---------- respect the setting ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .badge { animation: none; }
  .card:hover .card__media { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}