/* Main navigation: active state and animated underline. */
.masthead #main-nav .nav-label {
  position: relative;
  display: inline-block;
}

.masthead #main-nav .nav-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease-out;
  pointer-events: none;
}

.masthead #main-nav a[aria-current="page"] .nav-label::after {
  opacity: .65;
  transform: scaleX(.38);
}

@media (hover: hover) {
  .masthead #main-nav a:hover .nav-label::after {
    opacity: .9;
    transform: scaleX(1);
  }
}

.masthead #main-nav a:focus-visible .nav-label::after {
  opacity: .9;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .masthead #main-nav .nav-label::after {
    transition: none;
  }
}


/* Subtle motion and heading composition. */
html[data-stt-motion="on"] .stt-motion-word { display: inline-block; }
html[data-stt-motion="on"] .intro-copy h1 .stt-title-line { display: block; }
html[data-stt-motion="on"] .intro-copy h1 .stt-title-line:last-child { margin-left: clamp(28px, 5vw, 72px); }
html[data-stt-motion="on"] .work-heading > p .stt-editorial-line { font: inherit; color: inherit; }
@media (min-width: 701px) {
  html[data-stt-motion="on"] .work-heading > p { width: 440px; }
  html[data-stt-motion="on"] .work-heading > p .stt-editorial-line { display: block; }
  html[data-stt-motion="on"] .work-heading > p .stt-editorial-line:nth-child(2) { margin-left: 1.4em; }
  html[data-stt-motion="on"] .work-heading > p .stt-editorial-line:nth-child(3) { margin-left: 2.8em; }
  html[data-stt-motion="on"] .work-heading > p > br { display: none; }
  html[data-stt-motion="on"] .work-heading > p > span:last-child { display: block; margin-top: 10px; }
}
html[data-stt-motion="on"] .portal-image .stt-image-window { display: block; overflow: hidden; }
html[data-stt-motion="on"] .work-picture { overflow: hidden; }
html[data-stt-motion="on"] :is(.portal-image, .work-picture) img {
  transition: transform 600ms cubic-bezier(.16, 1, .3, 1);
}
html[data-stt-motion="on"] :is(.portal-caption, .entry-copy h2 a) {
  transition: color 180ms ease-out;
}
html[data-stt-motion="on"] :is(.portal-arrow, .entry-copy h2 .stt-arrow) {
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1), color 180ms ease-out, background 180ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  html[data-stt-motion="on"] :is(.portal, .work-entry):hover :is(.portal-image, .work-picture) img { transform: scale(1.025); }
  html[data-stt-motion="on"] .portal:hover .portal-caption { color: var(--accent); }
  html[data-stt-motion="on"] .portal:hover .portal-arrow { transform: translate(3px, -3px); }
  html[data-stt-motion="on"] .work-entry:hover .entry-copy h2 a { color: var(--accent); }
  html[data-stt-motion="on"] .work-entry:hover .entry-copy h2 .stt-arrow { transform: translate(3px, -3px); }
}
html[data-stt-motion="on"] :is(.portal, .work-entry):focus-within :is(.portal-caption, .entry-copy h2 a) { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  html[data-stt-motion="on"] :is(.portal-image, .work-picture) img,
  html[data-stt-motion="on"] :is(.portal-arrow, .entry-copy h2 .stt-arrow) {
    transform: none !important;
    transition: none !important;
  }
}


.work-directory .stt-discipline-trigger{display:flex;align-items:center;gap:13px;min-height:51px;border:0;border-bottom:1px solid var(--line);background:transparent;padding:0;font:13px 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink);text-align:left;cursor:pointer;width:100%}
.stt-discipline-trigger>span:first-child{font:10px ui-monospace,monospace;color:var(--muted)}
.stt-discipline-trigger>span:last-child{margin-left:auto;color:var(--muted);transition:transform 200ms ease-out}
.stt-discipline-trigger[aria-expanded="true"]{color:var(--accent)}
.stt-discipline-trigger[aria-expanded="true"]>span:last-child{transform:rotate(180deg);color:var(--accent)}
.stt-discipline-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(hover:hover){.stt-discipline-trigger:hover{color:var(--accent)}}
.stt-discipline-panel{overflow:hidden;margin-bottom:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stt-discipline-panel[hidden]{display:none}
.stt-discipline-content{display:grid;grid-template-columns:minmax(190px,320px) 1fr;align-items:center;gap:38px;padding:24px 0}
.stt-discipline-image{width:100%;height:210px;object-fit:contain;background:#111213}
.stt-discipline-content h2{font-size:30px;font-weight:400;line-height:1.15;letter-spacing:-.035em;margin:0}
.stt-discipline-content p{font-size:15px;line-height:1.6;color:var(--muted);margin:12px 0 18px;max-width:420px}
.stt-discipline-jump{display:inline-block;padding:10px 0;font-size:13px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.stt-discipline-close{border:0;background:transparent;padding:10px 0;margin-left:26px;font-size:12px;color:var(--muted);cursor:pointer}
@media(max-width:700px){.work-directory .stt-discipline-trigger{min-height:49px;font-size:12px;gap:10px}.stt-discipline-content{grid-template-columns:1fr;gap:20px;padding:20px 0}.stt-discipline-image{height:180px}.stt-discipline-content h2{font-size:28px}.stt-discipline-panel{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){.stt-discipline-trigger>span:last-child{transition:none}}


/* Reduced decorative arrows and clear link feedback. */
:is(
  a[href*="eyeland-design.com"] .stt-arrow,
  .inline-link > span:last-child,
  .social a > span,
  .social-row > span,
  .portal-arrow,
  .discipline-links a > span,
  .entry-copy h2 a > span,
  .work-pill > span,
  .profile-link > span,
  .download-pill > span
) { display: none; }

.portal-caption {
  grid-template-columns: 40px 1fr;
  min-height: 75px;
}

:is(
  .social a, .social-row, .discipline-links a, .entry-copy h2 a,
  .profile-link, .portal-caption > span:nth-child(2)
) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: transparent;
  transition: text-decoration-color 180ms ease-out, color 180ms ease-out;
}

.inline-link {
  transition: border-color 180ms ease-out;
}
a[href*="eyeland-design.com"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #606667;
  text-underline-offset: 4px;
  transition: text-decoration-color 180ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  :is(.social a, .social-row, .discipline-links a, .profile-link, a[href*="eyeland-design.com"]):hover,
  .portal:hover .portal-caption > span:nth-child(2),
  .work-entry:hover .entry-copy h2 a {
    text-decoration-color: var(--accent);
  }
  .inline-link:hover { border-color: var(--accent); }
}
:is(.social a, .social-row, .discipline-links a, .profile-link, a[href*="eyeland-design.com"]):focus-visible,
.portal:focus-within .portal-caption > span:nth-child(2),
.work-entry:focus-within .entry-copy h2 a {
  text-decoration-color: var(--accent);
}
.inline-link:focus-visible { border-color: var(--accent); }

/* Two drawn strokes communicate opening and closing, including on touch screens. */
:is(.stt-discipline-trigger > span:last-child, .work-index summary > span) {
  position: relative;
  display: block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  font-size: 0;
  transform: none;
}
.stt-discipline-trigger > span:last-child svg { display: none; }
:is(.stt-discipline-trigger > span:last-child, .work-index summary > span)::before,
:is(.stt-discipline-trigger > span:last-child, .work-index summary > span)::after {
  content: "";
  position: absolute;
  background: currentColor;
}
:is(.stt-discipline-trigger > span:last-child, .work-index summary > span)::before {
  width: 12px;
  height: 1px;
  top: 5.5px;
  left: 0;
}
:is(.stt-discipline-trigger > span:last-child, .work-index summary > span)::after {
  width: 1px;
  height: 12px;
  top: 0;
  left: 5.5px;
  transition: transform 180ms ease-out;
}
.stt-discipline-trigger[aria-expanded="true"] > span:last-child::after,
.work-index[open] summary > span::after { transform: scaleY(0); }

@media (max-width: 700px) {
  .portal-caption { min-height: 67px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.social a, .social-row, .discipline-links a, .entry-copy h2 a, .profile-link, .portal-caption > span:nth-child(2), .inline-link, a[href*="eyeland-design.com"]),
  :is(.stt-discipline-trigger > span:last-child, .work-index summary > span)::after { transition: none; }
}