:root {
  --grain-yellow: #ECC50D;
}

.grain-foyer {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  color: #1A1A1A;
  font-family: 'Lato', sans-serif;
  line-height: 1.35;
}

.grain-foyer__picture,
.grain-foyer__frame {
  position: absolute;
  inset: 0;
  display: block;
}

.grain-foyer__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.grain-foyer__identity,
.grain-foyer__links {
  position: absolute;
  box-sizing: border-box;
  text-align: center;
}

.grain-foyer__identity {
  top: 19%;
  left: 22%;
  width: 44%;
}

.grain-foyer__name,
.grain-foyer__descriptor,
.grain-foyer__detail p {
  margin: 0;
}

.grain-foyer__name {
  color: #1A1A1A;
  font-family: 'Lato', sans-serif;
  font-size: clamp(30px, 2.35vw, 48px);
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.2;
  white-space: nowrap;
}

.grain-foyer__name sup {
  margin-left: 0.08em;
  font-size: 0.55em;
  vertical-align: super;
}

.grain-foyer__descriptor {
  margin-top: 0.7em;
  color: #303030;
  font-size: clamp(9px, 0.7vw, 12px);
  font-weight: 400;
  letter-spacing: 0.19em;
}

.grain-foyer__links {
  top: 43%;
  left: 30%;
  width: 28%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 9%;
  row-gap: clamp(56px, 9vh, 90px);
}

.grain-foyer__item {
  position: relative;
  min-width: 0;
  text-align: center;
}

.grain-foyer__main-link,
.grain-foyer__pagac {
  color: #1A1A1A !important;
  text-decoration: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.grain-foyer__main-link {
  display: inline-block;
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.3;
  white-space: nowrap;
}

.grain-foyer__detail {
  position: absolute;
  top: 100%;
  left: 50%;
  width: clamp(230px, 22vw, 360px);
  margin: 0;
  padding-top: 0.7em;
  color: #303030;
  font-size: clamp(9px, 0.65vw, 11px);
  font-weight: 400;
  letter-spacing: 0.075em;
  line-height: 1.55;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.grain-foyer__detail > p {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .grain-foyer__item:hover .grain-foyer__detail {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
}

.grain-foyer__item:focus-within .grain-foyer__detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.grain-foyer__pagac {
  display: inline-block;
  margin-top: 0.8em;
  font-size: 0.92em;
  letter-spacing: 0.12em;
}

.grain-foyer__main-link:focus-visible,
.grain-foyer__pagac:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.floating-logo.foyer-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 899px) {
  .grain-foyer {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .grain-foyer__identity {
    top: 18%;
  }

  .grain-foyer__name {
    font-size: clamp(13px, 2.6vw, 25px);
    letter-spacing: 0.07em;
  }

  .grain-foyer__descriptor {
    margin-top: 0.45em;
    font-size: clamp(6px, 0.95vw, 9px);
    letter-spacing: 0.07em;
  }

  .grain-foyer__links {
    top: 42%;
    left: 29%;
    width: 30%;
    column-gap: 4%;
    row-gap: clamp(16px, 5vw, 40px);
  }

  .grain-foyer__main-link {
    position: relative;
    font-size: clamp(10px, 1.7vw, 15px);
    letter-spacing: 0.07em;
  }

  .grain-foyer__main-link::before {
    content: "";
    position: absolute;
    inset: -14px -8px;
  }

  .grain-foyer__detail {
    width: clamp(130px, 22vw, 230px);
    padding-top: 0.3em;
    font-size: clamp(6px, 0.95vw, 9px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain-foyer__detail {
    transition: none;
  }
}


/* Phase 2 — a floor sphere and five rays sharing one origin. */
.grain-foyer__probes {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; overflow: hidden; pointer-events: none;
}
.grain-foyer__rays {
  fill: none; stroke: rgba(26,26,26,.19); stroke-width: .65px;
  stroke-linecap: butt;
}
.grain-foyer__rays line { vector-effect: non-scaling-stroke; }
.grain-foyer__sphere {
  position: absolute; left: 44%; top: 77.5%;
  width: clamp(18px,1.45vw,24px); aspect-ratio: 1;
  border: 0; border-radius: 50%;
  background: radial-gradient(circle at 29% 25%, #f4da58 0%, #ECC50D 48%, #d6af0c 74%, #ad8c0a 100%);
  transform: translate(-50%,-100%); z-index: 2;
  pointer-events: none; isolation: isolate;
}
.grain-foyer__sphere::before {
  content: ''; position: absolute; left: -2%; top: 92%;
  width: 113%; height: 19%; border-radius: 50%;
  background: rgba(42,32,12,.23); filter: blur(1.7px);
  transform: translateX(2px); z-index: -1;
}
.grain-foyer__frame { z-index: 3; }
@media (max-width:899px) {
  .grain-foyer__probes, .grain-foyer__sphere { display: none; }
}

.grain-foyer__rays line.is-held { stroke: rgba(26,26,26,.30); }
.grain-foyer.is-ray-grabbable { cursor: grab; }
.grain-foyer.is-ray-dragging { cursor: grabbing; user-select: none; }
.grain-foyer__item.is-ray-target .grain-foyer__detail {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%,0); transition-delay: 0s;
}

/* Mobile art direction: canonical artwork, one entrance, touch-native links. */
@media (max-width: 899px) {
  .grain-foyer { height: 100svh; min-height: 520px; aspect-ratio: auto; }
  .grain-foyer__image { object-position: 44% 50%; }
  .grain-foyer__identity { top: 20%; left: 5%; width: 90%; }
  .grain-foyer__name { font-size: clamp(21px, 5.6vw, 32px); letter-spacing: .075em; }
  .grain-foyer__descriptor { margin-top: 1em; font-size: clamp(8px, 2.1vw, 11px); letter-spacing: .13em; }
  .grain-foyer__links { top: 40%; left: 8%; width: 84%; column-gap: 8%; row-gap: clamp(28px, 5svh, 48px); }
  .grain-foyer__main-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: clamp(13px, 3.4vw, 17px); letter-spacing: .11em; }
  .grain-foyer__main-link::before { content: none; }
  .grain-foyer__detail { display: none; }
  .grain-foyer__probes, .grain-foyer__sphere { display: block; }
  .grain-foyer__sphere { left: 50%; width: 20px; }
  .hero-wrapper#studio { display: none; }
}
@media (max-width: 899px) and (orientation: landscape) {
  .grain-foyer { min-height: 360px; }
  .grain-foyer__identity { top: 17%; }
  .grain-foyer__links { top: 37%; row-gap: 12px; }
}

/* Mobile polish only: clean reframing, satin sphere and a quiet active cue. */
@media (max-width: 899px) {
  .grain-foyer__image { object-position: 55% 50%; }
  .grain-foyer__sphere {
    background: radial-gradient(circle at 28% 24%, #f3db69 0%, #eed039 24%, #ECC50D 48%, #d3af12 76%, #aa8d16 100%);
  }
  .grain-foyer__sphere::before {
    left: -20%; top: 94%; width: 140%; height: 22%;
    background: rgba(64,55,43,.22); filter: blur(2.2px);
    transform: none;
  }
  .grain-foyer__main-link { transition: opacity 450ms ease; }
  .grain-foyer__item.is-ray-target .grain-foyer__main-link,
  .grain-foyer__main-link:active { opacity: .78; }
  .grain-foyer__main-link:active { transition: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .grain-foyer__main-link { transition: none; }
}

/* Mobile disclosure navigation; desktop links and artwork remain untouched. */
.grain-foyer__mobile-toggle, .grain-foyer__mobile-panel { display: none; }
@media (max-width: 899px) {
  .grain-foyer { min-height: 620px; }
  .grain-foyer__image { object-position: 50% 50%; }
  .grain-foyer__identity { top: 17%; }
  .grain-foyer__links { top: 33%; row-gap: 16px; }
  .grain-foyer__main-link { display: none; }
  .grain-foyer__mobile-toggle {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    appearance: none; width: 100%; min-height: 48px; margin: 0;
    padding: 12px 8px !important; border: .65px solid rgba(26,26,26,.25) !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    color: #1A1A1A !important; font-family: inherit; font-size: clamp(13px,3.4vw,17px);
    font-weight: 400; line-height: 1.3; letter-spacing: .11em; cursor: pointer;
  }
  .grain-foyer__mobile-toggle:focus-visible { outline: 1px solid #1A1A1A; outline-offset: 3px; }
  .grain-foyer__item.is-mobile-open .grain-foyer__mobile-toggle { border-color: rgba(26,26,26,.48) !important; }
  .grain-foyer__item.is-ray-target .grain-foyer__mobile-toggle { opacity: .78; }
  .grain-foyer__mobile-panel:not([hidden]) {
    display: grid; position: absolute; top: calc(100% + 12px); left: 0; width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 8px; text-align: center;
  }
  .grain-foyer__mobile-panel[hidden] { display: none !important; }
  .grain-foyer__mobile-panel a {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 4px; box-sizing: border-box; color: #1A1A1A !important; background: transparent !important;
    text-decoration: none; font: 400 10px/1.5 'Lato',sans-serif; letter-spacing: .05em;
  }
  .grain-foyer__mobile-panel a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grain-foyer__mobile-panel a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
}
@media (max-width:899px) and (orientation:landscape) {
  .grain-foyer { min-height: max(620px,140vw); }
}

@media (max-width:899px) {
  .grain-foyer .grain-foyer__item .grain-foyer__mobile-toggle,
  .grain-foyer .grain-foyer__item .grain-foyer__mobile-toggle:hover,
  .grain-foyer .grain-foyer__item .grain-foyer__mobile-toggle:focus,
  .grain-foyer .grain-foyer__item .grain-foyer__mobile-toggle:active {
    background: transparent !important; background-color: transparent !important; box-shadow: none !important;
  }
  .grain-foyer__mobile-panel a { font-size: 11px; }
}

/* Mobile foyer language access, above the identity. */
.grain-foyer__language { display: none; }
@media (max-width:899px) {
  .grain-foyer__language {
    display: flex; position: absolute; top: max(10px,env(safe-area-inset-top));
    right: max(16px,env(safe-area-inset-right)); align-items: center;
    margin: 0; padding: 0; width: auto; z-index: 4;
    background: transparent; border: 0; box-shadow: none;
    font: 400 11px/1.3 'Lato',sans-serif; letter-spacing: .12em; color: #1A1A1A;
  }
  .grain-foyer__language a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; margin: 0; padding: 0 !important;
    color: #1A1A1A !important; font: inherit; letter-spacing: inherit;
    text-decoration: none; background: transparent !important; border: 0; box-shadow: none;
    opacity: .7;
  }
  .grain-foyer__language a[aria-current="page"] { opacity: 1; }
  .grain-foyer__language span { opacity: .45; }
  .grain-foyer__language a:focus-visible { outline: 1px solid currentColor; outline-offset: -5px; }
}

/* Prague atmosphere: outdoors is masked to the canonical glass; mobile receives time only. */
.grain-foyer {
  --foyer-time-tint: transparent;
  --window-time-filter: saturate(1); --window-weather-filter: saturate(1);
  --window-time-tint: transparent; --window-weather-tint: transparent;
}
.grain-foyer__picture::after { content: none; }
.grain-foyer__window-atmosphere {
  display: none; position: absolute; pointer-events: none;
  clip-path: polygon(3.88020833% 10.37037037%,13.28125000% 18.37962963%,13.28125000% 53.47222222%,11.69270833% 53.47222222%,11.69270833% 67.50000000%,3.88020833% 70.13888889%);
  background: linear-gradient(var(--window-weather-tint),var(--window-weather-tint)),linear-gradient(var(--window-time-tint),var(--window-time-tint));
  -webkit-backdrop-filter: var(--window-time-filter) var(--window-weather-filter);
  backdrop-filter: var(--window-time-filter) var(--window-weather-filter);
}
@media(min-width:900px){
  .grain-foyer[data-foyer-time] .grain-foyer__window-atmosphere { display: block; }
}
.grain-foyer[data-foyer-time="DUSK"] {
  --window-time-filter: saturate(.75) brightness(.82); --window-time-tint: rgba(54,73,90,.22);
  --foyer-time-tint: rgba(67,54,43,.035);
}
.grain-foyer[data-foyer-time="NIGHT"] {
  --window-time-filter: saturate(.55) brightness(.60) contrast(.94); --window-time-tint: rgba(20,39,57,.40);
  --foyer-time-tint: rgba(22,29,37,.085);
}
.grain-foyer[data-foyer-weather="CLOUDY"] { --window-weather-filter: grayscale(.55) contrast(.83); --window-weather-tint: rgba(144,155,165,.13); }
.grain-foyer[data-foyer-weather="FOG"] { --window-weather-filter: saturate(.8) contrast(.74); --window-weather-tint: rgba(230,232,229,.35); }
.grain-foyer[data-foyer-weather="FOG"][data-foyer-time="NIGHT"] { --window-weather-tint: rgba(115,133,147,.26); }
.grain-foyer[data-foyer-weather="RAIN"] { --window-weather-filter: saturate(.78) contrast(.90) brightness(.9); --window-weather-tint: rgba(90,106,121,.12); }
.grain-foyer[data-foyer-weather="SNOW"] { --window-weather-filter: saturate(.6) contrast(.87); --window-weather-tint: rgba(231,239,244,.2); }
.grain-foyer[data-foyer-weather="CLEAR"][data-foyer-time="DAY"] .grain-foyer__window-atmosphere { -webkit-backdrop-filter: none; backdrop-filter: none; }
.grain-foyer__window-rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.grain-foyer__window-rain line { stroke: rgba(223,231,237,.7); stroke-width: .5px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.grain-foyer[data-foyer-weather="RAIN"] .grain-foyer__window-rain { opacity: .45; }
.grain-foyer__weather-credit { margin: .65rem 0 0; font-size: 11px; line-height: 1.5; color: #777; }
.grain-foyer__weather-credit a { font: inherit; color: inherit !important; text-decoration: none; }
@media(max-width:899px){
  .grain-foyer__window-atmosphere { display: none !important; }
  .grain-foyer__picture::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(var(--foyer-time-tint),var(--foyer-time-tint)); opacity: .55;
  }
}

/* Environmental lighting: three separate source-aligned surfaces, no global filter. */
@media(min-width:900px){
  .grain-foyer { --foyer-room-tint: transparent; --foyer-floor-tint: transparent; }
  .grain-foyer__room-light,.grain-foyer__floor-light {
    display: none; position: absolute; pointer-events: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203840%202160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H3840V2160H0Z%20M149%20224L510%20397V1155H449V1458L149%201515Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203840%202160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H3840V2160H0Z%20M149%20224L510%20397V1155H449V1458L149%201515Z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .grain-foyer[data-foyer-time] .grain-foyer__room-light,
  .grain-foyer[data-foyer-time] .grain-foyer__floor-light { display: block; }
  .grain-foyer__room-light {
    background: radial-gradient(ellipse 25% 29% at 24% 49%,var(--foyer-room-tint),transparent 80%),radial-gradient(ellipse 13% 35% at 12% 49%,var(--foyer-room-tint),transparent 85%);
  }
  .grain-foyer__floor-light { background: radial-gradient(ellipse 24% 9% at 25% 82%,var(--foyer-floor-tint),transparent 85%); }
  .grain-foyer[data-foyer-time="DAY"][data-foyer-weather="CLEAR"] {
    --foyer-room-tint: rgba(255,237,191,.11); --foyer-floor-tint: rgba(255,235,178,.12);
  }
  .grain-foyer[data-foyer-weather="CLOUDY"] {
    --foyer-room-tint: rgba(100,122,145,.055); --foyer-floor-tint: rgba(67,87,108,.04);
    --window-weather-filter: grayscale(.4) contrast(.90); --window-weather-tint: rgba(144,155,165,.08);
  }
  .grain-foyer[data-foyer-weather="RAIN"] {
    --foyer-room-tint: rgba(85,108,132,.075); --foyer-floor-tint: rgba(55,77,97,.055);
    --window-weather-filter: saturate(.84) contrast(.92) brightness(.93); --window-weather-tint: rgba(90,106,121,.1);
  }
  .grain-foyer[data-foyer-weather="FOG"],.grain-foyer[data-foyer-weather="SNOW"] {
    --foyer-room-tint: rgba(206,215,224,.07); --foyer-floor-tint: rgba(211,221,230,.07);
  }
  .grain-foyer[data-foyer-weather="FOG"] { --window-weather-filter: saturate(.85) contrast(.88); --window-weather-tint: rgba(230,232,229,.22); }
  .grain-foyer[data-foyer-time="DUSK"] {
    --foyer-room-tint: rgba(40,58,78,.07); --foyer-floor-tint: rgba(43,63,84,.065);
    --window-time-filter: saturate(.85) brightness(.91); --window-time-tint: rgba(54,73,90,.16);
  }
  .grain-foyer[data-foyer-time="NIGHT"] {
    --foyer-room-tint: rgba(23,39,58,.105); --foyer-floor-tint: rgba(29,48,68,.085);
    --window-time-filter: saturate(.72) brightness(.76) contrast(1.03); --window-time-tint: rgba(29,48,70,.27);
  }
  .grain-foyer[data-foyer-weather="RAIN"] .grain-foyer__window-rain line { animation: grain-glass-rain 11s linear infinite; }
  .grain-foyer__window-rain line:nth-child(3n) { animation-duration: 13.1s !important; animation-delay: -7.3s !important; }
  .grain-foyer__window-rain line:nth-child(3n+1) { animation-duration: 9.7s !important; animation-delay: -3.1s !important; }
  .grain-foyer__window-rain line:nth-child(3n+2) { animation-delay: -5.8s !important; }
}
@keyframes grain-glass-rain { 0% { opacity: 0; transform: translateY(-20px); } 15%,75% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px); } }
@media(max-width:899px){.grain-foyer__room-light,.grain-foyer__floor-light { display: none !important; }}
@media(prefers-reduced-motion:reduce){.grain-foyer .grain-foyer__window-rain line { animation: none !important; }}
