@import url("fonts.css?v=5");

/* ==========================================================================
   Palette sampled directly from the photograph of the phone. Every token is
   a colour that is physically in that room. It is a monochromatic warm scheme:
   everything sits in the 20–45° hue band except the foliage.

     --ink     bakelite in shadow          --teak    the teak sideboard
     --rule    warm brown, hairlines       --cream   the lit wall
     --olive   the foliage                 --sand    wall mid-tone

   Verified contrast on --ink: cream 15.05:1 · sand 10.57:1 · taupe 6.68:1 ·
   teak-2 5.01:1 (passes as normal text), teak 4.14:1 (large only),
   rule 1.59:1 (decorative hairlines ONLY, never a control border).
   Primary button is --teak-2 filled with --ink type: 5.01:1.

   TYPE   Newsreader (display) + Source Sans 3 (text). Both are wide, screen-
          first faces. The previous pairing used Instrument Serif and Inter
          Tight, which are both condensed, so the page read tall and cramped.
   FORM   No gradient blobs, no glow, no blanket radius. 2px corners, flat
          fills, structure stated with hairlines.
   ========================================================================== */

:root {
  --ink:    #0E0B08;
  --ink-2:  #191309;
  --ink-3:  #241B10;
  --rule:   #413221;
  --teak:   #B35B21;
  --teak-2: #C4682A;
  --olive:  #6D7357;
  --cream:  #EDE0C9;
  --sand:   #D2BB99;
  --taupe:  #AE9270;

  --hair:   rgba(237, 224, 201, 0.12);
  --hair-2: rgba(237, 224, 201, 0.20);

  /* Newsreader: a screen-first editorial serif, much wider than Instrument
     Serif. Source Sans 3: humanist, generous proportions, built for text.
     Inter Tight was the condensed cut of Inter, which is why the old setting
     read tall and cramped. */
  --display: "Newsreader", Georgia, "Iowan Old Style", Palatino, serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  --pad-x: clamp(24px, 4.6vw, 80px);
  --pad-y: clamp(22px, 3vh, 44px);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.62;
  /* No negative tracking. A humanist text face wants its own metrics. */
  background: var(--ink);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 500; font-optical-sizing: auto; }
p { margin: 0; }
figure { margin: 0; }

.skip {
  position: fixed; left: var(--pad-x); top: -100px; z-index: 200;
  padding: 12px 18px; border-radius: 2px;
  background: var(--teak-2); color: var(--ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 14px; }

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

.label {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--taupe);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   LANDING. One screen. Type left, the photograph right, bleeding to 3 edges.
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  min-height: 100svh;
}

.panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  border-right: 1px solid var(--hair);
  /* Directional warmth, as if lit from the same window as the photograph. */
  background: linear-gradient(148deg, rgba(65, 50, 33, 0.42) 0%, rgba(14, 11, 8, 0) 58%);
  isolation: isolate;
  overflow: hidden;
}

/* Grain, so the flat warm fields keep some tooth. */
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1 {
  font-family: var(--display);
  /* Newsreader sets ~19% wider than Instrument Serif, so the ceiling comes
     down to keep "Someone checks in." on one line. */
  font-size: clamp(40px, 4.85vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--cream);
}

.lead {
  margin-top: clamp(20px, 2.6vh, 32px);
  max-width: 46ch;
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 1.58;
  color: var(--sand);
}

/* --- CTAs ---------------------------------------------------------------- */

.cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: clamp(26px, 3.6vh, 42px);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding-inline: 25px;
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.btn svg { flex: none; transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Amber fill, near-black type: 5.01:1. The wood of the sideboard. */
.btn-primary {
  background: var(--teak-2); border-color: var(--teak-2);
  color: var(--ink);
}
.btn-primary:hover { background: var(--sand); border-color: var(--sand); }
.btn-primary:hover svg { transform: translateX(4px); }

/* ==========================================================================
   The photograph
   ========================================================================== */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}

.plate img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  display: block;
}

/* A soft scrim where the photograph meets the panel, so the seam reads as
   depth rather than as two pasted rectangles. */
.plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(14, 11, 8, 0.62) 0%, rgba(14, 11, 8, 0) 22%);
}

/* ==========================================================================
   Build log
   ========================================================================== */

.doc { display: flex; flex-direction: column; min-height: 100svh; }

.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 12px var(--pad-x);
  background: rgba(14, 11, 8, 0.88);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.bar .spacer { flex: 1; }
.bar a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 14.5px; font-weight: 500; color: var(--sand); text-decoration: none;
  transition: color 160ms ease;
}
.bar a:hover { color: var(--cream); }

.shell { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: var(--pad-x); }

.log-head { padding-block: clamp(52px, 8vw, 104px) clamp(26px, 3vw, 40px); }
.log-head h1 {
  margin-top: 20px;
  font-family: var(--display);
  font-size: clamp(38px, 5.6vw, 70px);
  line-height: 1.04; letter-spacing: -0.012em; font-weight: 500;
}
.log-head p {
  margin-top: 22px; max-width: 52ch;
  font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.6; color: var(--sand);
}

.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.posts > li { border-bottom: 1px solid var(--hair); }

.post {
  display: grid; grid-template-columns: 11rem 1fr; gap: 8px 40px;
  padding-block: clamp(26px, 3vw, 38px);
  text-decoration: none; color: inherit;
}
.post:hover h2 { color: var(--teak-2); }
.post h2 {
  font-family: var(--display);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.14; letter-spacing: -0.008em; font-weight: 500;
  transition: color 160ms ease;
}
.post .dek { margin-top: 12px; max-width: 56ch; font-size: 16.5px; line-height: 1.55; color: var(--sand); }
.post .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--taupe); }
.post:hover .go { color: var(--sand); }

/* ==========================================================================
   Article
   ========================================================================== */

.article {
  /* 47rem, not 40: the padding is inside the box, so 40rem left the measure at
     ~52 characters. This lands it near 64. */
  width: 100%; max-width: 47rem; margin: 0 auto;
  padding: clamp(44px, 6vw, 86px) var(--pad-x) clamp(56px, 7vw, 96px);
  font-size: 19px; line-height: 1.72; color: var(--sand);
}
@media (max-width: 620px) { .article { font-size: 18px; line-height: 1.68; } }

.article h1 {
  margin-block: 20px 0;
  font-family: var(--display);
  font-size: clamp(36px, 5.2vw, 58px);
  line-height: 1.06; letter-spacing: -0.012em; font-weight: 500; color: var(--cream);
}
.article .standfirst {
  margin-top: 22px;
  font-size: clamp(19px, 1.7vw, 21.5px); line-height: 1.55; color: var(--sand);
}
.article .byline {
  margin-top: 28px; padding-bottom: 28px;
  border-bottom: 1px solid var(--hair);
}
.article h2 {
  margin: clamp(44px, 5vw, 68px) 0 16px;
  font-family: var(--display);
  font-size: clamp(25px, 3vw, 33px);
  line-height: 1.16; letter-spacing: -0.008em; font-weight: 500; color: var(--cream);
}
.article h3 {
  margin: clamp(30px, 3.2vw, 42px) 0 10px;
  font-size: 18px; font-weight: 600; color: var(--cream);
}
.article p + p { margin-top: 19px; }

/* --- figures ------------------------------------------------------------
   Figures span the full article box, so they break the measure and give the
   page some rhythm. On phones that becomes an edge-to-edge bleed. */
.article figure {
  margin: clamp(34px, 4.2vw, 54px) calc(-1 * var(--pad-x));
}
.article figure img {
  display: block; width: 100%; height: auto;
  background: var(--ink-2);
  border-radius: 2px;
}
.article figure figcaption {
  margin: 12px var(--pad-x) 0;
  font-family: var(--sans);
  font-size: 15px; line-height: 1.55;
  color: var(--taupe);
}
/* Two frames side by side, for before/after pairs. */
.article .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.article .duo img { border-radius: 2px; }
@media (max-width: 560px) {
  .article .duo { grid-template-columns: 1fr; }
}

.article strong { color: var(--cream); font-weight: 600; }
.article em { color: var(--cream); font-style: italic; }
.article a {
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid var(--taupe);
  transition: border-color 160ms ease, color 160ms ease;
}
.article a:hover { color: var(--teak-2); border-bottom-color: var(--teak-2); }

.article ul { margin: 20px 0; padding: 0; list-style: none; }
.article ul li { position: relative; margin-bottom: 13px; padding-left: 24px; }
.article ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--taupe);
}

.article blockquote {
  margin: clamp(34px, 4vw, 52px) 0;
  padding-left: clamp(20px, 2.2vw, 30px);
  border-left: 1px solid var(--taupe);
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.36; letter-spacing: -0.006em; color: var(--cream);
}
.article blockquote p + p { margin-top: 14px; }
.article blockquote cite {
  display: block; margin-top: 18px;
  font-family: var(--sans); font-size: 15px; font-style: normal;
  line-height: 1.5; color: var(--taupe);
}

.article .note {
  margin: clamp(32px, 3.6vw, 46px) 0;
  padding: clamp(20px, 2.2vw, 26px);
  background: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 16px; line-height: 1.6;
}

.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em; padding: 2px 6px; border-radius: 2px;
  background: var(--ink-3); color: var(--cream); white-space: nowrap;
}
.article .lang { color: var(--cream); font-style: italic; }

.article-end {
  margin-top: clamp(44px, 5vw, 68px); padding-top: 30px;
  border-top: 1px solid var(--hair); font-size: 16.5px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-height: 780px) and (min-width: 900px) {
  h1 { font-size: clamp(40px, 5.3vw, 70px); }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .panel { border-right: 0; order: 2; }
  .plate { order: 1; height: 32svh; min-height: 210px; }
  /* Landscape band from a portrait source, so frame the dial. */
  .plate img { object-position: 50% 58%; }
  .plate::after {
    background: linear-gradient(to bottom, rgba(14, 11, 8, 0) 55%, rgba(14, 11, 8, 0.75) 100%);
  }
  .lead { max-width: none; }
}

@media (max-width: 620px) {
  .cta { flex-direction: column; align-items: stretch; gap: 9px; }
  .btn, .signup, 
@media print {
  body { background: #fff; color: #000; }
  .bar, .cta, .plate { display: none; }
  .article { max-width: none; color: #000; font-size: 11pt; }
}