/* /plus-one/: Plus One, our open agent puck, in its maker sub-theme (preview, 2026-11-02).
   The shared nav, footer and lockup stay as on every page. The page body is warm paper, black ink, the
   lockup's lime #D9F24A and a cutting-mat grid. Lime is only ever a fill behind black ink, never text on
   paper. The pictures are renders of the OPD's CAD model (img/, from golden-twin/plus-one/product.glb).
   The page is light in every system mode (Ben, 2026-11-02). "The line" stays dark: the bridge to the Golden Twin. */
.p1-paper {
  --bg: #F5F1E6;        /* paper */
  --bg-2: #EAE5D5;      /* paper, alternate band */
  --card: #FCFAF4;
  --ink: #16170F;
  --mute: #45463C;      /* 7.6:1 on the alternate band, the lowest text pair */
  --line: rgba(22, 23, 15, 0.16);
  --rule: #16170F;
  --shadow: #16170F;
  --lime: #D9F24A;
  --on-lime: #16170F;   /* 14.4:1 */
  --glass: rgba(245, 241, 230, 0.9);
  --mat-minor: rgba(46, 84, 52, 0.08);
  --mat-major: rgba(46, 84, 52, 0.16);
  color-scheme: light;
  display: block;
  background: var(--bg);
  color: var(--ink);
}

/* The shared header's glass is 72% black, made for dark pages. Over paper it would go grey and its menu
   text would drop below AA, so on this page the same glass is nearly opaque. It looks the same. */
body .nx::before { background: rgba(10, 11, 13, 0.94); }
/* A lime rule where the dark header meets the paper, on this page only. */
body .nx::before, body .nx.nx-scrolled::before { border-bottom: 3px solid #D9F24A; }

.p1-paper ::selection { background: var(--lime); color: var(--on-lime); }
.p1-paper a:focus-visible, .p1-paper .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.p1-paper .band { border-top: 1px solid var(--line); }

/* Kickers are label tape: black ink on a strip of lime. */
.p1-paper .kicker { display: table; margin-bottom: 18px; padding: 6px 9px 5px; color: var(--on-lime); background: var(--lime); font-weight: 500; line-height: 1.5; transform: rotate(-1.5deg); transform-origin: left center; }

.p1-paper .btn.solid { background: var(--ink); color: var(--bg); border: 1.5px solid var(--ink); }
.p1-paper .btn.solid:hover { background: var(--lime); color: var(--on-lime); border-color: var(--rule); box-shadow: 4px 4px 0 var(--shadow); }
.p1-paper .btn.line { color: var(--ink); border: 1.5px solid var(--rule); background: transparent; }
.p1-paper .btn.line:hover { background: var(--lime); color: var(--on-lime); box-shadow: 4px 4px 0 var(--shadow); }
.p1-paper .links { gap: 14px 24px; margin-top: 26px; }
.p1-paper .links a { color: var(--ink); border-bottom: 2px solid var(--rule); }
.p1-paper .links a:hover { background: var(--lime); color: var(--on-lime); border-color: var(--on-lime); }

/* Grid paper, like a cutting mat: a 24 px grid with a heavier line every five squares. */
.p1-paper .grid-bg:not(.p1-line)::before {
  background:
    linear-gradient(var(--mat-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--mat-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--mat-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--mat-minor) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: none; mask-image: none;
}
.p1-alt { background: var(--bg-2); }

/* A ruler along the bottom of the hero: a tick every 6 px, longer every 30, longest every 60. */
.p1-ruler::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none;
  background:
    linear-gradient(var(--rule), var(--rule)) left bottom / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 60px) left bottom / 100% 18px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 30px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 6px) left bottom / 100% 6px no-repeat; }

/* Every section: a title, at most three one-line statements, and a render. */
.p1-sec { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.p1-sec h2 { margin-bottom: 22px; }
.p1-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.p1-lines li { position: relative; padding-left: 34px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.4; color: var(--mute); }
.p1-lines li::before { content: "+"; position: absolute; left: 0; top: 0.1em; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--rule); background: var(--lime); color: var(--on-lime); font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1; }
.p1-fig { position: relative; margin: 0; }
.p1-fig img { display: block; width: 100%; height: auto; }

/* hero */
.p1-hero { border-top: 0; padding-bottom: clamp(64px, 9vw, 120px); }
.p1-paper .p1-hero { border-top: 0; }
.p1-hero h1 { font-size: clamp(44px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; font-stretch: 112%; margin: 0 0 28px; text-wrap: balance; }
.p1-hl { padding: 0 0.08em; margin: 0 -0.04em; background: linear-gradient(transparent 12%, var(--lime) 12%, var(--lime) 92%, transparent 92%); color: var(--on-lime); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.p1-hero .p1-lines li { color: var(--ink); }
.p1-hero .cta { margin-top: 34px; }

/* the exploded render, with leader lines out to the right */
.p1-exp { max-width: 560px; justify-self: center; width: 100%; }
.p1-callouts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.p1-callouts li { position: absolute; left: var(--x); right: 0; top: var(--y); display: flex; align-items: center; gap: 8px; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.p1-callouts li::before { content: ""; flex: 1; min-width: 12px; border-top: 1.5px solid var(--rule); }
.p1-callouts li::after { content: ""; order: -1; flex: none; width: 9px; height: 9px; margin-right: -8px; border: 1.5px solid var(--rule); border-radius: 50%; background: var(--lime); }

/* the three ring states */
.p1-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 20px); margin: 0; padding: 0; list-style: none; }
.p1-states li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.p1-states img { display: block; width: 100%; height: auto; }
.p1-states b { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }

/* The line: the bridge to the Golden Twin, and the one band that keeps the lab's dark look. */
.p1-paper .p1-line {
  --bg: #0E1013; --bg-2: #13161A; --ink: #EDEEE8; --mute: #A3A8AD; --line: #262B32; --rule: #EDEEE8; --lime: #F4CC64;
  color-scheme: dark; background: var(--bg-2); color: var(--ink); border-top: 0;
}
.p1-paper .p1-line .kicker { display: block; padding: 0; background: none; color: var(--mute); font-weight: 400; transform: none; margin-bottom: 16px; }
.p1-paper .p1-line .p1-lines li::before { border-color: var(--gold); background: none; color: var(--gold); }
.p1-paper .p1-line ::selection { background: var(--gold); color: #0E1013; }
.p1-paper .p1-line a:focus-visible { outline-color: var(--gold); }
.p1-paper .p1-line .links { flex-direction: column; align-items: flex-start; gap: 12px; }
.p1-paper .p1-line .links a { color: var(--ink); border-bottom: 1px solid #3A3A3C; background: none; }
.p1-paper .p1-line .links a:hover { color: var(--ink); border-color: var(--gold); }
.p1-line .p1-fig img { border: 1px solid var(--line); }

/* contact: one band of lime, ink on it. The same in light and dark mode. */
.p1-paper .contact { --ink: #16170F; --mute: #16170F; --rule: #16170F; --shadow: #16170F;
  background: repeating-linear-gradient(90deg, rgba(22, 23, 15, 0.07) 0 1px, transparent 1px 24px), repeating-linear-gradient(rgba(22, 23, 15, 0.07) 0 1px, transparent 1px 24px), var(--lime);
  color: var(--ink); border-top: 1.5px solid #16170F; }
.p1-paper .contact h2 { margin-bottom: 24px; }
.p1-paper .contact .p1-lines li::before { background: #FCFAF4; }
.p1-paper .contact ::selection { background: #16170F; color: var(--lime); }
.p1-paper .contact .btn.solid { color: var(--lime); }
.p1-paper .contact .btn.solid:hover, .p1-paper .contact .btn.line:hover { background: #FCFAF4; color: #16170F; }

/* jump bar */
.p1-jump { position: sticky; top: 64px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; padding: 10px var(--pad); border-bottom: 1.5px solid var(--rule); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); scrollbar-width: none; }
.p1-jump::-webkit-scrollbar { display: none; }
.p1-jump a { flex: none; padding: 8px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.p1-jump a:hover { color: var(--on-lime); background: var(--lime); }
.p1-jump + .band { border-top: 0; }
[id="inside"], [id="size"], [id="light"], [id="open"], [id="build"], [id="line"] { scroll-margin-top: 120px; }

@media (max-width: 900px) {
  .p1-sec { grid-template-columns: 1fr; }
  .p1-jump { top: 56px; }
}
@media (max-width: 560px) {
  .p1-callouts li { font-size: 9.5px; gap: 5px; letter-spacing: 0.02em; }
  .p1-states b { font-size: 9.5px; letter-spacing: 0.06em; }
}

/* a blank canvas: five ideas, as stickers on the mat */
.p1-canvas { display: grid; gap: clamp(28px, 3.5vw, 48px); }
.p1-canvas .p1-copy { max-width: 760px; }
.p1-ideas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; counter-reset: idea; }
.p1-ideas li { counter-increment: idea; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 22px; border: 1.5px solid var(--rule); background: var(--card); box-shadow: 5px 5px 0 var(--shadow); }
.p1-ideas li::before { content: "0" counter(idea); font-family: var(--mono); font-size: 11px; color: var(--mute); }
.p1-ideas li:nth-child(odd) { transform: rotate(-0.8deg); }
.p1-ideas li:nth-child(even) { transform: rotate(0.8deg); }
.p1-ideas b { font-size: 17px; line-height: 1.35; font-weight: 650; }
.p1-chip { align-self: flex-start; padding: 4px 8px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-lime); background: var(--lime); border: 1.5px solid var(--rule); }
[id="canvas"] { scroll-margin-top: 120px; }
@media (max-width: 1080px) { .p1-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .p1-ideas { grid-template-columns: 1fr; } .p1-ideas li { transform: none !important; } }

/* Drafting marks over the renders, in a maker's hand: dimensions, margin notes, tape and a title block.
   Every number comes from the OPD (accessories/interface.yaml and the model). */
.p1-drawn { position: relative; }
.p1-dim { position: absolute; left: var(--l); width: calc(var(--r) - var(--l)); top: var(--y); height: 0; border-top: 1.5px solid var(--rule); pointer-events: none; }
.p1-dim::before, .p1-dim::after { content: ""; position: absolute; top: -7px; height: 13px; border-left: 1.5px solid var(--rule); }
.p1-dim::before { left: 0; }
.p1-dim::after { right: 0; }
.p1-dim span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 2px 6px; border: 1.5px solid var(--rule); background: var(--lime); color: var(--on-lime); font-family: var(--mono); font-size: 11px; font-weight: 500; white-space: nowrap; }
.p1-dim.v { left: var(--x); top: var(--t); width: 0; height: calc(var(--b) - var(--t)); border-top: 0; border-left: 1.5px solid var(--rule); }
.p1-dim.v::before, .p1-dim.v::after { left: -7px; right: auto; top: auto; width: 13px; height: 0; border-left: 0; border-top: 1.5px solid var(--rule); }
.p1-dim.v::before { top: 0; }
.p1-dim.v::after { bottom: 0; }
.p1-dim.v span { left: 10px; top: 50%; transform: translateY(-50%); }
.p1-note { position: absolute; top: var(--y); font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: clamp(17px, 1.6vw, 23px); font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap; transform: translateY(-50%) rotate(-3deg); pointer-events: none; }
.p1-note.r { left: var(--x); }
.p1-note.l { right: calc(100% - var(--x)); }
.p1-note.c { left: var(--x); transform: translate(-50%, -50%) rotate(-3deg); }
.p1-tblock { position: absolute; left: 0; bottom: 3%; display: grid; border: 1.5px solid var(--rule); background: var(--card); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); transform: rotate(-1deg); }
.p1-tblock > * { padding: 4px 8px; }
.p1-tblock > * + * { border-top: 1px solid var(--rule); }
.p1-tblock b { background: var(--lime); color: var(--on-lime); font-weight: 500; }
.p1-taped::before, .p1-taped::after { content: ""; position: absolute; z-index: 1; top: -8px; width: 74px; height: 22px; background: rgba(217, 242, 74, 0.78); box-shadow: 0 1px 0 rgba(22, 23, 15, 0.12); pointer-events: none; }
.p1-taped::before { left: 6%; transform: rotate(-7deg); }
.p1-taped::after { right: 6%; transform: rotate(6deg); }
.p1-pair { display: grid; gap: clamp(8px, 1.5vw, 18px); }
.p1-pair figcaption { position: absolute; left: 4%; top: 6%; padding: 4px 8px; border: 1.5px solid var(--rule); background: var(--card); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 560px) {
  .p1-note { font-size: 14px; white-space: normal; }
  .p1-note.r { max-width: calc(100% - var(--x)); }
  .p1-note.l { max-width: var(--x); text-align: right; }
  .p1-dim span { font-size: 9.5px; padding: 1px 4px; }
  .p1-tblock { font-size: 8px; }
  .p1-taped::before, .p1-taped::after { width: 52px; height: 16px; }
}
/* a taped figure is a sheet of drawing paper stuck to the mat */
/* The sheet is drawn with box-shadows, not padding, so the overlays stay registered to the render. */
.p1-taped { margin: 22px; background: var(--card); box-shadow: 0 0 0 20px var(--card), 0 0 0 21.5px var(--rule), 5px 5px 0 21.5px var(--shadow); }
.p1-taped::before, .p1-taped::after { top: -30px; }

/* the parts firmware can drive, as label tape; and a concept image on each idea card */
.p1-parts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.p1-parts li { padding: 6px 10px; border: 1.5px solid var(--rule); background: var(--card); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.p1-parts li:nth-child(3n+1) { background: var(--lime); color: var(--on-lime); }
.p1-ideas li { padding-top: 12px; }
.p1-ideas img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1.5px solid var(--rule); }
.p1-ideas li::before { order: 1; margin-top: 2px; }
.p1-ideas li > .p1-chip { order: 2; }
.p1-ideas li > b { order: 3; }
.p1-phone { max-width: 300px; justify-self: center; width: 100%; }
.p1-phone img { border: 1.5px solid var(--rule); box-shadow: 5px 5px 0 var(--shadow); }