/* Open Runde, same source as prod (public/css/styles.css). Without these the
   page silently falls back to Inter, which looks close enough to miss. */
@font-face { font-family: 'Open Runde'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Runde'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Open Runde'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Semibold.woff2') format('woff2'); }
@font-face { font-family: 'Open Runde'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/lauridskern/open-runde@main/src/web/OpenRunde-Bold.woff2') format('woff2'); }
:root{
  --bg:#f9f8f6; --surface:#ffffff; --surface2:#f4f3f1; --surface3:#eceae8;
  --border:rgba(175,170,162,.25); --border-light:rgba(175,170,162,.15);
  --text:#302e2b; --text-dim:#524f4b; --text-muted:#847e78;
  --accent:#8b6f47; --accent-hover:#9a7d54; --accent-dim:rgba(139,111,71,.1);
  --cream:#fffdf6; --sticky:#fff8c5;
  --radius:16px; --radius-sm:10px;
  --sans:'Open Runde','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --shadow-sm:0 1px 3px rgba(60,50,40,.06);
  --shadow-md:2px 3px 12px rgba(60,50,40,.08);
  --shadow-lg:4px 6px 24px rgba(60,50,40,.1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --rule:rgba(120,150,190,.16);
  --margin-line:rgba(220,90,90,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}

/* The desk: notebook paper. Ruled lines are the constant, the objects on top
   bring the warmth. Canvas stays neutral. */
.paper{
  position:relative; min-height:100vh;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,var(--rule) 33px,var(--rule) 34px);
  background-position:0 96px;
}

.wrap{max-width:1000px; margin:0 auto; padding:0 24px 120px; position:relative}

/* The margin rule is drawn ONCE for the whole sheet, not as a border on each
   entry. Per-entry borders break in every gap between posts, which reads as
   ruled boxes rather than one continuous notebook margin. Its x has to match
   the grid boundary: wrap padding (24) + the date column (132). */
.wrap::before{
  content:''; position:absolute; top:0; bottom:0; left:calc(24px + 132px);
  width:1px; background:var(--margin-line);
}

/* Date in the left margin, body to the right of the red rule, which is how a
   notebook actually works. An earlier pass floated the rule off at the page
   edge with nothing between it and the text, so it read as decoration. */
.cols{display:grid; grid-template-columns:132px minmax(0,1fr); align-items:start}
.cols > .right{padding-left:clamp(20px,3.4vw,40px)}

/* Masthead */
.masthead{padding:96px 0 8px}
.eyebrow{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); font-weight:600; margin:0 0 10px;
}
h1{
  /* Open Runde is rounder and wider than a serif at the same size, so it wants
     more weight and tighter tracking to hold the same presence. */
  font-family:var(--sans); font-weight:700; font-size:clamp(36px,5.4vw,50px);
  line-height:1.08; margin:0 0 14px; text-wrap:balance; letter-spacing:-.028em;
}
.standfirst{
  font-size:17px; color:var(--text-dim); max-width:52ch; margin:0 0 8px;
  text-wrap:pretty;
}

/* One entry = one thing you can now do. */
.entry{padding:46px 0 6px}
.entry .right{padding-bottom:22px}
.entry + .entry .right{border-top:0}
.date{
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--text-muted); margin:0; padding:9px 18px 0 0; text-align:right;
  font-variant-numeric:tabular-nums; line-height:1.45;
}
.date span{display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; opacity:.75}
h2{
  font-family:var(--sans); font-weight:600; font-size:clamp(23px,2.9vw,29px);
  line-height:1.22; margin:0 0 14px; text-wrap:balance; letter-spacing:-.022em;
}
.entry p{margin:0 0 14px; max-width:60ch; text-wrap:pretty; color:var(--text-dim)}
.entry p strong{color:var(--text); font-weight:600}

/* The guiding line. A colleague leaning over and telling you where to start,
   so it reads as an aside on the page rather than another paragraph. */
.pointer{
  position:relative; background:var(--sticky); border-radius:3px;
  padding:13px 16px 13px 15px; margin:0 0 16px; max-width:56ch;
  font-size:15px; color:#4a4126;
  box-shadow:var(--shadow-sm); transform:rotate(-.35deg);
  transition:transform .3s var(--spring), box-shadow .3s var(--spring);
}
.pointer:hover{transform:rotate(0deg) translateY(-2px); box-shadow:var(--shadow-md)}
.pointer b{font-weight:600; color:#3b3520}

/* Honesty box. Every entry that touches someone's money or their store says
   plainly what we cannot do. Bordered rather than tinted so it reads as a
   note pinned on, not an alert. */
.limits{
  border-left:2px solid var(--accent-dim); padding:2px 0 2px 15px;
  margin:0 0 16px; max-width:56ch; font-size:14.5px; color:var(--text-muted);
}

/* Demo. The real thing, not a recording. `?embed=N` renders one demo on its
   own and posts its height up, so there is still exactly one copy of these:
   change a keyframe in public/demos/ and this page changes with it. */
figure.demo{
  margin:22px 0 8px; padding:10px 10px 0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); max-width:100%;
  transform:rotate(-.5deg);
  transition:transform .3s var(--spring), box-shadow .3s var(--spring);
}
figure.demo:hover{transform:rotate(0deg) translateY(-3px); box-shadow:var(--shadow-lg)}

/* Geometry copied from prod's .pop-shell, and it is load-bearing. Media
   queries inside an iframe resolve against the IFRAME's viewport, so a
   720px-wide iframe puts prod's CSS into its phone branch and the meta-ads
   board renders empty. Give it a desktop viewport, then claw the extra width
   back with a negative margin and clip it. --pop-w must stay equal to the
   demo's (--stage-w + 44); it cannot be shared across the frame boundary. */
.demo-clip{--pop-w:720px; --embed-vw:1400px; width:var(--pop-w); max-width:100%; overflow:hidden; border-radius:5px; position:relative}

/* If the demos cannot be reached, say so on the page. An iframe that fails to
   load just renders blank, which reads as "the prototype is broken" when the
   real cause is that it is being served from the wrong root. */
figure.demo.unreachable .demo-clip{
  height:150px; background:var(--surface2); border:1px dashed var(--border);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
figure.demo.unreachable iframe{display:none}
figure.demo.unreachable .demo-clip::after{
  /* A founder reads this, not us. The old copy was the prototype's own
     "serve the repo with public/ as the web root" note, which is an
     instruction to a developer rendered on a public marketing page. */
  content:'This demo is not loading right now.';
  font-size:12.5px; line-height:1.5; color:var(--text-muted); max-width:34ch; padding:0 18px;
}
figure.demo iframe{
  display:block; border:0; background:transparent;
  width:var(--embed-vw); margin-left:calc((var(--pop-w) - var(--embed-vw)) / 2);
  /* Every current demo measures 431px, and the iframes load lazily, so a
     fallback of anything else shifts the page as each one arrives. The embed
     still posts its real height and wins — this is only what is painted
     before it does. */
  height:431px;
}
figure.demo figcaption{
  font-size:12.5px; color:var(--text-muted); padding:9px 3px 11px;
}
figure.demo::before{
  content:''; position:absolute; margin:-19px 0 0 calc(50% - 34px);
  width:68px; height:17px; background:rgba(255,252,235,.55);
  box-shadow:0 1px 2px rgba(60,50,40,.06); transform:rotate(-1.4deg);
}

footer{
  margin-top:72px; padding-top:26px; border-top:1px solid var(--border-light);
  color:var(--text-muted); font-size:14px;
}
footer a{color:var(--accent); text-decoration:none; font-weight:600}
footer a:hover{text-decoration:underline}

@media (max-width:720px){
  .masthead{padding-top:60px}
  .entry{padding-top:32px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .wrap::before{display:none}
  .cols > .right{padding-left:0; border-top:1px solid var(--border-light); padding-top:14px}
  .date{text-align:left; padding:0 0 10px}
  .date span{display:inline; font-size:12.5px; letter-spacing:.04em; text-transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pointer,figure.demo{transition:none}
  .pointer:hover,figure.demo:hover{transform:none}
}