/* Base and shared controls */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--text-base)/1.85 var(--font-body); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2377736b' opacity='.3' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button, input { border-radius: var(--radius); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--font-heading); font-weight: 500; line-height: 1.45; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; border: 1px solid var(--line); color: var(--ink); font-size: var(--text-sm); text-decoration: none; transition: border-color var(--ease), background var(--ease); }
.button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.button.primary:hover { filter: brightness(.93); }
.icon-button { width: 40px; height: 40px; flex: none; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 26px; line-height: 1; }
.eyebrow { font-size: .7rem; letter-spacing: .13em; color: var(--accent); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 20; background: var(--surface); padding: 12px; }
.skip-link:focus { top: 12px; }
/* Fixed table of contents */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: 40px 24px 24px; background: var(--paper-side); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 5; overflow-y: auto; }
.identity { display: flex; gap: 13px; align-items: center; text-decoration: none; }
.identity-mark { display: grid; place-items: center; width: 38px; height: 42px; border: 1px solid var(--accent); color: var(--accent); font: 23px var(--font-heading); }
.identity strong { display: block; font: 600 20px var(--font-heading); letter-spacing: .12em; }
.identity small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.sidebar-content { display: flex; flex: 1; flex-direction: column; }
.sidebar-label { margin: 48px 0 18px; font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.toc { display: grid; gap: 6px; }
.toc-link { display: flex; gap: 13px; padding: 12px 10px; border-left: 2px solid transparent; text-decoration: none; font-size: 13px; line-height: 1.5; }
.toc-index { color: var(--muted); font-size: 10px; padding-top: 3px; }
.toc-link small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.toc-link[aria-current="location"] { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent); }
.sidebar-footer { margin-top: auto; padding-top: 36px; display: grid; gap: 12px; }
.utility-link { text-decoration: none; font-size: 12px; }
.sidebar-footer > small { margin-top: 14px; font-size: 9px; line-height: 1.9; letter-spacing: .1em; color: var(--muted); }
.menu-toggle { display: none; }
/* Continuous document */
.main { margin-left: var(--sidebar-width); padding: 0 clamp(28px, 5vw, 88px); max-width: calc(var(--sidebar-width) + var(--content-width) + 176px); }
.page-intro { position: relative; padding: 64px 0 52px; border-bottom: 1px solid var(--line); }
.page-intro h1 { font-size: clamp(34px, 3.4vw, 54px); letter-spacing: .02em; margin: 26px 0 18px; }
.page-intro > p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.intro-link { display: inline-flex; align-items: center; gap: 30px; margin-top: 28px; color: var(--accent); font-size: 13px; text-decoration: none; }
.intro-note { position: absolute; right: 0; bottom: 56px; color: var(--muted); font: 13px var(--font-heading); }
.resume-section { padding: var(--space-6) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.section-heading { margin-bottom: 32px; }
.section-heading h2 { font-size: clamp(26px, 2.5vw, 34px); margin: 10px 0 14px; }
.section-lead { color: var(--muted); max-width: 680px; font-size: 14px; }
/* Profile: existing content, new layout */
.singu-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; }
.singu-photo-wrap { width: 132px; margin-bottom: 20px; }
.singu-photo-circle img { display: block; width: 132px; height: 158px; object-fit: cover; object-position: center 50%; border-radius: 2px; filter: saturate(.8); }
.singu-name { font: 26px var(--font-heading); }
.singu-name-sub { color: var(--muted); font-size: 11px; margin: 8px 0 24px; }
.singu-skill-group + .singu-skill-group { margin-top: 16px; }
.singu-group-label { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.singu-chips, .tags { display: flex; flex-wrap: wrap; gap: 7px; }
.singu-chip, .tag, .dr-tag { display: inline-block; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px; font-size: 11px; line-height: 1.7; }
.singu-quote { font: 20px/1.95 var(--font-heading); padding: 0 0 25px; }
.singu-quote span { display: block; }
.singu-quote em { color: var(--accent); font-style: normal; }
.singu-agent-entry { padding: 20px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 28px; }
.sae-title { font-size: 13px; }
.sae-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sae-qbtn { padding: 3px 0; margin-right: 10px; border: none; background: none; color: var(--accent); font-size: 11px; }
.sae-input-row { display: flex; border-top: 1px solid var(--line); padding-top: 8px; }
.sae-input { background: none; border: none; width: 100%; min-width: 0; font-size: 12px; }
.sae-send { border: none; background: none; color: var(--accent); font-size: 20px; }
.singu-ability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.singu-ab-title { font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.singu-ab-desc { color: var(--muted); font-size: 12px; }
/* Projects and document summaries */
.project-list { display: grid; gap: 0; }
.project { padding: 32px 0; border-top: 1px solid var(--line); }
.project:first-child { padding-top: 0; border-top: 0; }
.item-meta { display: flex; gap: 12px; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.item-meta .item-number { font-family: var(--font-heading); color: var(--accent); font-size: 18px; margin-right: 6px; }
.project h3 { font-size: 20px; font-weight: 500; line-height: 1.65; margin-bottom: 14px; }
.project-description { max-width: 760px; font-size: 14px; }
.project-stack { margin: 14px 0; color: var(--muted); font-size: 12px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.pending { background: var(--paper-side); padding: 20px; margin-top: 20px; border: 1px dashed var(--line); }
.pending h3 { font-size: 16px; }
.pending-note, .sample-label { color: var(--accent); font-size: 11px; }
.document-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 32px; }
.document-card { display: flex; flex-direction: column; padding: 26px 0; border-top: 1px solid var(--line); }
.document-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 10px; }
.document-card > p { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.document-card .actions { margin-top: auto; padding-top: 22px; }
/* Existing experience content */
.fusion-item { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 24px; padding: 30px 0; border-top: 1px solid var(--line); }
.fusion-item:first-child { border-top: 0; padding-top: 0; }
.fusion-time { color: var(--accent); font-size: 13px; }
.fusion-role { color: var(--muted); font-size: 12px; margin-top: 10px; }
.fusion-company { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.fusion-summary, .fusion-detail { font-size: 13px; }
.fusion-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.fusion-tag { font-size: 11px; color: var(--muted); }
.fusion-tag + .fusion-tag::before { content: "/"; margin-right: 7px; color: var(--line); }
.fusion-detail { color: var(--muted); }
.fusion-metrics { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.fusion-metric-num { display: block; font: 24px/1.5 var(--font-heading); }
.fusion-metric-label { display: block; color: var(--muted); font-size: 10px; }
/* Article list and contact */
.article-row { border-top: 1px solid var(--line); padding: 25px 0; }
.article-open { border: 0; background: none; color: var(--ink); text-align: left; padding: 0; width: 100%; }
.article-open:hover h3 { color: var(--accent); }
.article-row h3 { font-size: 17px; font-weight: 500; line-height: 1.7; }
.article-row .summary { color: var(--muted); font-size: 13px; margin: 10px 0 14px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 10px; color: var(--muted); }
.article-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; }
.text-link { border: 0; padding: 0; background: none; color: var(--accent); font-size: 12px; text-decoration: none; }
.contact-section { padding: 64px 0 24px; }
.contact-section h2 { font-size: 30px; margin: 14px 0; }
.contact-section > p:not(.eyebrow) { font-size: 13px; color: var(--muted); }
.contact-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 25px; }
.contact-links a { font-size: 12px; }
.contact-section .footer-note { margin-top: 64px; font-size: 10px; }
/* Shared accessible right-side dialog */
.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(var(--drawer-width), 94vw); max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; border-left: 1px solid var(--line); color: var(--ink); background: var(--paper); box-shadow: -16px 0 60px #29282418; }
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in var(--ease); }
.drawer::backdrop { background: #29282445; }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-header h2 { font-size: 23px; margin-top: 7px; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 30px 32px; overflow-wrap: anywhere; }
.drawer-body h2 { font-size: 22px; margin: 30px 0 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.drawer-body h3 { font-size: 15px; margin: 24px 0 10px; }
.drawer-body p, .drawer-body ul, .drawer-body blockquote { margin: 0 0 16px; font-size: 14px; }
.drawer-body ul { padding-left: 22px; }
.drawer-body blockquote { border-left: 2px solid var(--accent); padding-left: 18px; color: var(--muted); margin-left: 0; }
.drawer-body img { display: block; margin: 18px auto 28px; border: 1px solid var(--line); background: #fff; }
.dr-tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.drawer-notice, .fd-placeholder-note { padding: 14px 18px; background: var(--paper-side); border-left: 2px solid var(--accent); color: var(--muted); font-size: 12px; margin-bottom: 25px; }
.drawer-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--line); font-size: 12px; flex: none; }
.reader-nav { display: flex; gap: 10px; }
[hidden] { display: none !important; }
.chat-drawer { width: min(460px, 94vw); }
.chat-messages { overflow-y: auto; flex: 1; min-height: 0; padding: 24px; }
.message { white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; font-size: 13px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.message-user { background: var(--accent-soft); margin-left: 32px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px; }
.chat-quick .button { font-size: 11px; padding: 5px 8px; }
.chat-form { display: flex; gap: 10px; padding: 16px 24px 24px; border-top: 1px solid var(--line); }
.chat-form input { background: var(--surface); border: 1px solid var(--line); padding: 10px; min-width: 0; flex: 1; font-size: 13px; }
.chat-form .button { flex: none; }
.noscript-notice { margin: 30px; padding: 20px; border: 1px solid var(--accent); }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* Responsive layout */
@media (min-width: 1500px) { .main { margin-right: auto; } }
@media (max-width: 1100px) { :root { --sidebar-width: 220px; } .sidebar { padding-inline: 18px; } .singu-layout { grid-template-columns: 175px minmax(0,1fr); gap: 28px; } .singu-quote { font-size: 17px; } .intro-note { display: none; } }
@media (max-width: 820px) {
 html { scroll-padding-top: 90px; }
 .sidebar { inset: 0 0 auto; width: 100%; padding: 14px 22px; overflow: visible; display: block; border-right: 0; border-bottom: 1px solid var(--line); }
 .identity { display: inline-flex; }
 .identity-mark { width: 30px; height: 34px; font-size: 19px; }
 .identity strong { font-size: 17px; }.identity small { font-size: 10px; margin-top: 0; }
 .menu-toggle { display: flex; position: absolute; right: 22px; top: 22px; gap: 18px; background: none; border: 0; color: var(--ink); font-size: 13px; }
 .sidebar-content { display: none; max-height: calc(100dvh - 78px); overflow-y: auto; padding-bottom: 15px; }
 .sidebar.is-expanded .sidebar-content { display: flex; }
 .sidebar-label { margin: 20px 0 12px; }.toc { gap: 0; }.toc-link { padding: 10px; }
 .sidebar-footer { padding-top: 20px; grid-template-columns: 1fr 1fr; align-items: center; }.sidebar-footer small { display: none; }
 .main { margin-left: 0; padding: 72px 26px 0; max-width: none; }
 .page-intro { padding: 44px 0 36px; }.resume-section { padding: 48px 0; scroll-margin-top: 14px; }
 .singu-layout { grid-template-columns: 175px minmax(0,1fr); }.singu-ability-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
 .main { padding-inline: 22px; }.page-intro h1 { font-size: 35px; }.section-heading h2 { font-size: 28px; }
 .singu-layout { display: flex; flex-direction: column; gap: 26px; }.singu-left { display: grid; grid-template-columns: 94px 1fr; gap: 0 20px; align-items: center; }
 .singu-photo-wrap { width: 94px; margin: 0; }.singu-photo-circle img { width: 94px; height: 112px; }
 .singu-name-sub { margin-bottom: 0; }.singu-skill-groups { grid-column: 1 / -1; margin-top: 20px; }.singu-skill-group { display: grid; grid-template-columns: 90px 1fr; gap: 6px; }.singu-skill-group + .singu-skill-group { margin-top: 9px; }
 .singu-ability-grid { grid-template-columns: 1fr 1fr; gap: 18px; }.singu-quote { font-size: 17px; }
 .document-list { grid-template-columns: 1fr; }.project h3 { font-size: 18px; }.fusion-item { grid-template-columns: 1fr; gap: 14px; }.fusion-left { display: flex; justify-content: space-between; gap: 15px; }.fusion-time br { display: none; }.fusion-role { margin: 0; text-align: right; }.fusion-role br { display: none; }
 .drawer, .chat-drawer { width: 100%; }.drawer-header { padding: 20px; }.drawer-body { padding: 22px; }.drawer-header h2 { font-size: 20px; }.drawer-footer { padding: 14px 20px; }.chat-form { padding: 16px; }.chat-quick { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.drawer[open] { animation: none; } * { transition: none !important; } }
@media print { .sidebar, .page-intro .intro-link, .singu-agent-entry, .actions, dialog, .skip-link { display: none !important; }.main { margin: 0; padding: 0; max-width: none; } body { background: #fff; }.resume-section { padding: 24px 0; }.project, .document-card, .fusion-item, .article-row { break-inside: avoid; } }

/* Cosmic notebook system — canonical overrides for the new four-view experience */
html{scroll-behavior:auto}
body{background:var(--paper);font-size:var(--text-base);line-height:1.75}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 87% 34%,#eecfb324,transparent 45%),radial-gradient(ellipse at 40% 10%,#fffdf8,transparent 50%)}
.sidebar{background:rgba(247,244,235,.92);border-right:1px solid var(--line);padding-top:42px}
.identity-mark{border:0;position:relative;font-size:34px;color:var(--accent)}
.identity-mark::before{content:"✧";position:absolute;inset:-10px;border:1px solid #b2995d90;border-radius:50%;font-size:40px;text-align:center;opacity:.7}
.identity strong{font-family:var(--font-heading);letter-spacing:.16em}
.sidebar-label,.eyebrow,.toc-index,.item-number,.item-meta{font-family:var(--font-mono);letter-spacing:.09em}
.toc{gap:12px}.toc-link{font-size:16px;font-weight:500;border-radius:10px;padding:14px 15px}
.toc-link[aria-current="page"]{background:#f3e5da;border-left:3px solid var(--accent);color:var(--accent)}
.main{max-width:none;margin-left:var(--sidebar-width);padding:0 clamp(24px,4.5vw,84px);min-height:100vh}
.resume-section{border:0;padding:38px 0 70px;max-width:1240px;margin:auto}
.resume-section[hidden]{display:none!important}
.section-heading{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:42px}
.section-heading h2{font-size:clamp(30px,3.3vw,54px);font-weight:500;letter-spacing:.04em;max-width:900px}
.section-heading .eyebrow{color:var(--ochre);font-size:12px}
.project,.document-card,.singu-ab-card,.article-row{border-radius:var(--radius);background:rgba(255,251,244,.76);backdrop-filter:blur(12px);border:1px solid #b2995d45;box-shadow:0 10px 32px #65472e0b;position:relative}
.project,.document-card{transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease)}
.project:has(button):hover,.document-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 14px 36px #8d58371c}
.project:has(button):focus-within,.document-card:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.project.is-orbiting::after,.document-card.is-orbiting::after{content:"";position:absolute;inset:-5px;pointer-events:none;border:1px solid var(--gold);border-radius:50%;animation:orbit-flash .6s ease-out forwards}
@keyframes orbit-flash{0%{opacity:0;transform:rotate(-8deg) scale(.97)}35%{opacity:1}100%{opacity:0;transform:rotate(8deg) scale(1.03)}}
.singu-photo-circle img{border-radius:12px}
.singu-agent-entry{border-radius:12px;border-color:var(--gold);background:#fffaf0d9;padding:24px}
.related-docs{margin-top:54px}.related-docs h3{font:500 23px var(--font-heading);margin-bottom:18px}
.drawer{background:#fffcf6}
.contact-section{padding:24px 0 40px}
@media(max-width:820px){.main{margin-left:0;padding:0 20px}.resume-section{padding:26px 0 44px}.section-heading{margin-bottom:25px}.section-heading h2{font-size:clamp(27px,7vw,36px)}.sidebar{background:var(--paper-side)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Content groups and project previews */
.group-heading{font:500 28px var(--font-heading);margin:38px 0 20px;padding-left:18px;border-left:3px solid var(--accent)}
.project-cover{width:100%;max-height:220px;object-fit:cover;border-radius:9px;display:block;margin-bottom:20px}
.project-cover-placeholder{min-height:148px;display:flex;align-items:center;justify-content:space-between;padding:22px;background:radial-gradient(circle at 72% 38%,#d6a26d25,transparent 45%),linear-gradient(130deg,#fffdf8,#f0e7db);color:var(--ochre);border:1px solid #b2995d38}
.project-cover-placeholder span{font-size:64px;color:var(--gold);font-family:var(--font-heading)}.project-cover-placeholder small{font:11px var(--font-mono);letter-spacing:.09em}
.learning-notes{padding:28px 0}.learning-notes h3,.singu-skill-groups h3{font:500 22px var(--font-heading);margin:14px 0}
.learning-notes p,.singu-skill-groups p{margin:8px 0;color:var(--muted)}
.singu-ab-card{padding:20px!important}.singu-ab-card h3{font:500 20px var(--font-heading);margin-bottom:9px}.singu-ab-card p{font-size:14px;color:var(--muted)}
.fusion-right .actions{flex-wrap:wrap}.fusion-right .actions .button{font-size:12px}.project-detail-meta{color:var(--ochre);margin-bottom:14px}
.project-story p{margin:16px 0;line-height:1.8}.project-story strong{color:var(--accent)}
@media(max-width:820px){.group-heading{font-size:23px}.project-cover-placeholder{min-height:110px}.singu-layout{display:block}.singu-left{margin-bottom:25px}}

/* Hero illustration from the confirmed notebook reference */
.about-section{position:relative;isolation:isolate}
.about-section .section-heading{position:relative;z-index:1}
.about-section .section-heading h2{max-width:57%;font-size:clamp(34px,4vw,62px);line-height:1.5}
.cosmic-orbits{position:absolute;z-index:-1;right:-5%;top:45px;width:min(48vw,570px);opacity:.88;pointer-events:none;user-select:none}
.about-section .singu-layout{position:relative;z-index:1;margin-top:175px}
@media(max-width:1100px){.cosmic-orbits{width:45%;top:90px}.about-section .singu-layout{margin-top:80px}}
@media(max-width:820px){.cosmic-orbits{width:52%;top:20px;opacity:.34}.about-section .section-heading h2{max-width:100%}.about-section .singu-layout{margin-top:28px}}