/* After hours: ink, oxblood, photocopies, and a little chrome. */
:root {
  --paper: #e9dfcf;
  --ink: #ebe4d9;
  --red: #963b50;
  --purple: #8f8195;
  --yellow: #d3c2a0;
  --line: #e9dfcf30;
  --night: #171719;
  --muted: #bcb3b2;
}
body { background: var(--night); color: var(--ink); }
body::after { opacity: .055; }
::selection { background: #a95668; color: #fff5e9; }
:focus-visible { outline: 2px solid #e6bca9 !important; outline-offset: 6px; }
.site-header { background: #1c1a1ee8; color: var(--ink); border-bottom: 1px solid #ffffff23; }
.wordmark { color: #f0e5d6; }
.header-note { color: #b0a8a6; }
.site-header nav a:hover { color: #e4b5be; }
.site-header .nav-contact, .text-link, #bag-reset, .contact-actions a, .gallery-filters button, .menu-toggle {
  border: 1px solid #ffffff36;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffffff1c, #ffffff05 45%, #ffffff0c), #2c252bcc;
  box-shadow: inset 0 1px 0 #ffffff25, inset 0 -1px 0 #0005, 0 5px 20px #0002;
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  color: #f2e9de;
  padding: 12px 20px;
  display: inline-block;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.site-header nav .nav-contact:hover, .text-link:hover, #bag-reset:hover, .contact-actions a:hover, .gallery-filters button:hover {
  background: linear-gradient(145deg, #ffffff28, #7e3c5055), #342b32;
  color: #fff5e9;
  border-color: #ffffff69;
  box-shadow: inset 0 1px 0 #ffffff45, 0 7px 24px #0004;
}
.dropdown { background: #292429f5; color: #eee5db; border-color: #ffffff24; box-shadow: 0 12px 30px #0006; backdrop-filter: blur(20px); }
.dropdown a:hover { background: #ffffff0d; }
.menu-toggle { display: none; }
.scrapbook-hero {
  background: linear-gradient(90deg, #18171be8, #18171b70), url('assets/city-afterhours.svg') right bottom / auto 90% no-repeat, #201b22;
  color: var(--ink);
}
.edition-line { color: #b8aaa7; border-color: #ffffff2b; }
.introduction :is(h1,h2) { color: #f1e8da; text-shadow: 2px 2px 0 #0004; }
.introduction :is(h1,h2) em { color: #c78a97; }
.hello-note { color: #cfb7bc; }
.portrait-frame { background: #d8caba; color: #35272b; box-shadow: 8px 12px 0 #0003, 0 8px 30px #0006; }
.portrait-frame img { filter: saturate(.55) contrast(1.08); }
.portrait-frame::before { background: #b5a5849e; }
.portrait-star { color: #b8a9ac; text-shadow: 2px 2px #3f2933; }
.title-label { color: #e9d9d9; background: #612e3d; border: 1px solid #b07a854d; transform: rotate(-1.5deg); }
.intro-description { color: #e0d4c7; }
.degree, .specialties { color: #bfb4b0; }
.bag-heading h2 em { color: #ca9ba6; }
.bag-heading p, .tiny-label { color: #c6bab5; }
.bag-item img { filter: saturate(.7) drop-shadow(2px 6px 5px #0007); }
.bag-item>span { background: #cbbfb0; color: #251d23; }
.bag-stage .pack-note { color: #d4b9bf; }
.bag-drop-label { color: #f1dcd7; }
.bag-controls { border-color: #ffffff28; }
#bag-status { color: #c8bcb4; }
.bag-finale { background: #221d24e8; color: #efe1d1; backdrop-filter: blur(10px); }
.landing-footnote { border-color: #ffffff2a; color: #b7aaa5; }
.strategy-strip { background: #492532; color: #dfc9c2; border-block: 1px solid #ba84972d; }
.portfolio-story .story-intro { background: #18171b; }
.work-section {
  background: linear-gradient(#ffffff03 1px, transparent 1px) 0 0 / 100% 40px, radial-gradient(ellipse at 20% 20%, #52313b30, transparent 65%), #1b1a1d;
  color: var(--ink);
}
.section-index { color: #baaaa6; border-color: #ffffff30; }
.section-heading h2 { font-family: Georgia, serif; font-weight: 400; }
.section-heading h2 em { color: #c58c9a; }
.section-heading p { color: #bdb2b0; }
.work-card { background: #2c252b; color: var(--ink); }
.work-card .work-cover { background: #542d3c; color: #eee1cf; }
.work-grid.folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 7vw; max-width: 1130px; margin: 45px auto 0; }
.case-folder { min-width: 0; --folder-tint: #673647; }
.folder-tone-1 { --folder-tint: #49464f; }
.folder-tone-2 { --folder-tint: #655948; }
.folder-meta { display: flex; justify-content: space-between; color: #aa989e; font: 9px/1.5 'Courier New', monospace; letter-spacing: 1.5px; border-top: 1px solid #ffffff25; padding-top: 12px; }
.folder-trigger { position: relative; display: block; width: min(100%, 350px); height: 305px; margin: 0 auto; padding: 0; border: 0; background: transparent; color: #f1e7dc; perspective: 950px; text-align: left; cursor: pointer; }
.folder-back { position: absolute; left: 7%; right: 7%; height: 171px; bottom: 18px; border-radius: 10px; background: linear-gradient(130deg, #5c485366, #0003), #28232a; border: 1px solid #b1a0ad38; box-shadow: inset 0 0 24px #0008, 0 18px 35px #0005; }
.folder-back::before { content: ''; position: absolute; width: 43%; height: 18px; top: -17px; left: -1px; border-radius: 9px 9px 0 0; background: #3c3039; border: 1px solid #b1a0ad38; border-bottom: 0; }
.folder-sheets { position: absolute; bottom: 26px; left: 50%; width: 0; height: 168px; pointer-events: none; }
.folder-sheet { display: flex; flex-direction: column; position: absolute; top: 0; left: -67px; width: 134px; height: 166px; padding: 7px; color: #32272b; background: #dfd3c1; box-shadow: 0 3px 10px #0005; border: 1px solid #f8ecda; border-radius: 2px; overflow: hidden; }
.folder-sheet.sheet-1 { z-index: 2; background: #e9dfcf; }
.sheet-kicker, .sheet-caption { display: block; font: 6px/1.5 'Courier New', monospace; letter-spacing: .55px; }
.sheet-caption { margin-top: auto; padding-top: 5px; }
.folder-sheet img { width: 100%; height: 124px; object-fit: cover; margin-top: 3px; filter: saturate(.7); }
.sheet-paper { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.sheet-title { font: italic 19px/1 Georgia, serif; }
.sheet-rule { display: block; height: 1px; background: #624a4a55; }
.sheet-copy { font: 8px/1.4 'Courier New', monospace; }
.sheet-stamp { border: 1px solid #7636468a; color: #743347; font: 6px/1.5 'Courier New', monospace; padding: 3px; width: fit-content; transform: rotate(-5deg); }
.folder-front { position: absolute; bottom: 8px; left: 2%; width: 96%; height: 183px; z-index: 3; transform-style: preserve-3d; }
.folder-glass { position: absolute; inset: 0; clip-path: polygon(0 0, 40% 0, 49% 22%, 100% 22%, 95% 100%, 5% 100%); background: linear-gradient(145deg, #ffffff24, #ffffff03 42%, #0002 70%, #ffffff10), color-mix(in srgb, var(--folder-tint) 72%, transparent); -webkit-backdrop-filter: blur(9px) saturate(90%); backdrop-filter: blur(9px) saturate(90%); }
.folder-outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.folder-tab-label { position: absolute; top: 13px; left: 17px; font: 7px 'Courier New', monospace; letter-spacing: 1px; color: #e4d0cd; }
.folder-face-title { position: absolute; top: 64px; left: 25px; right: 20px; font: italic clamp(26px, 3vw, 38px)/1.1 Georgia, serif; letter-spacing: -1px; text-shadow: 0 2px 8px #0004; }
.folder-face-bottom { position: absolute; bottom: 23px; left: 26px; right: 27px; display: flex; justify-content: space-between; align-items: center; color: #d4c3c7; font: 7px 'Courier New', monospace; letter-spacing: 1.3px; }
.folder-face-bottom>span:last-child { font-size: 24px; }
.folder-caption { display: flex; gap: 16px; justify-content: space-between; padding: 15px 0 0; }
.folder-caption h3 { font: 23px/1.2 Georgia, serif; margin: 0 0 9px; font-weight: 400; }
.folder-caption h3 a { display: inline-block; padding: 5px 0; }
.folder-caption h3 a:hover { color: #e3aaba; }
.folder-caption h3 span { font: 16px Arial, sans-serif; margin-left: 8px; color: #c893a1; }
.folder-caption p { color: #b7ada9; font-size: 12px; max-width: 300px; margin-bottom: 0; }
.folder-peek-note { flex-shrink: 0; color: #c3a8ae; font: italic 13px/1.5 Georgia, serif; text-align: right; padding-top: 7px; }





.bag-index { background: repeating-linear-gradient(0deg, transparent 0 31px, #eee5d009 31px 32px), #202022; }
.bag-links a { border-color: #ffffff24; }
.bag-links img { filter: saturate(.65) drop-shadow(5px 10px 6px #0005); }
.bag-links p { color: #beb4b0; }
.chat { background: radial-gradient(ellipse at 0 40%, #60314455, transparent 70%), #242025; }
.chat h2 em { color: #c98e9e; }
.placeholder { background: repeating-linear-gradient(0deg, transparent 0 29px, #ded2c50b 29px 30px), #373036; color: #d9c9bf; border-color: #9e858c; }
.portrait-slot { border-color: #c6b8ab; box-shadow: 8px 10px 0 #0004; }
.story-placeholder { border-color: #ae687d; color: #c7b6b7; }
.tags span { background: #ffffff08; border-color: #ffffff2b; color: #d6c6c4; }
.opportunity { background: #532f3d; color: #e9dbcc; border-left: 2px solid #b58091; }
.contact-actions>span { color: #b0a09e; border-color: #ffffff35; }
.small-footer { background: #121214; color: #c5b8b4; border-top: 1px solid #ffffff1f; }
.small-footer>span { color: #a68e98; }
.page-head { background: linear-gradient(90deg, #291c25ed, #20191cb0), url('assets/city-afterhours.svg') right center / auto 160% no-repeat, #251d23; color: var(--ink); border-bottom: 1px solid #ffffff20; }
.page-head h1 em { color: #d09aaa; }
.page-head .back-link { color: #ccb4bd; }
.case-block blockquote { border-color: #ae6e84; }
.muted, .experience-card ol { color: #b7a8ad; }
.metrics>div { background: #472b37; color: #e8d9cf; border-top: 1px solid #bc85974d; }
.experience-list { background: #211d22; }
.experience-card { background: #2a242a; box-shadow: 5px 7px 0 #0004; }
.skill-sheet, .skill-sheet:nth-child(2) { background: #30272f; border-color: #a2657d; }
.skill-sheet:nth-child(2) { background: #3a3031; }
.gallery-filters .active { background: #693749; color: #f1e4d7; border-color: #bd8c9c; }
@supports not (backdrop-filter: blur(1px)) { .folder-glass { background: var(--folder-tint); } }
@media (max-width: 700px) {
  .menu-toggle { display: inline-block; }
  .site-header nav { background: #201c22; border-color: #ffffff29; }
  .site-header nav .nav-contact { margin-top: 12px; }
  .scrapbook-hero { background-size: auto 70%; }
  .work-grid.folder-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 30px; }
  .folder-trigger { height: 290px; max-width: 320px; }
  .folder-face-title { font-size: 32px; }
  .folder-caption h3 { font-size: 24px; }
  .folder-front { height: 174px; }
  .folder-peek-note { font-size: 12px; }
  .folder-sheet { width: 122px; left: -61px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } }