/* Open compositions: the landscape is the canvas; projects are independent pieces. */
:root {
  --scene-ink: oklch(0.34574 0.03916 274.287);
  --scene-paper: oklch(0.94149 0.02131 85.945);
  --scene-signal: oklch(0.84467 0.13355 116.368);
  --scene-blue: oklch(0.40160 0.07092 238.703);
  --scene-shade: oklch(0.26214 0.07077 257.051);
  --scene-white: oklch(1 0 none);
  --hero-title: clamp(2.625rem, 1.65rem + 4.2vw, 5.375rem);
  --scene-space: clamp(2.5rem, 1.25rem + 4vw, 5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
.site-header { position:absolute; inset-block-start:0; inset-inline:0; z-index:10; color:var(--scene-white); background:transparent; border-color:transparent; }
.site-header .menu-toggle { color:inherit; }
.site-header .brand img { filter:brightness(0) invert(1); }
.site-header .nav-contact { border-color:color-mix(in oklch, var(--scene-white) 50%, transparent); }
.site-header :is(a,button):active { opacity:.72; }
.hero--immersive { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; max-inline-size:none; gap:0; overflow:clip; padding-block:clamp(7.75rem, 5.75rem + 2.4vw, 10.125rem) var(--scene-space); padding-inline:var(--gutter); color:var(--scene-white); background:var(--scene-blue); }
.hero-landscape { position:absolute; inset:0; z-index:-2; overflow:clip; pointer-events:none; }
.hero-landscape picture { display:block; inline-size:100%; block-size:100%; }
.hero-landscape img { inline-size:100%; block-size:100%; max-inline-size:none; object-fit:cover; object-position:center; transform:none; }
.hero--immersive::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, color-mix(in oklch, var(--scene-shade) 45%, transparent), color-mix(in oklch, var(--scene-shade) 35%, transparent) 45%, color-mix(in oklch, var(--scene-shade) 84%, transparent)); }
.hero--immersive .hero-copy { display:flex; flex-direction:column; align-items:center; gap:1.6rem; padding:0; max-inline-size:62rem; text-align:center; animation:none; }
.hero--immersive h1 { font-size:var(--hero-title); font-weight:600; line-height:1.08; letter-spacing:-.045em; margin:0; text-wrap:balance; }
.hero--immersive h1 span { color:inherit; }
.hero--immersive .hero-copy>p { max-inline-size:37rem; font-size:clamp(.9375rem, .88rem + .2vw, 1.0625rem); line-height:1.75; margin:0; color:inherit; }
.hero--immersive .hero-actions { flex-direction:row; flex-wrap:wrap; justify-content:safe center; align-items:center; gap:1rem 1.75rem; }
.hero--immersive :is(.button,.text-link) { min-block-size:3.375rem; padding-block:1rem; padding-inline:1.35rem; font-size:.8125rem; transform:none; transition:none; }
.hero--immersive .text-link { align-self:auto; border:1px solid color-mix(in oklch, var(--scene-white) 52%, transparent); background:color-mix(in oklch, var(--scene-shade) 50%, transparent); }
.hero--immersive .button-paper { background:var(--scene-paper); color:var(--scene-ink); }
.hero--immersive :is(.button,.text-link):active { opacity:.76; }
.hero-stage { container-type:inline-size; position:relative; display:flex; flex-direction:column; gap:clamp(1rem, calc(8vw - 3rem), 4rem); inline-size:min(100%,70rem); margin-block-start:var(--scene-space); padding:0; background:transparent; color:var(--scene-white); border:0; border-radius:0; box-shadow:none; transform:none; }
.stage-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.5rem; padding:0; font-size:.8125rem; font-weight:500; }
.stage-heading>a { display:inline-flex; align-items:center; gap:1em; min-block-size:2.75rem; font-size:.8125rem; }
.stage-heading>a span { margin:0; }
.stage-heading>a:active { opacity:.7; }
.stage-projects { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:clamp(1.75rem, 1rem + 2vw, 3rem); align-items:start; }
.stage-project { min-inline-size:0; background:transparent; overflow:visible; color:inherit; }
.stage-art { position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; align-items:start; block-size:auto; min-block-size:0; aspect-ratio:1.5; padding:0; background:transparent; color:inherit; overflow:visible; }
.stage-art>p { align-self:end; grid-column:1; grid-row:2; position:relative; z-index:1; font-size:clamp(1.375rem, 1rem + 1vw, 1.875rem); font-weight:600; line-height:1.18; letter-spacing:-.035em; max-inline-size:11ch; margin:0; text-wrap:balance; }
.stage-client-logo { grid-column:1; grid-row:1; block-size:2.4rem; inline-size:auto; max-inline-size:7rem; object-fit:contain; margin:0; }
.stage-taua .stage-art>p { max-inline-size:11ch; }
.stage-taua .stage-aurora { position:absolute; inset-block-end:0; inset-inline-end:-.6rem; inline-size:61%; block-size:112%; object-fit:contain; object-position:center bottom; }
.stage-amedinal .stage-art { background:transparent; }
.stage-amedinal .stage-client-logo { block-size:2.6rem; margin:0; filter:brightness(0) invert(1); }
.stage-amedinal .stage-art>p { font-size:clamp(1.375rem, 1rem + 1vw, 1.875rem); grid-column:1 / -1; max-inline-size:14ch; }
.stage-cross { position:absolute; inset-inline-end:0; inset-block-end:-.4rem; font-size:9rem; line-height:1; font-weight:200; color:color-mix(in oklch, var(--scene-signal) 40%, transparent); }
.stage-legal .stage-art { display:block; background:transparent; color:inherit; padding:0; }
.stage-operation-visual { inline-size:100%; block-size:100%; object-fit:contain; }
.stage-legal-line { display:none; }
.stage-caption { position:relative; display:flex; flex-direction:column; gap:.3rem; padding-block:1.35rem 0; padding-inline:0 1.6rem; min-block-size:0; color:inherit; }
.stage-caption h2 { font-size:1.125rem; font-weight:650; letter-spacing:-.025em; line-height:1.4; margin:0; }
.stage-caption>span:not(.stage-arrow) { font-size:.8125rem; line-height:1.6; color:inherit; }
.stage-arrow { position:absolute; inset-inline-end:0; inset-block-start:1.4rem; font-size:1.25rem; transition:none; }
.stage-project:focus-visible { outline:2px solid var(--scene-paper); outline-offset:.6rem; }
.stage-project:active { opacity:.72; }
/* Below the hero the same unframed language continues through the portfolio. */
.projects .project-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr)); gap:clamp(2.5rem, 1rem + 4vw, 5rem); }
.projects .project-card:nth-child(2),.projects .project-card:nth-child(4) { margin-block-start:0; }
.projects .project-art { background:transparent; color:var(--scene-paper); padding:0; transform:none; transition:none; }
.projects .project-description { padding-block-start:1.75rem; }
.projects .art-legal { padding:0; }
.projects .art-legal .operation-preview { inline-size:100%; block-size:100%; object-fit:contain; }
.projects .art-tag { inset-inline-start:0; inset-block-end:0; }
.projects .art-amedinal { display:grid; grid-template-rows:auto auto 1fr auto; gap:clamp(.875rem, 1.8vw, 1.5rem); aspect-ratio:auto; overflow:clip; }
.projects .art-amedinal .amedinal-mark { block-size:clamp(2.875rem, 4vw, 3.625rem); inline-size:auto; margin:0; filter:brightness(0) invert(1); }
.projects .art-amedinal>p { margin:0; }
.projects .art-amedinal .amedinal-operation { display:block; inline-size:100%; block-size:auto; margin:0; align-self:center; filter:none; }
.projects .art-amedinal .art-tag { position:static; }
.projects .art-cross { color:color-mix(in oklch,var(--scene-signal) 25%,transparent); }
.projects .art-hotel .pilot-label { color:inherit; border-color:currentColor; }
.projects .hotel-motif span { background:var(--scene-signal); }
.projects .project-card:active { opacity:.76; }
@container (width < 40rem) {
  .stage-projects { grid-template-columns:1fr; gap:1.5rem; }
  .stage-project { display:grid; grid-template-columns:5.5rem 1fr; gap:1.25rem; align-items:center; }
  .stage-art { inline-size:5.5rem; aspect-ratio:1; }
  .stage-art>p,.stage-cross { display:none; }
  .stage-client-logo { inline-size:4rem; block-size:auto; margin-block-start:.5rem; }
  .stage-taua .stage-aurora { block-size:75%; inline-size:66%; inset-inline-end:-.3rem; }
  .stage-amedinal .stage-client-logo { block-size:3.5rem; inline-size:auto; margin-block-start:1rem; }
  .stage-legal .stage-operation-visual { display:block; }
  .stage-caption { padding-block:0; gap:.3rem; }
  .stage-arrow { inset-block-start:.2rem; }
}
@media (max-width:900px) {
  .site-header .menu-toggle { display:flex; }
  .site-header .primary-nav { display:none; }
  .site-header .primary-nav.is-open { display:flex; }
  .site-header .primary-nav.is-open { background:var(--scene-shade); padding-block:1rem; padding-inline:1.2rem; margin-block-start:.75rem; border:1px solid color-mix(in oklch,var(--scene-white) 30%,transparent); }
}
@media (max-width:600px) { .hero--immersive h1 br { display:none; } }
@media (hover:hover) and (pointer:fine) {
  .site-header .nav-contact:hover { background:var(--scene-paper); color:var(--scene-ink); }
  .hero--immersive .text-link:hover { background:color-mix(in oklch,var(--scene-shade) 80%,transparent); border-color:var(--scene-white); }
  .hero--immersive .button-paper:hover { background:var(--scene-signal); }
  .stage-project:hover .stage-arrow { transform:translate(.12rem,-.12rem); }
}
@media (prefers-reduced-motion:no-preference) {
  .stage-arrow { transition:transform 180ms var(--ease-out); }
}
@media print {
  .site-header { position:static; color:var(--scene-ink); }
  .site-header .brand img { filter:none; }
  .hero--immersive { display:block; padding:2rem; color:var(--scene-ink); background:var(--scene-paper); }
  .hero--immersive h1,.hero--immersive .hero-copy>p,.hero-stage { color:var(--scene-ink); }
  .hero-landscape,.hero--immersive::before { display:none; }
  .stage-legal .stage-operation-visual { filter:grayscale(1) invert(1); }
  .stage-projects { grid-template-columns:repeat(3,1fr); }
}
/* Monochrome client marks keep their geometry readable over the landscape. */
.stage-taua .stage-client-logo,.projects .taua-mark { filter:brightness(0) invert(1); }
@media print {
  .projects .project-art { color:var(--scene-ink); }
  .projects .taua-mark,.projects .art-amedinal .amedinal-mark { filter:none; }
  .projects .art-legal .operation-preview { filter:grayscale(1) invert(1); }
}
@media print {
  .stage-taua .stage-client-logo,.stage-amedinal .stage-client-logo { filter:none; }
}
@media print {
  .projects .art-tag { color:var(--scene-ink); }
}