/* ============================================================
   Architect Protocol — notes section
   Tokens mirror index.html. Fonts are self-hosted (CSP: font-src 'self').
   ============================================================ */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/09f8dd94-3493-4ce9-89ca-f5d94a62aa64.woff2") format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/09f8dd94-3493-4ce9-89ca-f5d94a62aa64.woff2") format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/09f8dd94-3493-4ce9-89ca-f5d94a62aa64.woff2") format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/e64f73f4-ccd9-4614-b8cd-4286c5774edd.woff2") format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/4c4d8cab-b0a3-4d7f-b89e-08eedd28c4b0.woff2") format('woff2')}

:root{
  --ap-bg-anchor:#0A1929;
  --ap-bg-secondary:#1A2F47;
  --ap-accent:#4A9FB8;
  --ap-accent-bright:#66C7DB;
  --ap-accent-soft:#B8E5EC;
  --ap-warm:#C8767D;
  --ap-neutral-light:#DCE3E8;
  --ap-neutral-mid:#A9B6C3;
  --ap-navy-900:#06101c;
  --ap-hairline:rgba(184,229,236,0.14);
  --ap-neutral-08:rgba(220,227,232,0.08);

  --surface-page:var(--ap-bg-anchor);
  --surface-raised:var(--ap-bg-secondary);
  --surface-panel:rgba(26,47,71,0.55);
  --text-primary:var(--ap-neutral-light);
  --text-muted:var(--ap-neutral-mid);
  --text-accent:var(--ap-accent-bright);
  --text-emphasis:var(--ap-warm);
  --line-hairline:var(--ap-hairline);
  --line-divider:rgba(220,227,232,0.16);
  /* aliases used by the shared header/footer SVG marks copied from index.html */
  --accent:var(--ap-accent);
  --accent-glow:var(--ap-accent-bright);

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;
  --fs-display:2rem; --fs-lead:1.25rem; --fs-body:1rem;
  --fs-small:0.875rem; --fs-label:0.75rem; --fs-micro:0.6875rem;
  --lh-snug:1.25; --lh-body:1.6;
  --ls-body:0.005em;
  --ls-label:0.22em; --ls-data:0.04em;
  --hex-line:rgba(184,229,236,0.05);
  --hex-size:56px;
  --bg-gradient:radial-gradient(120% 90% at 50% 8%,var(--ap-bg-secondary) 0%,var(--ap-bg-anchor) 52%,var(--ap-navy-900) 100%);
  --bg-halo:radial-gradient(55% 45% at 50% 22%,rgba(74,159,184,0.22) 0%,rgba(74,159,184,0.07) 45%,transparent 74%);
  --glow-text-cyan:0 0 14px rgba(102,199,219,0.45);
  --shadow-panel:0 24px 80px -24px rgba(3,8,16,0.8);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:180ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ap-bg-anchor);
  color:var(--text-primary);
  font-family:var(--font-display);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ap-accent);color:var(--ap-bg-anchor)}
a{color:var(--text-accent);text-underline-offset:3px}
a:hover{text-shadow:var(--glow-text-cyan)}
:focus-visible{outline:1px solid var(--text-accent);outline-offset:2px}

.ap-skip{position:absolute;left:-9999px}
.ap-skip:focus{left:16px;top:16px;z-index:60;background:var(--surface-raised);padding:10px 14px;color:var(--text-accent)}

/* ===== page background — same three layers as index.html:
   radial gradient base, hexagonal grid, cyan halo. Fixed, so it stays
   put while a long note scrolls. ===== */
.ap-page-bg{position:fixed;inset:0;z-index:-1;background:var(--bg-gradient);overflow:hidden;pointer-events:none}
.ap-page-bg::before{content:"";position:absolute;inset:-10%;
  background-image:
    linear-gradient(150deg,transparent 49.6%,var(--hex-line) 49.6%,var(--hex-line) 50.4%,transparent 50.4%),
    linear-gradient(30deg,transparent 49.6%,var(--hex-line) 49.6%,var(--hex-line) 50.4%,transparent 50.4%),
    linear-gradient(90deg,transparent 49.6%,var(--hex-line) 49.6%,var(--hex-line) 50.4%,transparent 50.4%);
  background-size:var(--hex-size) calc(var(--hex-size) * 1.732);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 30%,#000 35%,transparent 85%);
          mask-image:radial-gradient(120% 100% at 50% 30%,#000 35%,transparent 85%);
  opacity:.9}
.ap-page-bg::after{content:"";position:absolute;inset:0;background:var(--bg-halo)}

/* corner-bracket viewfinder — same motif as the homepage hero */
.bracket{position:fixed;width:38px;height:38px;border:1px solid var(--ap-accent-bright);opacity:.28;pointer-events:none;z-index:5}
.bracket.tl{top:clamp(16px,4vw,56px);left:clamp(16px,4vw,64px);border-right:none;border-bottom:none}
.bracket.tr{top:clamp(16px,4vw,56px);right:clamp(16px,4vw,64px);border-left:none;border-bottom:none}
.bracket.bl{bottom:clamp(16px,4vw,56px);left:clamp(16px,4vw,64px);border-right:none;border-top:none}
.bracket.br{bottom:clamp(16px,4vw,56px);right:clamp(16px,4vw,64px);border-left:none;border-top:none}

.wrap{max-width:720px;margin:0 auto;padding-left:clamp(20px,5vw,32px);padding-right:clamp(20px,5vw,32px)}

/* ===== header — mirrors index.html chrome ===== */
.ap-hdr{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:30px clamp(20px,5vw,64px) 0}
.ap-hdr-mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;user-select:none}
.ap-hdr-mark svg{display:block;flex:none}
.ap-hdr-mark span{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:0.6875rem;
  text-transform:uppercase;letter-spacing:0.32em;color:var(--text-primary);margin-right:-0.32em}
.ap-hdr-mark:hover{text-shadow:none}
.ap-hdr-nav{display:inline-flex;align-items:center;gap:clamp(18px,3vw,36px)}
.ap-hdr-nav a{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-muted);text-decoration:none;
  white-space:nowrap;transition:color var(--dur-fast) var(--ease-out)}
.ap-hdr-nav a:hover{color:var(--text-accent);text-shadow:var(--glow-text-cyan)}
.ap-hdr-nav a[aria-current]{color:var(--text-accent);text-shadow:var(--glow-text-cyan)}

/* ===== mobile menu — same behaviour and motif as the homepage ===== */
.ap-mnav-btn{position:relative;background:none;border:1px solid var(--line-divider);padding:8px 9px;
  cursor:pointer;color:var(--ap-accent);display:none;align-items:center;justify-content:center;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.ap-mnav-btn:hover,.ap-mnav-btn:focus-visible{color:var(--text-accent);border-color:rgba(74,159,184,.4)}
.ap-mnav-btn svg{display:block;flex:none}
/* 44x44 touch target per WCAG 2.5.5, without changing the visual box */
.ap-mnav-btn::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.ap-mnav-btn .ap-mnav-close{display:none}
.ap-mnav-btn[aria-expanded="true"] .ap-mnav-open{display:none}
.ap-mnav-btn[aria-expanded="true"] .ap-mnav-close{display:block}
.ap-mnav{position:absolute;top:100%;right:clamp(20px,5vw,64px);margin-top:14px;min-width:210px;
  display:flex;flex-direction:column;background:rgba(10,25,41,0.94);border:1px solid var(--line-hairline);
  box-shadow:var(--shadow-panel);z-index:40;padding:6px 0}
.ap-mnav[hidden]{display:none}
.ap-mnav a{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-muted);text-decoration:none;padding:13px 20px}
.ap-mnav a+a{border-top:1px solid var(--ap-neutral-08)}
.ap-mnav a:hover,.ap-mnav a:focus-visible{color:var(--text-accent);text-shadow:var(--glow-text-cyan);background:rgba(74,159,184,.12)}
.ap-mnav .ap-mnav-cta{color:var(--text-accent);text-shadow:var(--glow-text-cyan)}
.ap-mnav-fr{position:absolute;width:7px;height:7px;border:1px solid rgba(74,159,184,.4);pointer-events:none}
.ap-mnav-fr.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.ap-mnav-fr.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.ap-mnav-fr.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.ap-mnav-fr.br{bottom:-1px;right:-1px;border-left:none;border-top:none}
@media (max-width:820px){
  .ap-hdr-nav{display:none}
  .ap-mnav-btn{display:inline-flex}
}
/* no-JS: the menu is simply always open, so navigation never depends on script */
html:not(.js) .ap-mnav-btn{display:none}
html:not(.js) .ap-mnav[hidden]{display:flex}
@media (min-width:821px){ html:not(.js) .ap-mnav[hidden]{display:none} }

/* shared meta line */
.meta{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}

/* archive */
.archive{padding-top:clamp(36px,7vw,56px);padding-bottom:8px}
.archive h1{font-size:clamp(1.9rem,5vw,var(--fs-display));font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:-0.01em;margin:12px 0 18px}
.archive .lede{margin:0;max-width:56ch;color:var(--text-muted);font:var(--fw-regular) var(--fs-lead)/var(--lh-snug) var(--font-display)}

/* Secondary. Sits under the entries, visually quieter — it explains the
   formats without competing with the writing people came for. */
.about-formats{margin:52px 0 0;padding:0}
.about-formats h2{margin:0 0 14px;font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-regular)}
.about-formats p{margin:0 0 18px;max-width:62ch;font-size:1rem;color:var(--text-muted);line-height:1.65}
.about-formats strong{color:var(--text-primary);font-weight:var(--fw-medium)}
.about-formats blockquote{margin:18px 0;padding:2px 0 2px 18px;border-left:2px solid var(--ap-warm);
  font-size:var(--fs-small);color:var(--text-primary)}
.about-formats blockquote p{margin:0;color:var(--text-primary)}

/* format filter */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 8px;padding:0;list-style:none}
.filters a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid var(--line-divider);font-family:var(--font-display);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);text-decoration:none;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.filters a:hover{color:var(--text-accent);border-color:rgba(74,159,184,.4);text-shadow:none}
.filters a[aria-current="page"]{color:var(--text-accent);border-color:rgba(74,159,184,.4)}

/* entry list */
.entries{list-style:none;margin:26px 0 0;padding:0}
.entries li{padding:26px 0;border-top:1px solid var(--line-hairline)}
.entries li:last-child{border-bottom:1px solid var(--line-hairline)}
.entries .row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.entries .tag{border:1px solid var(--line-divider);padding:3px 9px;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.entries .tag.discovery{color:var(--ap-accent-soft);border-color:rgba(74,159,184,.4)}
.entries h2{margin:0 0 8px;font-size:clamp(1.25rem,1.15rem + 0.4vw,1.4rem);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.entries h2 a{color:var(--text-primary);text-decoration:none}
.entries h2 a:hover{color:var(--text-accent)}
.entries p{margin:0;color:var(--text-muted);font-size:1rem;line-height:1.6;max-width:60ch;text-wrap:pretty}
.empty{margin:26px 0;padding:22px;border:1px solid var(--line-hairline);color:var(--text-muted);font-size:var(--fs-small)}

/* single entry */
.note{padding-top:clamp(36px,7vw,56px);padding-bottom:8px}
.note h1{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:-0.01em;margin:14px 0 26px;max-width:22ch;text-wrap:balance}
.note .body{font-size:clamp(1.125rem,1.05rem + 0.4vw,1.25rem);line-height:1.75;letter-spacing:var(--ls-body)}
.note .body p{margin:0 0 26px;max-width:62ch;text-wrap:pretty}
.note .body h2{margin:38px 0 14px;font-size:clamp(1.25rem,1.15rem + 0.4vw,1.4rem);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.note .body strong{color:var(--text-primary);font-weight:var(--fw-medium)}
.note .body ul,.note .body ol{max-width:62ch;padding-left:1.2em}
.note .body li{margin:0 0 8px}
/* data always mono, per the type rule */
.note .body code,.note .body .data{font-family:var(--font-mono);color:var(--text-accent);font-size:.92em;letter-spacing:var(--ls-data)}
/* the single rose-gold emphasis point — never on data */
.note .body blockquote{margin:34px 0;padding:6px 0 6px 22px;border-left:2px solid var(--ap-warm);font-style:normal;color:var(--text-primary);font-size:clamp(1.125rem,1.05rem + 0.4vw,1.25rem);line-height:1.55}
.note .body blockquote p{margin:0}
.note .body hr{border:none;border-top:1px solid var(--line-hairline);margin:38px 0}

/* disclaimer — travels with every entry, so extracted passages keep it */
.disclaimer{margin:48px 0 0;padding:24px;border:1px solid var(--line-hairline);background:var(--surface-panel);font-size:var(--fs-small);color:var(--text-muted);position:relative}
.disclaimer::before{content:'BEFORE YOU ACT ON THIS';position:absolute;top:-9px;left:16px;background:var(--ap-bg-anchor);padding:0 8px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--text-muted)}
.disclaimer p{margin:0 0 14px;max-width:62ch;font-size:1rem;line-height:1.65}
.disclaimer p:last-child{margin:0}
.disclaimer strong{color:var(--text-primary);font-weight:var(--fw-medium)}

/* ===== footer — mirrors index.html, carries the FTC disclosure ===== */
.ap-footer{position:relative;margin-top:64px;background:var(--surface-page);
  border-top:1px solid var(--line-hairline);padding:clamp(44px,7vw,76px) clamp(20px,5vw,64px) clamp(56px,9vw,84px)}
.ap-footer-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.ap-footer-mark{display:inline-flex;align-items:center;gap:10px}
.ap-footer-mark svg{display:block;flex:none}
.ap-footer-mark span{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:0.28em;color:var(--text-muted)}
.ap-disclosure{margin:0;max-width:62ch;font-size:var(--fs-small);line-height:1.55;color:var(--text-muted)}
.ap-disclosure b{color:var(--text-primary);font-weight:var(--fw-medium)}
.ap-fineprint{margin:0;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--text-muted)}
.ap-fineprint a{color:inherit;text-decoration:underline}
.ap-fineprint a:hover{color:var(--text-accent);text-shadow:none}

@media (max-width:520px){
  .bracket{width:14px;height:14px}
  .bracket.tl,.bracket.tr{top:12px}
  .bracket.bl,.bracket.br{bottom:12px}
  .bracket.tl,.bracket.bl{left:12px}
  .bracket.tr,.bracket.br{right:12px}



}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   MailerLite embed — overrides their injected defaults.
   !important is required: universal.js writes scoped styles
   after ours, so ordinary specificity loses.
   ============================================================ */
.subscribe{margin:52px 0 0;padding:28px 24px;border:1px solid var(--line-hairline);
  background:var(--surface-panel);position:relative}
.subscribe::before{content:'SUBSCRIBE';position:absolute;top:-9px;left:18px;
  background:var(--ap-bg-anchor);padding:0 8px;font-family:var(--font-mono);
  font-size:var(--fs-micro);letter-spacing:.12em;color:var(--text-muted)}

/* container chrome MailerLite ships — strip it back to our panel */
.ml-embedded,
.ml-embedded .ml-form-embedContainer,
.ml-embedded .ml-form-embedWrapper,
.ml-embedded .ml-form-embedBody,
.ml-embedded .ml-form-embedBodyDefault,
.ml-embedded .ml-form-successBody{
  background:transparent!important;border:none!important;box-shadow:none!important;
  padding:0!important;margin:0!important;max-width:none!important;width:100%!important;
  font-family:var(--font-display)!important}

.ml-embedded *{font-family:var(--font-display)!important;box-sizing:border-box}
.ml-embedded .ml-form-embedContent,
.ml-embedded .ml-form-successContent{color:var(--text-primary)!important}
.ml-embedded .ml-form-embedContent h4,
.ml-embedded .ml-form-successContent h4{color:var(--text-primary)!important;
  font-weight:var(--fw-medium)!important;font-size:clamp(1.25rem,1.15rem + 0.4vw,1.4rem)!important;
  line-height:var(--lh-snug)!important;margin:0 0 10px!important}
.ml-embedded .ml-form-embedContent p,
.ml-embedded .ml-form-successContent p{color:var(--text-muted)!important;
  font-size:1rem!important;line-height:1.6!important;margin:0 0 14px!important}

/* inputs */
.ml-embedded input[type=email],
.ml-embedded input[type=text],
.ml-embedded .form-control{
  background:var(--ap-bg-secondary)!important;color:var(--text-primary)!important;
  border:1px solid var(--line-divider)!important;border-radius:0!important;
  height:52px!important;padding:0 16px!important;font-size:1rem!important;
  font-family:var(--font-display)!important;width:100%!important;box-shadow:none!important}
.ml-embedded input::placeholder{color:var(--text-muted)!important;opacity:1}
.ml-embedded input:focus,.ml-embedded .form-control:focus{
  border-color:var(--ap-accent)!important;outline:1px solid var(--text-accent)!important;outline-offset:1px}
.ml-embedded .ml-form-fieldRow{margin:0 0 12px!important;padding:0!important}

/* button */
.ml-embedded button,
.ml-embedded .ml-form-embedSubmit button,
.ml-embedded button.primary{
  background:var(--ap-accent)!important;color:var(--ap-bg-anchor)!important;
  border:none!important;border-radius:0!important;height:52px!important;
  padding:0 24px!important;width:100%!important;cursor:pointer!important;
  font-family:var(--font-display)!important;font-weight:var(--fw-medium)!important;
  font-size:var(--fs-label)!important;text-transform:uppercase!important;
  letter-spacing:var(--ls-label)!important;
  transition:background var(--dur-fast) var(--ease-out)!important}
.ml-embedded button:hover,
.ml-embedded .ml-form-embedSubmit button:hover,
.ml-embedded button.primary:hover{background:var(--ap-accent-bright)!important;color:var(--ap-bg-anchor)!important}
.ml-embedded button:focus-visible{outline:2px solid var(--text-accent)!important;outline-offset:2px}
.ml-embedded .ml-form-embedSubmit{margin:0!important}
.ml-embedded .ml-form-embedSubmit button.loading{background:var(--ap-accent)!important}

/* privacy / permissions text — renders black by default */
.ml-embedded .ml-form-embedPermissions,
.ml-embedded .ml-form-embedPermissions *,
.ml-embedded .ml-form-embedPermissionsContent,
.ml-embedded .ml-form-embedPermissionsContent *,
.ml-embedded .ml-form-recaptcha ~ *,
.ml-embedded .ml-form-embedMailerLite,
.ml-embedded .ml-form-embedMailerLite *{
  color:#586878!important;font-size:var(--fs-small)!important;line-height:1.55!important}
.ml-embedded .ml-form-embedPermissions a,
.ml-embedded .ml-form-embedMailerLite a{color:var(--ap-accent)!important;text-decoration:underline!important}

/* validation + success */
.ml-embedded .ml-error input,.ml-embedded input.ml-error{border-color:var(--ap-warm)!important}
.ml-embedded .ml-validation-error-text,.ml-embedded .ml-form-embedSubmitLoad ~ span{color:var(--ap-warm)!important}
.ml-embedded img{max-width:100%;height:auto}