:root {
  --hall: #182322;
  --paper: #f6f4ec;
  --ink: #1a1d1f;
  --muted: #5d6266;
  --teal: #16a3a0;
  --amber: #f2b705;
  --steel: #c9ced2;
  --shell: #262a2d;
  --lining: #dcd8cf;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--hall); overflow: hidden; }
body { font: 400 16px/1.5 Barlow, "Helvetica Neue", Arial, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 55%, transparent 55%, rgba(5, 10, 10, .42) 100%); }

/* ---------------------------------------------------------------- hover: a paper tag beside the pointer */
#hover { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 5; display: grid; gap: 1px; padding: 6px 12px 7px 22px; max-width: 260px;
  background: var(--paper); border-radius: 3px 8px 8px 3px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .15s; }
#hover::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: #2a2f31; box-shadow: inset 0 0 0 2px #b9b6ad; }
#hover.on { opacity: 1; }
.h-client { font: 500 10px/1.2 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.h-title { font: 600 18px/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--ink); }
#hover.one .h-client { display: none; }

/* ---------------------------------------------------------------- the claim-tag stub */
#stub { position: fixed; z-index: 6; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 9px 11px; border: 0; border-radius: 5px; background: var(--paper); cursor: pointer; transform: rotate(-2.5deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .6) inset; transition: transform .2s ease, box-shadow .2s ease; }
#stub::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 5px 5px 0 0; background: var(--teal); }
#stub:hover { transform: rotate(-1deg) translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, .42); }
.bars { display: block; width: 30px; height: 40px; flex: none;
  background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 3px, #111 3px 4px, transparent 4px 6px, #111 6px 9px, transparent 9px 10px, #111 10px 11px, transparent 11px 14px); }
.stub-text { display: grid; text-align: left; }
.stub-text b { font: 700 30px/0.95 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .01em; }
.stub-text small { font: 500 10px/1.3 "IBM Plex Mono", monospace; letter-spacing: .04em; }

#sound { position: fixed; z-index: 6; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 42px; height: 42px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(246, 244, 236, .9); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
#sound span { position: absolute; inset: 0; background: center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%231a1d1f'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E"); }
#sound[aria-pressed="false"] span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%231a1d1f'/%3E%3Cpath d='M17 9l5 6M22 9l-5 6'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- the long tag: every bag */
#tags { position: fixed; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--ink);
  top: calc(max(14px, env(safe-area-inset-top)) + 70px); right: max(14px, env(safe-area-inset-right)); left: auto; width: min(390px, calc(100vw - 28px)); max-height: none; }
#tags::backdrop { background: rgba(8, 14, 14, .5); }
#tags[open] .strip { animation: unroll .28s ease-out; }
@keyframes unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.strip { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow: auto; overscroll-behavior: contain; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(90deg, #efede4, var(--paper) 12%, var(--paper) 88%, #efede4); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); font-family: "IBM Plex Mono", monospace; }
.strip-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 16px 16px 10px; background: var(--paper); border-top: 6px solid var(--teal); }
.strip-head .bars { width: 46px; height: 52px; }
.strip-head .code { font: 700 58px/0.9 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .01em; flex: 1; }
.close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); font: 28px/44px system-ui, sans-serif; cursor: pointer; flex: none; }
.close:hover { background: rgba(0, 0, 0, .12); }
.pax { display: grid; width: 100%; text-align: left; padding: 6px 16px 12px; border: 0; border-bottom: 2px dashed rgba(0, 0, 0, .2); background: none; cursor: pointer; }
.pax small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pax span { font: 500 17px/1.3 "IBM Plex Mono", monospace; }
.pax:hover span { text-decoration: underline; text-underline-offset: 3px; }
#taglist { list-style: none; margin: 0; padding: 0 0 10px; }
#taglist button { display: grid; grid-template-columns: 56px 1fr 20px; gap: 12px; align-items: center; width: 100%; padding: 8px 16px; border: 0; border-bottom: 1px dashed rgba(0, 0, 0, .16);
  background: none; text-align: left; cursor: pointer; }
#taglist button:hover { background: rgba(22, 163, 160, .09); }
#taglist img { width: 56px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.row-text { display: grid; min-width: 0; }
.row-text small { font-size: 10px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.row-title { font: 600 19px/1.15 "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--ink); }
.claimed { width: 18px; height: 18px; border-radius: 50%; }
.is-claimed .claimed { background: var(--teal); box-shadow: inset 0 0 0 2px var(--paper); position: relative; }
.is-claimed .claimed::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------------------------------------------------------------- the open bag */
#case { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
#case::backdrop { background: rgba(6, 11, 11, .64); }
.suitcase { position: absolute; top: max(18px, 3.5vh); bottom: max(18px, 3.5vh); left: max(18px, calc((100vw - 1060px) / 2)); right: max(18px, calc((100vw - 1060px) / 2));
  border-radius: 30px; padding: 18px; background: linear-gradient(160deg, #31363a, var(--shell) 40%, #1d2023);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .05), inset 0 2px 0 rgba(255, 255, 255, .08); }
.teeth { position: absolute; left: 40px; right: 40px; height: 7px; border-radius: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #a9aeb2 0 3px, #3a3f43 3px 4px, transparent 4px 6px); opacity: .85; }
.teeth.top { top: 5px; } .teeth.bottom { bottom: 5px; }
.pull { position: absolute; z-index: 2; top: -4px; left: calc(100% - 64px); width: 20px; height: 34px; border-radius: 5px 5px 10px 10px; pointer-events: none;
  background: linear-gradient(90deg, #8a9095, #e3e6e8 45%, #9aa0a5); box-shadow: 0 4px 6px rgba(0, 0, 0, .4); }
.pull::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 12px; border-radius: 4px; background: #2b2f32; }
.lining { position: absolute; inset: 18px; border-radius: 18px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 30px clamp(18px, 4.5vw, 52px) 56px; color: var(--ink);
  background-color: var(--lining);
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 30px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 30px),
    radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, .35), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 10px 30px rgba(0, 0, 0, .18); }
.zip { position: absolute; z-index: 3; top: 30px; right: 30px; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.zip span::before, .zip span::after { content: ""; position: absolute; left: 14px; right: 14px; top: 23px; height: 2.5px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.zip span::after { transform: rotate(-45deg); }
.zip:hover { background: #fff; }

.suitcase.opening { animation: pop .26s ease-out both; }
.suitcase.opening .lining { animation: unzip .6s .12s cubic-bezier(.45, 0, .25, 1) both; }
.suitcase.opening .pull { animation: pull .6s .12s cubic-bezier(.45, 0, .25, 1) both; }
.suitcase.closing { animation: shut .3s ease-in both; }
.suitcase.closing .lining { animation: zipup .26s ease-in both; }
.suitcase.closing .pull { animation: pull .26s ease-in reverse both; }
@keyframes pop { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes unzip { from { clip-path: inset(0 100% 0 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
@keyframes zipup { from { clip-path: inset(0 0 0 0 round 18px); } to { clip-path: inset(0 100% 0 0 round 18px); } }
@keyframes pull { from { left: 40px; } to { left: calc(100% - 64px); } }
@keyframes shut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(30px) scale(.96); } }

.case-head { display: flex; align-items: flex-end; gap: 22px; margin: 0 auto 28px; max-width: 900px; padding-right: 60px; }
.case-bag { height: clamp(120px, 20vh, 190px); width: auto; max-width: 40%; object-fit: contain; flex: none; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .28)); }
.case-tag { position: relative; min-width: 0; padding: 12px 20px 14px 30px; margin-bottom: 8px; border-radius: 4px 12px 12px 4px; background: var(--paper);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2); transform: rotate(-1.2deg); }
.case-tag::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: var(--lining); box-shadow: inset 0 0 0 2px #a9a59b; }
.case-client { margin: 0 0 3px; font: 500 12px/1.3 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.case-client:empty { display: none; }
.case-title { margin: 0; font: 600 clamp(30px, 4.4vw, 48px)/1 "Barlow Condensed", "Arial Narrow", sans-serif; color: #121516; overflow-wrap: anywhere; }
.nametag { font: 600 clamp(34px, 5vw, 50px)/1 Caveat, "Marker Felt", cursive; color: #1f2c6e; }

#work { max-width: 900px; margin: 0 auto; --ab-fg: var(--ink); --ab-muted: var(--muted); --ab-accent: #c78f00; --ab-gap: 18px; --ab-chrome: 150px; }
#work .ab-lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.45; max-width: 46em; }
#work .ab-heading { font: 600 22px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em; text-transform: uppercase; padding-top: 14px; border-top: 2px dashed rgba(0, 0, 0, .14); }
#work .ab-text { font-size: 16.5px; line-height: 1.6; max-width: 46em; }
#work .ab-frame { border-radius: 6px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
#work .ab-image img { border-radius: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
#work figcaption { font: 500 12px/1.4 "IBM Plex Mono", monospace; letter-spacing: .03em; }
#work .ab-credits { font: 400 12.5px/1.6 "IBM Plex Mono", monospace; padding-top: 16px; border-top: 2px dashed rgba(0, 0, 0, .14); }
#work .ab-audio audio { border-radius: 30px; }
#work.about { display: grid; gap: 18px; }
.about-title { margin: 0; font: 600 24px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; }
.about-bio { margin: 0; font-size: 19px; line-height: 1.5; max-width: 40em; }
.about-jobs { margin: 0; padding: 14px 0 0; list-style: none; display: grid; gap: 6px; border-top: 2px dashed rgba(0, 0, 0, .14); font-size: 16px; }
.about-contact { margin: 0; padding-top: 14px; border-top: 2px dashed rgba(0, 0, 0, .14); font: 500 14px/1.6 "IBM Plex Mono", monospace; }
.about-contact a, #work a { color: #0b6f6d; }

/* ---------------------------------------------------------------- loading: the sign over the carousel, and a little belt that fills */
#loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--hall); transition: opacity .7s ease; }
#loader.done { opacity: 0; pointer-events: none; }
.sign { display: grid; justify-items: center; gap: 18px; padding: 26px 40px 24px 46px; border-radius: 8px; background: #1f2426; position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.sign::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 8px 0 0 8px; background: var(--amber); }
.picto { width: 96px; height: 96px; color: #f3f3ef; }
.belt { display: block; width: 168px; height: 9px; border-radius: 5px; background: #343a3d; overflow: hidden; }
.belt i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
  background: repeating-linear-gradient(90deg, var(--steel) 0 10px, #7e8488 10px 11px); background-size: 22px 100%; animation: slats 1s linear infinite; }
@keyframes slats { to { background-position: 22px 0; } }

@media (max-width: 600px) {
  .suitcase { top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; right: 8px; border-radius: 22px; padding: 11px; }
  .teeth { left: 28px; right: 28px; } .teeth.top { top: 2px; } .teeth.bottom { bottom: 2px; }
  .lining { inset: 11px; border-radius: 14px; padding: 22px 16px 44px; }
  .zip { top: 20px; right: 20px; width: 44px; height: 44px; }
  .zip span::before, .zip span::after { top: 21px; left: 13px; right: 13px; }
  .case-head { flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 48px; margin-bottom: 20px; }
  .case-bag { height: 118px; max-width: 70%; }
  #work { --ab-chrome: 110px; }
  #stub { padding: 9px 11px 7px 9px; gap: 8px; }
  #stub .bars { width: 22px; height: 32px; }
  .stub-text b { font-size: 24px; }
  .stub-text small { font-size: 9px; }
  #tags { top: calc(max(14px, env(safe-area-inset-top)) + 58px); }
  .strip-head .code { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .suitcase.opening, .suitcase.opening .lining, .suitcase.opening .pull, .suitcase.closing, .suitcase.closing .lining, #tags[open] .strip, .belt i { animation: none; }
}