@font-face{font-family:ABC Areal;src:url('../fonts/ABCAreal-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{font-family:ABC Areal,Helvetica,Arial,sans-serif;color:#1c1c1e;background:#fcfcfc;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;overflow:hidden}h1,p{margin:0;font:inherit}a{color:inherit;text-decoration:none}a:hover{opacity:.5}a{transition:opacity 200ms cubic-bezier(.65,0,.35,1),color 200ms cubic-bezier(.65,0,.35,1)}a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.header{position:fixed;inset:12px 12px auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:calc(100% - 24px);gap:12px;z-index:5;pointer-events:none;font-size:.75rem;line-height:1.2}
.panel{background:#f7f7f7;border-radius:8px;padding:12px;pointer-events:auto;align-self:stretch;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:12px}.panel>*{text-box-trim:trim-both;text-box-edge:cap alphabetic}.intro{grid-column:span 2;min-width:0}.muted{opacity:.4}
.gallery{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none}.gallery:active{cursor:grabbing}.track{position:absolute;inset:0;user-select:none}
.card{position:absolute;left:50%;top:50%;margin:0;width:330px;height:440px;overflow:hidden;border-radius:8px;will-change:transform;backface-visibility:hidden;background:#f7f7f7}.card img,.card video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.card video{position:absolute;inset:0}
.edge{position:absolute;top:-64px;bottom:-64px;width:clamp(64px,10vw,160px);pointer-events:none;z-index:2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.edge-left{left:0;mask-image:linear-gradient(to right,#000,transparent);-webkit-mask-image:linear-gradient(to right,#000,transparent)}.edge-right{right:0;mask-image:linear-gradient(to left,#000,transparent);-webkit-mask-image:linear-gradient(to left,#000,transparent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-js{position:absolute;top:45%;padding:24px}

@media(prefers-reduced-motion:reduce){a{transition:none}.edge{backdrop-filter:none;-webkit-backdrop-filter:none}}


.contact-links{display:flex;gap:24px;white-space:nowrap}



.panel>.muted{flex:none;white-space:nowrap}
.intro-copy{display:grid;min-width:0;text-align:right;position:relative}
.intro-line{grid-area:1/1;white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic;animation:intro-slide 12s cubic-bezier(.65,0,.35,1) infinite}
.intro-line:nth-child(2){animation-delay:-6s}
/* Existing six-second rotation; each slide/fade takes 400ms. */
@keyframes intro-slide{0%,46.666667%{transform:translateY(0);opacity:1}50%{transform:translateY(-15px);opacity:0}50.001%,96.666667%{transform:translateY(15px);opacity:0}100%{transform:translateY(0);opacity:1}}
@media(max-width:1200px){.intro-line{animation:none;transform:none}.intro-line:first-child{opacity:1}.intro-line:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.intro-line{animation:none}.intro-line:first-child{opacity:1}.intro-line:nth-child(2){opacity:0}}

@media(min-width:901px){.intro-copy{grid-auto-rows:10px}.contact-links a{text-box-trim:trim-both;text-box-edge:cap alphabetic}}

.intro-copy{overflow:hidden;padding-block:4px;margin-block:-4px}
@media(prefers-reduced-motion:reduce){.intro-line:first-child{transform:none}}




/* Compact navigation keeps all destinations on one row. */
@media(max-width:900px){
  .header{grid-template-columns:minmax(0,1fr) max-content max-content;gap:6px}
  .panel{padding:10px 8px;align-items:center;gap:0;min-width:0}
  .panel>*,.contact-links a{text-box-trim:none}
  .intro{grid-column:auto;gap:12px;container-type:inline-size}
  .contact>.muted,.notwork-link>.muted:first-child{display:none}
  .contact-links{gap:12px;align-items:center}
  .notwork-link{justify-content:flex-end}
  .edge{width:56px}
}
@media(max-width:360px){
  .header{inset:12px 8px auto;width:calc(100% - 16px);gap:4px}
  .panel{padding-inline:4px}
  .contact-links{gap:6px}
}

/* Hide the short introduction only when its own panel cannot fit it. */
@container(max-width:20.6rem){.intro-copy{display:none}}
