/* ============================================================
   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);

  --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-label:0.22em; --ls-data:0.04em;
  --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:linear-gradient(180deg,var(--ap-bg-anchor) 0%,var(--ap-bg-secondary) 100%);
  background-attachment:fixed;
  color:var(--text-primary);
  font-family:var(--font-display);
  font-size:var(--fs-body);
  line-height:var(--lh-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)}

/* corner-bracket viewfinder — same motif as the homepage hero */
.bracket{position:fixed;width:22px;height:22px;border:1.5px solid var(--ap-accent-bright);opacity:.3;pointer-events:none;z-index:5}
.bracket.tl{top:18px;left:18px;border-right:none;border-bottom:none}
.bracket.tr{top:18px;right:18px;border-left:none;border-bottom:none}
.bracket.bl{bottom:18px;left:18px;border-right:none;border-top:none}
.bracket.br{bottom:18px;right:18px;border-left:none;border-top:none}

.wrap{max-width:680px;margin:0 auto;padding:0 24px}

/* header */
.site-header{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:680px;margin:0 auto;padding:32px 24px 0}
.wordmark{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-primary);text-decoration:none;margin-right:-0.22em}
.wordmark:hover{text-shadow:none;color:var(--text-accent)}
.site-nav{display:flex;gap:clamp(14px,3vw,26px);flex-wrap:wrap}
.site-nav a{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:0.14em;color:var(--text-muted);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--text-accent);text-shadow:var(--glow-text-cyan)}

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

/* archive */
.archive{padding:56px 0 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 .intro{max-width:64ch;color:var(--text-primary)}
.archive .intro p{margin:0 0 18px}
.archive .intro strong{font-weight:var(--fw-medium)}

/* format filter */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 8px;padding:0;list-style:none}
.filters a{display:inline-block;padding:8px 14px;border:1px solid var(--line-divider);font-family:var(--font-display);font-size:var(--fs-micro);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:22px 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:2px 8px;font-family:var(--font-mono);font-size:var(--fs-micro);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 6px;font-size:var(--fs-lead);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:var(--fs-small);max-width:68ch}
.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:56px 0 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}
.note .body{font-size:1.0625rem;line-height:1.65}
.note .body p{margin:0 0 22px;max-width:68ch}
.note .body h2{margin:34px 0 12px;font-size:var(--fs-lead);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:68ch;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:30px 0;padding:4px 0 4px 20px;border-left:2px solid var(--ap-warm);font-style:normal;color:var(--text-primary)}
.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:44px 0 0;padding:22px;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 12px;max-width:68ch}
.disclaimer p:last-child{margin:0}
.disclaimer strong{color:var(--text-primary);font-weight:var(--fw-medium)}

/* footer */
.site-footer{max-width:680px;margin:0 auto;padding:44px 24px 64px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--text-muted);border-top:1px solid var(--line-hairline);margin-top:48px}
.site-footer a{color:var(--text-muted);text-decoration:none}
.site-footer 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}
  .site-header{flex-direction:column;align-items:flex-start;gap:14px}
  .note{padding-top:40px}
  .archive{padding-top:40px}
  .note .body{font-size:1rem}
}

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