/* Compact, tactile controls. Loaded after the scene and base styles. */
:root {
  --control-edge: #d9bd8e42;
  --control-fill: #142638;
  --control-ink: #e6dccb;
  --viewer-header: 64px;
}

/* One calm headline, sized to fit rather than clipped on a small phone. */
.portfolio-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
.portfolio-heading h1 { font-size: clamp(38px, 4.7vw, 68px); line-height: 1.12; white-space: nowrap; letter-spacing: -.035em; }
.portfolio-heading h1 em { display: inline; }
.portfolio-heading > div { min-width: 0; }

/* One icon language: fine rounded strokes, aligned on the same optical grid. */
.control-icon,
.nav-arrow svg,
.project-arrow svg,
.review-arrow svg,
.fullscreen-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

#portfolio-link,
.back-button,
.fullscreen-button,
.project-review,
.text-link,
.retry-button {
  min-height: 44px;
  touch-action: manipulation;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .16s, color .2s;
}

/* A readable menu label remains visible beside the brand on narrow screens. */
#portfolio-link {
  flex: none;
  gap: 13px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--control-edge);
  border-radius: 9px;
  background: linear-gradient(155deg, #1c2b39, #101e2b);
  box-shadow: inset 0 1px 0 #f4e1b914, 0 4px 14px #00000024;
  color: var(--control-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15px;
}
#portfolio-link > .nav-label { display: inline; }
#portfolio-link .nav-arrow {
  width: 19px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--champagne);
}
#portfolio-link .nav-arrow svg { width: 14px; height: 14px; stroke-width: 1.6; }

/* The entire card remains the link; the arrow makes its action easy to locate. */
.project-arrow {
  width: 44px;
  height: 44px;
  color: #e1c69b;
  transition: transform .16s;
}
.project-arrow:before {
  inset: 0;
  border: 1px solid #c7b28e50;
  background: linear-gradient(145deg, #203346, #122231);
  box-shadow: inset 0 1px 0 #f9e3bd1a, 0 4px 12px #0000002b;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.project-arrow svg { width: 17px; height: 17px; stroke-width: 1.65; }
.project-review {
  gap: 12px;
  width: fit-content;
  margin: 14px 0 0;
  padding: 10px 13px;
  border: 1px solid #c8b48e40;
  border-radius: 8px;
  background: linear-gradient(155deg, #192a39, #0e1d2b);
  box-shadow: inset 0 1px 0 #f9e3bd0a;
  color: #dbc7a7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.3;
}
.review-arrow svg { width: 15px; height: 15px; stroke-width: 1.65; }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid #c8b48e38; border-radius: 8px; background: #10202e; font-weight: 500; }

/* Reserve real layout space for the bar and home indicator, never overlay 3D. */
.viewer {
  height: 100svh;
  height: 100dvh;
  display: grid;
  grid-template-rows: calc(var(--viewer-header) + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.viewer-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  height: calc(var(--viewer-header) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(22px, env(safe-area-inset-right, 0px)) 0 max(22px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid #b8c6d52b;
  background: linear-gradient(180deg, #102031, #091623);
  box-shadow: 0 4px 18px #00000030;
}
.back-button {
  justify-self: start;
  justify-content: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid #dbc6a1;
  border-radius: 8px;
  background: linear-gradient(155deg, #e3d2b2, #c8ad80);
  box-shadow: inset 0 1px 0 #fff5dd5c, 0 2px 8px #00000030;
  color: #101b28;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.back-button > span:first-child { color: inherit; font-size: 19px; line-height: 1; }
.back-label-short { display: none; }
.fullscreen-button {
  justify-self: end;
  justify-content: center;
  width: 44px;
  padding: 11px;
  border: 1px solid #b8c7d33a;
  border-radius: 8px;
  background: #172a3c;
  box-shadow: inset 0 1px 0 #e3edf10b;
  color: #ded7c8;
}
.fullscreen-button svg { width: 18px; height: 18px; }
.frame-host { min-height: 0; height: 100%; overflow: hidden; }
.loading {
  top: calc(var(--viewer-header) + env(safe-area-inset-top, 0px));
  bottom: env(safe-area-inset-bottom, 0px);
}

@media (hover: hover) and (pointer: fine) {
  #portfolio-link:hover,
  .project-review:hover,
  .fullscreen-button:hover,
  .text-link:hover { background: #21364a; border-color: #d9bd8e8c; color: #f3dfbd; }
  #portfolio-link:hover .nav-arrow { background: transparent; color: #f3dfbd; }
  .back-button:hover { background: #ead9b9; border-color: #f3e4c8; }
  .project-row:hover .project-arrow:before { background: #dbc399; border-color: #ebd8b8; }
  .project-row:hover .project-arrow svg { transform: translate(1.5px, -1.5px); }
  #portfolio-link:hover .nav-arrow { transform: translate(1.5px, -1.5px); }
  #portfolio-link.is-back:hover .nav-arrow { transform: translateX(-2px); }
  .project-review:hover .review-arrow { transform: translate(1px, -1px); }
}

#portfolio-link:active,
.back-button:active,
.fullscreen-button:active,
.project-review:active,
.text-link:active,
.retry-button:active { transform: translateY(1px) scale(.98); box-shadow: inset 0 2px 5px #0000002b; }
.project-row:active .project-arrow { transform: scale(.94); }
.project-row:active .project-arrow:before { background: #dbc399; border-color: #ebd8b8; }
.project-row:active .project-arrow svg { color: #101d2b; }
#portfolio-link:focus-visible,
.back-button:focus-visible,
.fullscreen-button:focus-visible,
.project-review:focus-visible,
.text-link:focus-visible { outline: 2px solid #f2d3a0; outline-offset: 3px; }

@media (max-width: 1050px) {
  .portfolio-heading { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .portfolio-intro { margin-top: 20px; }
}
@media (max-width: 699px) {
  :root { --viewer-header: 64px; }
  .site-header { gap: 12px; }
  #portfolio-link { gap: 10px; padding: 0 11px 0 13px; font-size: 11px; }
  #portfolio-link > .nav-label { display: inline; }
  .portfolio-heading h1 { font-size: clamp(30px, 10.4vw, 46px); line-height: 1.15; margin-top: 12px; }
  .project-row { grid-template-columns: minmax(0, 1fr) 44px; column-gap: 12px; }
  .project-title { font-size: 26px; line-height: 1.08; }
  .project-desc { font-size: 12px; line-height: 1.65; }
  .project-review { margin-top: 12px; padding: 10px 12px; font-size: 11px; }
  .viewer-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .back-button { gap: 7px; padding: 10px 10px; font-size: 11px; }
  .back-label-long { display: inline; }
  .back-label-short { display: none; }
  .text-link { padding: 10px 9px; }
  .text-link span { margin-left: 7px; }
}

@media (max-width: 374px) {
  .site-header { padding-left: 17px; padding-right: 17px; }
  #portfolio-link { gap: 8px; padding-left: 11px; padding-right: 9px; }
  .viewer-header { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding-left: 9px; padding-right: 9px; }
  .back-button { padding-left: 9px; padding-right: 9px; font-size: 10px; }
}

@media (hover: none) {
  #portfolio-link:hover .nav-arrow { background: transparent; color: var(--champagne); transform: none; }
  .project-row:hover .project-arrow svg { transform: none; }
  .project-row:hover .project-image { transform: none; }
}

@media (max-height: 550px) and (orientation: landscape) {
  :root { --viewer-header: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  #portfolio-link:active,
  .back-button:active,
  .fullscreen-button:active,
  .project-review:active,
  .text-link:active,
  .retry-button:active,
  .project-row:active .project-arrow { transform: none; }
}

/* The gallery keeps its short way back to the entrance within thumb reach. */
body[data-view="portfolio"] .site-header { position:fixed; background:linear-gradient(180deg,#081321fa,#07111df5); border-bottom:1px solid #b9c6d51b; box-shadow:0 3px 16px #0002; }
#portfolio-link.is-back .nav-arrow svg { transform:rotate(-135deg); }
#portfolio-link.is-back:hover .nav-arrow { transform:none; }

/* A single, optically balanced icon family throughout the navigation. */
.control-icon { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
#portfolio-link,.project-review,.text-link,.back-button,.retry-button { font-kerning:normal; letter-spacing:.08px; }
#portfolio-link,.project-review,.text-link { font-weight:600; }
#portfolio-link .nav-arrow svg,.project-arrow svg,.review-arrow svg,.fullscreen-button svg { stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
#portfolio-link .nav-arrow svg { width:16px; height:16px; }
#portfolio-link.is-back .nav-arrow svg { transform:rotate(-135deg); }
.text-link,.retry-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.text-link .control-icon,.retry-button .control-icon { width:15px; height:15px; }
.back-button { font-weight:600; }
.back-button .control-icon { width:16px; height:16px; }
.collection-divider .control-icon { color:#c8af87; width:17px; height:17px; }
.door-caption svg { stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine) {
  #portfolio-link:hover .nav-arrow { transform:translate(1px,-1px); }
  #portfolio-link.is-back:hover .nav-arrow { transform:translateX(-2px); }
  .project-row:hover .project-arrow svg { transform:translate(1px,-1px); }
  .text-link:hover .control-icon { transform:translate(1px,-1px); }
}