:root {
  color-scheme: light;
  --paper: #fff;
  --white: #fff;
  --ink: #111;
  --muted: #5a5a57;
  --line: #d8d5ce;
  --accent: #3157d5;
  --pale: #e7ecfa;
  --display: 'Bricolage Grotesque', sans-serif;
  --body: 'Hanken Grotesk', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
ul { list-style: none; padding: 0; margin: 0; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
::selection { color: var(--ink); background: var(--pale); }
.skip-link { position: fixed; z-index: 100; inset: 12px auto auto 12px; padding: 12px 18px; background: var(--white); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.page-shell, .social-inner, .footer { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.hero { display: grid; grid-template-columns: 1.45fr 1fr; gap: 7%; align-items: center; padding-block: 48px 48px; }
.wordmark-mask { min-width: 0; padding-bottom: 7px; overflow: hidden; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: clamp(3.8rem, 8.4vw, 7.8rem); letter-spacing: -.055em; line-height: 1.12; overflow-wrap: anywhere; animation: word-entry .85s cubic-bezier(.2,.7,.2,1) both; }
.wordmark-dot { color: var(--accent); }
@keyframes word-entry { from { transform: translateY(108%); } to { transform: translateY(0); } }
.hero-supporting { max-width: 31ch; color: var(--muted); }
.portfolios { display: grid; grid-template-columns: clamp(105px, 13vw, 165px) minmax(0, 1fr); gap: 25px; padding-bottom: 44px; outline: none; }
.section-heading { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; min-width: 0; padding-block: 12px 16px; }
.section-heading h2 { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 clamp(2.75rem, 4vw, 4.4rem)/.92 var(--display); letter-spacing: -.055em; }
.decks { min-width: 0; }
.deck { display: flex; align-items: stretch; height: 600px; isolation: isolate; }
.deck + .deck { margin-top: 30px; }
.folder { position: relative; flex: 1 1 0; min-width: 0; padding-top: calc(var(--lane) * 13px); transition: flex-grow .48s cubic-bezier(.22,.61,.36,1); }
.folder + .folder { margin-left: -7px; }
.folder-link { display: block; position: relative; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 8px 16px 3px 3px; background: var(--paper); box-shadow: -9px 10px 25px -22px #1118; isolation: isolate; touch-action: pan-y pinch-zoom; -webkit-touch-callout: none; }
.folder-link::before { content: ''; position: absolute; z-index: 3; inset: 0 0 auto; height: 62px; background: var(--paper); border-bottom: 1px solid var(--line); }
.folder-link:focus-visible { outline-offset: 4px; }
.folder:focus-within, .folder.is-pressed { z-index: 4; flex-grow: 1.65; }
.card-rail { position: absolute; z-index: 4; top: 0; left: 0; display: flex; align-items: center; flex-direction: column; gap: 19px; width: 71px; height: 294px; padding: 19px 9px 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0 0 24px 0; background: var(--paper); }
.card-number { font: 400 .72rem/1 var(--mono); color: var(--muted); }
.rail-label { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; flex: 1; padding: 10px 7px; border: 1px solid var(--line); background: var(--white); writing-mode: vertical-rl; font: 500 .94rem/1.1 var(--body); letter-spacing: .01em; text-align: center; }
.card-body { position: absolute; inset: 0; min-width: 0; }
.card-image { position: absolute; inset: 62px 0 0; overflow: hidden; background: var(--pale); }
.card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s cubic-bezier(.22,.61,.36,1); pointer-events: none; user-select: none; -webkit-user-select: none; }
.card-image img[src$="e-menu-preview.jpg"] { object-position: left center; }
.card-copy { position: absolute; z-index: 2; inset: auto 0 0; min-width: 0; padding: 110px 22px 22px; color: var(--white); background: linear-gradient(180deg, transparent 0%, #111e 38%, #111 72%); }
.card-copy h3 { font: 600 clamp(1.35rem, 2vw, 2rem)/1.04 var(--display); letter-spacing: -.045em; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 1px 12px #0006; }
.card-copy p { max-height: 0; overflow: hidden; opacity: 0; font-size: .9rem; line-height: 1.3; transition: max-height .3s ease, opacity .3s ease, margin .3s ease; }
.card-action { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid #ffffff80; font: 400 .68rem/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.card-action span { font-size: 1rem; }
.folder:is(:hover, :focus-within, .is-pressed) .card-copy p { max-height: 5em; margin-top: 10px; opacity: 1; }
.folder-link:active .card-image img, .folder.is-pressed .card-image img { transform: scale(1.045); }
@media (hover: hover) and (pointer: fine) {
  .folder:hover { flex-grow: 1.65; z-index: 3; }
  .folder:hover .folder-link, .folder:focus-within .folder-link { border-color: var(--accent); }
  .folder:hover .card-image img { transform: scale(1.045); }
  .social-link:hover { background: var(--pale); color: var(--accent); transform: translateY(-3px); }
}
.social-section { background: var(--white); }
.social-inner { display: flex; justify-content: center; align-items: center; padding-block: 28px 34px; }
.social-list { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
.social-item { width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.social-link, .social-pending { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); transition: background .2s ease, color .2s ease, transform .2s ease; }
.social-link svg, .social-pending svg { width: 21px; height: 21px; }
.social-name { font-size: .875rem; }
.social-link:active { background: var(--pale); }
.footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 22px; font: 400 .75rem/1.6 var(--mono); color: var(--muted); }
@media (min-width: 1600px) { .hero { padding-block: 60px; } }
@media (max-width: 1000px) {
  .page-shell, .social-inner, .footer { width: calc(100% - 64px); }
  .hero { gap: 6%; }
  .portfolios { grid-template-columns: 100px minmax(0, 1fr); gap: 18px; }
  .deck { height: 540px; }
  .card-rail { width: 61px; height: 264px; }
  .rail-label { font-size: .82rem; }
  .card-copy { padding-inline: 16px; }
  .card-copy h3 { font-size: clamp(1.2rem, 2.2vw, 1.75rem); }
  .social-list { gap: 6px; }
}
@media (max-width: 860px) {
  .page-shell, .social-inner, .footer { width: calc(100% - 40px); }
  .hero { display: block; padding-block: 24px 28px; }
  .wordmark { font-size: clamp(2.8rem, 13vw, 5.3rem); letter-spacing: -.055em; }
  .hero-supporting { margin-top: 9px; max-width: 38ch; font-size: .9rem; }
  .portfolios { display: block; padding-bottom: 18px; }
  .section-heading { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; margin-bottom: 14px; }
  .section-heading h2 { writing-mode: horizontal-tb; transform: none; font-size: 1.35rem; line-height: 1; }
  .deck { display: flex; align-items: stretch; height: clamp(440px, 145vw, 560px); }
  .deck + .deck { margin-top: 18px; }
  .folder { flex: 1 1 0; padding-top: calc(var(--lane) * 11px); min-width: 0; }
  .folder + .folder { margin: 0 0 0 -4px; }
  .folder-link { height: 100%; border-radius: 7px 13px 3px 3px; box-shadow: -6px 8px 17px -15px #1119; }
  .folder-link::before { height: 40px; }
  .card-rail { flex-direction: column; justify-content: flex-start; gap: 12px; width: 40px; height: 235px; padding: 12px 5px 10px; border-radius: 0 0 17px 0; }
  .card-number { flex: none; align-self: center; padding: 0; font-size: .63rem; }
  .rail-label { width: 100%; min-height: 0; flex: 1; padding: 8px 5px; writing-mode: vertical-rl; white-space: nowrap; font-size: .78rem; line-height: 1; text-align: center; }
  .card-image { inset: 40px 0 0; }
  .card-copy { padding: 55px 10px 13px; background: linear-gradient(transparent, #111c); }
  .card-copy h3, .card-copy p, .folder:is(:hover, :focus-within, .is-pressed) .card-copy p { position: absolute; width: 1px; height: 1px; max-height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .card-action { justify-content: flex-end; margin: 0; padding: 0; border: 0; font-size: 0; }
  .card-action span { font-size: 1.05rem; }
  .folder.is-pressed .folder-link, .folder:focus-within .folder-link { border-color: var(--accent); }
  .folder.is-pressed .card-image img { transform: scale(1.045); }
  .folder:focus-within .folder-link { border-color: var(--accent); }
  .social-inner { padding-block: 22px 30px; }
  .social-list { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .social-item { width: auto; }
  .social-link, .social-pending { width: 44px; height: 44px; }
  .social-name { font-size: .75rem; }
  .footer { flex-direction: column; gap: 8px; padding-block: 20px; }
}
@media (max-width: 360px) {
  .page-shell, .social-inner, .footer { width: calc(100% - 28px); }
  .card-rail { width: 37px; }
  .rail-label { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}