/* The house's readers share one quiet, untextured ivory and North Sea ink. */
.room-drawer[data-folio=content],
html[data-page=project][data-mode=personal] .article-shell,
html[data-page=writing] .article-shell{
  --paper:#f3efe6;--ink:#14263c;--muted:#465466;--accent:#76502f;
  --rule:#c8c5ba;--edge:#a9a294;--surface:#eae5da;--frame:#e8e5dc;
  background:var(--paper);color:var(--ink);color-scheme:light;
  border-color:#d4cec1;
}
.room-drawer[data-folio=content]{
  width:min(1140px,calc(100% - 64px));
  max-height:calc(100dvh - 56px);
  box-shadow:0 24px 90px #06101d66,0 2px 8px #06101d33;
  animation:none!important;
}
.room-drawer[data-folio=content]::backdrop{background:#09152291;backdrop-filter:blur(3px)}
.room-drawer[data-folio=content] .room-drawer-header{
  padding:17px 44px;min-height:70px;align-items:center;
  border-bottom-color:var(--rule);background:var(--paper);
}
.room-drawer[data-folio=content] .room-drawer-header>div{min-width:0}
/* The content has the visible title. This title still names the native dialog. */
.room-drawer[data-folio=content] [data-room-panel-title]{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.room-drawer[data-folio=content] [data-room-panel-caption]{
  color:var(--muted);font-size:11px;letter-spacing:.1em;line-height:1.6;
}
.room-drawer[data-folio=content] .room-close{
  color:var(--ink);border:1px solid var(--rule);min-height:44px;
  border-radius:2px;background:transparent;
}
.room-drawer[data-folio=content] .room-close:hover{background:var(--surface);border-color:var(--edge)}
.room-drawer[data-folio=content] :is(button,a):focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;
}
.room-drawer[data-folio=content] .shell{width:calc(100% - 88px)}

/* A clear identity, followed by two readable parts of the same story. */
.room-drawer[data-folio=content] .about-section{
  display:grid;grid-template-columns:.7fr 1.3fr;align-items:start;
  gap:44px;padding-block:34px 40px;border:0;
}
.room-drawer[data-folio=content] .identity{display:block}
.room-drawer[data-folio=content] .identity .eyebrow{color:var(--accent);font-size:11px;letter-spacing:.1em}
.room-drawer[data-folio=content] .identity h2{
  font-family:SourceSans,Arial,sans-serif;font-size:40px;font-weight:600;
  line-height:1.1;letter-spacing:-.025em;margin-top:12px;
}
.room-drawer[data-folio=content] .about-copy{font-size:18px;margin:0;min-width:0;max-width:64ch}
.room-drawer[data-folio=content] .about-copy>div{border-top:1px solid var(--rule);padding-top:18px}
.room-drawer[data-folio=content] .about-copy>div+div{margin-top:26px}
.room-drawer[data-folio=content] .about-copy h3{
  font-family:SourceSans,Arial,sans-serif;font-size:25px;line-height:1.3;
  font-weight:600;letter-spacing:-.015em;margin-bottom:14px;
}
.room-drawer[data-folio=content] .about-copy p{font-size:18px;line-height:1.65;max-width:64ch;color:var(--ink)}
.room-drawer[data-folio=content] .about-copy p+p{margin-top:16px}

/* Contact is a short invitation, with an unmistakable native email link. */
.room-drawer[data-folio=content] .contact-section{font-size:18px;padding-block:34px 40px;max-width:64ch;margin-inline:auto}
.room-drawer[data-folio=content] .contact-section>.eyebrow{font-size:11px;letter-spacing:.1em;color:var(--accent)}
.room-drawer[data-folio=content] .contact-section h2{
  font-family:SourceSans,Arial,sans-serif;font-size:36px;font-weight:600;
  line-height:1.2;letter-spacing:-.02em;max-width:30ch;margin:18px 0 20px;
}
.room-drawer[data-folio=content] .contact-section .desktop-break{display:none}
.room-drawer[data-folio=content] .contact-invitation{font-size:18px;line-height:1.65;color:var(--muted);margin-bottom:23px}
.room-drawer[data-folio=content] .contact-link{
  font-size:17px;font-weight:600;line-height:1.5;gap:36px;min-height:48px;color:var(--ink);
  max-width:100%;overflow-wrap:anywhere;border-bottom-color:var(--accent);
}
.room-drawer[data-folio=content] .contact-link>span{flex-shrink:0}
.room-drawer[data-folio=content] .contact-mark{display:none}
.room-drawer[data-folio=content] .proposed-email{font-size:18px;color:var(--ink);overflow-wrap:anywhere}
.room-drawer[data-folio=content] .unfinished-contact{font-size:13px;color:var(--muted);margin-top:8px}

/* Personal work is a small, purposeful collection, with writing alongside it. */
.room-drawer[data-folio=content] .projects-section{padding-block:32px 36px}
.room-drawer[data-folio=content] .section-heading{display:block;margin-bottom:24px}
.room-drawer[data-folio=content] .section-heading .eyebrow{font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:9px}
.room-drawer[data-folio=content] .section-heading h2,
.room-drawer[data-folio=content] .writing-section h2{
  font-family:SourceSans,Arial,sans-serif;font-size:36px;font-weight:600;line-height:1.15;letter-spacing:-.025em;
}
.room-drawer[data-folio=content] .project-notes{display:block;margin:0;counter-reset:personal-work}
.room-drawer[data-folio=content] .note-card{
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:17px;
  counter-increment:personal-work;padding:25px 0 27px;
  border-top:1px solid var(--rule);border-bottom:0;
}
.room-drawer[data-folio=content] .note-card:last-child{border-bottom:1px solid var(--rule)}
.room-drawer[data-folio=content] .note-card::before{
  content:counter(personal-work,decimal-leading-zero);font-size:11px;
  line-height:1.6;letter-spacing:.1em;color:var(--accent);padding-top:3px;
}
.room-drawer[data-folio=content] .note-glyph{display:none}
.room-drawer[data-folio=content] .note-card .card-copy{padding:0;min-width:0}
.room-drawer[data-folio=content] .card-copy .project-kind{color:var(--muted);font-size:11px;letter-spacing:.08em;margin-bottom:8px}
.room-drawer[data-folio=content] .card-copy h3{font-family:SourceSans,Arial,sans-serif;font-size:25px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.room-drawer[data-folio=content] .card-copy>p:not(.project-kind){color:var(--muted);font-size:17px;line-height:1.65;max-width:55ch;margin:12px 0 13px}
.room-drawer[data-folio=content] .status{color:var(--muted);font-size:13px;line-height:1.6}
.room-drawer[data-folio=content] .card-arrow{color:var(--accent)}
.room-drawer[data-folio=content] .note-card:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.room-drawer[data-folio=content] .project-art{background:var(--frame);border-color:var(--rule);border-radius:2px}
.room-drawer[data-folio=content] .project-art img{border:0;transform:none;transition:none}
.room-drawer[data-folio=content] .project-grid{gap:30px}
.room-drawer[data-folio=content] .featured-project{gap:36px;padding-bottom:30px}
.room-drawer[data-folio=content] .featured-project h3{font-size:32px;font-weight:600;line-height:1.2;margin:10px 0 15px;letter-spacing:-.025em}
.room-drawer[data-folio=content] .featured-project .card-copy>p:not(.project-kind){font-size:18px;line-height:1.65;max-width:36ch}
.room-drawer[data-folio=content] .featured-project .status{font-size:13px}
.room-drawer[data-folio=content] .project-discover{font-size:15px;font-weight:600;min-height:44px}
/* Personal visuals are actual prototype sheets and approved artwork. Preserve
   their native ratio, with a full-size native link beside the provenance. */
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell) .project-image-link{display:block;padding:10px;background:var(--frame);border:1px solid var(--rule);border-radius:2px}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell) .project-art-large.has-image{height:auto;min-height:0;aspect-ratio:auto;padding:0}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell) .project-art-large.has-image img{display:block;width:100%;height:auto;transform:none;border:0}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell) .project-figure{max-width:740px;margin:0 auto 30px}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell) .project-figure figcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:10px}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell) .project-figure figcaption a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.room-drawer[data-folio=content] .writing-section{padding-block:0 44px}
.room-drawer[data-folio=content] .writing-section h2{font-size:25px}
.room-drawer[data-folio=content] .writing-index{margin-top:17px}
.room-drawer[data-folio=content] .writing-index li{padding-block:17px;gap:24px;min-width:0}
.room-drawer[data-folio=content] .writing-index a{font-size:18px;font-weight:550;line-height:1.5;min-height:44px;display:flex;align-items:center}
.room-drawer[data-folio=content] .post-meta{font-size:12px;color:var(--muted);gap:18px}

/* Native personal projects, writing, and their room readers use the same scale. */
html[data-page=project][data-mode=personal] .article-shell,
html[data-page=writing] .article-shell{
  width:min(1140px,calc(100% - 64px));max-width:1140px;
  padding:36px 52px 42px;margin:140px auto 48px;
  box-shadow:0 24px 90px #06101d66;
}
.room-drawer[data-folio=content] .room-reader.article-shell{
  width:calc(100% - 88px);padding:18px 0 36px;margin:0 auto;
  background:none;border:0;box-shadow:none;
}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell)>.back-link{color:var(--muted);font-size:13px;min-height:44px}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-header{font-size:18px;max-width:64ch;margin:18px auto 26px}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-header .eyebrow{font-size:11px;letter-spacing:.08em;color:var(--muted)}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-header h1{
  font-family:SourceSans,Arial,sans-serif;font-size:48px;
  font-weight:600;line-height:1.1;letter-spacing:-.03em;margin:12px 0 16px;
}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-deck{
  font-family:SourceSans,Arial,sans-serif;font-size:21px;line-height:1.55;letter-spacing:0;max-width:48ch;color:var(--muted);
}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-byline{font-size:12px;line-height:1.6;color:var(--muted);margin-top:15px}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-body{font-size:18px;max-width:64ch;margin-inline:auto}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-body section+section{margin-top:32px}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-body h2{
  font-family:SourceSans,Arial,sans-serif;font-size:25px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--ink);margin-bottom:14px;
}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-body :is(p,li){font-size:18px;line-height:1.65;color:var(--ink);margin-bottom:18px}
:is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell)>.article-back{max-width:730px;margin-top:28px;padding-top:12px;border-top-color:var(--rule)}
.room-drawer[data-folio=content] .room-loading-note{padding:32px 44px;font-size:16px;line-height:1.65;color:var(--muted)}

@media(max-width:850px){
  .room-drawer[data-folio=content] .about-section{grid-template-columns:1fr;gap:30px}
  .room-drawer[data-folio=content] .identity h2{font-size:38px}
  .room-drawer[data-folio=content] .about-copy{max-width:64ch}
  .room-drawer[data-folio=content] .contact-section h2{font-size:34px}
}
@media(max-width:600px){
  .room-drawer[data-folio=content]{
    width:calc(100% - 20px);
    max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  }
  .room-drawer[data-folio=content] .room-drawer-header{padding:11px 20px;gap:12px;min-height:66px}
  .room-drawer[data-folio=content] [data-room-panel-caption]{font-size:10px}
  .room-drawer[data-folio=content] .room-close>span:last-child{display:inline;font-size:12px}
  .room-drawer[data-folio=content] .shell{width:calc(100% - 40px)}
  .room-drawer[data-folio=content] .about-section{padding-block:27px 32px;gap:27px}
  .room-drawer[data-folio=content] .identity h2{font-size:34px;margin-top:10px}
  .room-drawer[data-folio=content] .about-copy>div{padding-top:19px}
  .room-drawer[data-folio=content] .about-copy h3{font-size:23px;margin-bottom:14px}
  .room-drawer[data-folio=content] .about-copy p{font-size:17px;line-height:1.65}
  .room-drawer[data-folio=content] .about-copy>div+div{margin-top:24px}
  .room-drawer[data-folio=content] .contact-section{padding-block:27px 34px}
  .room-drawer[data-folio=content] .contact-section h2{font-size:30px;line-height:1.2;margin-block:17px 20px}
  .room-drawer[data-folio=content] .contact-invitation{font-size:17px;margin-bottom:18px}
  .room-drawer[data-folio=content] .contact-link{font-size:16px;gap:18px}
  .room-drawer[data-folio=content] .projects-section{padding-block:23px 29px}
  .room-drawer[data-folio=content] .section-heading{margin-bottom:23px}
  .room-drawer[data-folio=content] .section-heading h2{font-size:32px}
  .room-drawer[data-folio=content] .note-card{grid-template-columns:27px minmax(0,1fr);gap:10px;padding-block:21px 23px}
  .room-drawer[data-folio=content] .card-copy h3{font-size:23px}
  .room-drawer[data-folio=content] .card-copy>p:not(.project-kind){font-size:17px;line-height:1.65}
  .room-drawer[data-folio=content] .status{font-size:13px}
  .room-drawer[data-folio=content] .project-grid{grid-template-columns:1fr;gap:26px}
  .room-drawer[data-folio=content] .featured-project{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .room-drawer[data-folio=content] .featured-project .card-copy{order:0}
  .room-drawer[data-folio=content] .featured-project h3{font-size:28px}
  .room-drawer[data-folio=content] .project-art{height:280px;padding:12px}
  .room-drawer[data-folio=content] .featured-project .project-art{height:280px;aspect-ratio:auto;padding:12px}
  .room-drawer[data-folio=content] .writing-section{padding-bottom:30px}
  .room-drawer[data-folio=content] .writing-section h2{font-size:23px}
  .room-drawer[data-folio=content] .writing-index li{display:block;padding-block:13px}
  .room-drawer[data-folio=content] .writing-index a{font-size:18px}
  .room-drawer[data-folio=content] .post-meta{display:flex;justify-content:space-between;gap:12px;margin-top:5px;font-size:12px}
  html[data-page=project][data-mode=personal] .article-shell,
  html[data-page=writing] .article-shell{width:calc(100% - 20px);margin:148px auto 28px;padding:25px 20px}
  .room-drawer[data-folio=content] .room-reader.article-shell{width:calc(100% - 40px);padding-top:8px}
  :is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-header{margin:12px 0 25px}
  :is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-header h1{font-size:36px;line-height:1.1;margin:10px 0 14px}
  :is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-deck{font-size:19px;line-height:1.5;max-width:none}
  :is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-body h2{font-size:23px}
  :is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-body :is(p,li){font-size:17px;line-height:1.65}
  :is(.room-drawer[data-folio=content] .room-reader,html[data-page=project][data-mode=personal] .article-shell,html[data-page=writing] .article-shell) .article-body section+section{margin-top:28px}
  .room-drawer[data-folio=content] .room-loading-note{padding:27px 20px;font-size:15px}
}
@media(max-height:500px) and (min-width:601px){
  .room-drawer[data-folio=content]{max-height:calc(100dvh - 24px)}
  .room-drawer[data-folio=content] .room-drawer-header{padding-block:9px;min-height:62px}
  .room-drawer[data-folio=content] .about-section,
  .room-drawer[data-folio=content] .contact-section{padding-block:26px 34px}
}
@media(prefers-reduced-motion:reduce){
  .room-drawer[data-folio=content] .card-arrow{transition:none}
}