/* Sections live in a shared drawer; the photographic hero stays behind it. */
html {scrollbar-gutter:stable;}
html.drawer-open {overflow:hidden;}
html.drawer-open body {position:fixed;top:var(--drawer-page-offset,0);width:100%;}
.drawer-backdrop {
  position:fixed;inset:0;z-index:79;background:var(--backdrop);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity 360ms ease,visibility 0s 360ms;
}
.section-drawer {
  position:fixed;z-index:80;top:0;right:0;bottom:0;
  --section-width:1120px;--section-viewport:calc(100vw - 24px);
  width:min(var(--section-width),var(--section-viewport));display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--drawer-surface);border-left:1px solid var(--line);
  box-shadow:-18px 12px 60px rgba(22,18,35,.08);
  --drawer-peek:64px;
  transform:translateX(calc(100% + 60px));pointer-events:none;border-radius:24px 0 0 24px;
  transition:transform 380ms cubic-bezier(.4,0,.2,1),border-radius 380ms ease;
}
.section-drawer[hidden],.drawer-backdrop[hidden] {display:none;}
.drawer-peeking .section-drawer {
  transform:translateX(calc(100% - var(--drawer-peek)));
  transition:transform 480ms cubic-bezier(.22,1,.36,1),border-radius 480ms ease;
}
.drawer-open .section-drawer {
  transform:translateX(0);pointer-events:auto;border-radius:0;
  transition:transform 650ms cubic-bezier(.22,1,.36,1),border-radius 650ms ease,width 420ms cubic-bezier(.22,1,.36,1);
}
.drawer-peek-trigger {display:none;}
@media(min-width:761px) and (hover:hover) and (pointer:fine) {
  .drawer-peek-trigger {
    display:block;position:absolute;z-index:2;left:100%;right:0;top:77px;bottom:66px;
    padding:0;border:0;background:transparent;
  }
  .drawer-peek-trigger[hidden] {display:none;}
  .drawer-peek-trigger:focus-visible {outline-offset:-6px;}
}
.drawer-peek-rail {
  position:absolute;inset:0 auto 0 0;width:var(--drawer-peek);display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:24px;
  color:var(--muted);font-size:13px;letter-spacing:.6px;pointer-events:none;
  opacity:1;transition:opacity 130ms ease;
}
.drawer-peek-rail>span:first-child {writing-mode:vertical-rl;transform:rotate(180deg);}
.drawer-open .drawer-peek-rail {opacity:0;}
.drawer-toolbar,.drawer-content {
  opacity:0;translate:14px 0;transition:opacity 100ms ease,translate 200ms ease;
}
.drawer-open .drawer-toolbar,.drawer-open .drawer-content {
  opacity:1;translate:0 0;
  transition:opacity 260ms ease 140ms,translate 420ms cubic-bezier(.22,1,.36,1) 100ms;
}
.section-drawer[data-section="career"] {--section-width:720px;--section-viewport:69vw;}
.section-drawer[data-section="contact"] {--section-width:620px;--section-viewport:62vw;}
.drawer-open .drawer-backdrop {opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
.drawer-toolbar {
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;
  height:var(--drawer-toolbar-height,77px);
  padding:0 clamp(24px,3vw,48px);border-bottom:1px solid var(--line);
}
#drawer-label {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.drawer-open .nav .nav-links {visibility:hidden;}
.drawer-navigation {display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:auto;}
.drawer-navigation a {
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 12px;font-size:13px;white-space:nowrap;
}
.drawer-navigation a::after {
  content:"";position:absolute;bottom:0;left:12px;right:12px;height:2px;
  background:var(--ink);transform:scaleX(0);transition:transform 180ms ease-out;
}
.drawer-navigation a.active::after {transform:scaleX(1);}
.drawer-close {
  display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:transparent;
  transition:transform 180ms cubic-bezier(.22,1,.36,1),background 180ms ease;
}
.drawer-close span {font-size:28px;font-weight:300;line-height:1;}
.drawer-close:hover {background:var(--drawer-hover);transform:rotate(90deg);}
.drawer-close:active {transform:rotate(90deg) scale(.94);}
.drawer-content {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
.section-drawer .section {max-width:none;margin:0;padding:42px clamp(24px,3vw,48px) 60px;}
.section-drawer .section[hidden] {display:none;}
.section-drawer h2 {font-size:clamp(34px,3.4vw,50px);max-width:620px;}
.section-drawer h2:focus {outline:none;}
.section-drawer .section-intro>p {font-size:15px;}
.section-drawer .project-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 22px;margin-top:34px;}
.section-drawer .project:nth-child(even) {padding-top:0;}
.section-drawer .project h3 {font-size:20px;}
.section-drawer .project-meta {flex-wrap:wrap;gap:6px;}
/* Keep the saved grid position when restoring the project cards. */
.section-drawer[data-section="work"] .drawer-content {overflow-anchor:none;}
/* A selected project becomes one continuous, full-width reading surface. */
.section-drawer #work[data-project] {padding:0;}
#work[data-project] .project-grid {display:block;margin:0;}
#work[data-project] .project[hidden],#work[data-project] .section-intro {display:none;}
#work[data-project] .project> :not(details) {display:none;}
#work[data-project] summary {display:none;}
.drawer-project-back[hidden],.drawer-project-title[hidden],.drawer-navigation[hidden] {display:none;}
.section-drawer:has(#work[data-project]) .drawer-toolbar {
  display:grid;grid-template-columns:minmax(104px,1fr) minmax(0,2fr) minmax(104px,1fr);
  height:64px;gap:8px;padding:0 24px;
}
.drawer-project-back {
  justify-self:start;min-height:44px;padding:0;border:0;background:transparent;
  color:var(--ink);font:inherit;font-size:13px;white-space:nowrap;
}
.drawer-project-back:hover {color:var(--accent);}
.section-drawer .drawer-project-title {
  min-width:0;max-width:100%;margin:0;font-size:16px;font-weight:500;line-height:1.3;
  letter-spacing:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.section-drawer:has(#work[data-project]) .drawer-close {justify-self:end;}
#work[data-project] .case-content {max-width:75ch;margin:0 auto;padding:24px clamp(22px,3vw,48px) 48px;}
.case-gallery {margin:0;padding:0;}
.case-gallery img,.project-reader-cover {display:block;width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;}
.section-drawer .timeline {margin-top:36px;}
.section-drawer .timeline article {grid-template-columns:1fr;gap:18px;padding:28px 0;}
.section-drawer .contact-options {grid-template-columns:1fr;gap:36px;margin-top:34px;}
.section-drawer footer {margin-top:56px;line-height:1.7;}
.drawer-open .pill-editor-link {visibility:hidden;}
@media(max-width:760px) {
  .section-drawer {width:100%;border-left:0;}
  .drawer-toolbar {padding:0 22px;}
  .section-drawer:has(#work[data-project]) .drawer-toolbar {height:56px;padding:0 16px;gap:4px;}
  .section-drawer .drawer-project-title {font-size:14px;}
  .drawer-navigation a {padding:0 8px;font-size:12px;}
  .drawer-navigation a::after {left:8px;right:8px;}
  .section-drawer .section {padding:30px 22px 48px;}
  .section-drawer h2 {font-size:38px;}
  .section-drawer .project-grid {grid-template-columns:1fr;}
  .section-drawer .project:nth-child(even) {padding-top:0;}
}
@media(prefers-reduced-motion:reduce) {
  .section-drawer,.drawer-peeking .section-drawer,.drawer-open .section-drawer,
  .drawer-backdrop,.drawer-close,.drawer-navigation a::after,
  .drawer-toolbar,.drawer-content,.drawer-peek-rail,
  .drawer-open .drawer-toolbar,.drawer-open .drawer-content {transition:none;}
}
@media(max-width:360px) {
  .drawer-toolbar {padding:0 16px;gap:8px;}
  .drawer-navigation a {padding:0 4px;}
  .drawer-navigation a::after {left:4px;right:4px;}
}
.oa-reduced-motion .section-drawer,.oa-reduced-motion .drawer-backdrop,
.oa-reduced-motion .drawer-close,.oa-reduced-motion .drawer-navigation a::after,
.oa-reduced-motion .drawer-toolbar,.oa-reduced-motion .drawer-content,
.oa-reduced-motion .drawer-peek-rail {transition:none;}