/* Block 2 only. Measurements refer to the screen inside reference 02,
   excluding the phone hardware and image-viewer controls (556 × 1252). */
body { margin: 0; }
.landing {
  --landing-cream: #f5efe5;
  --landing-forest: #193b34;
  position: relative; isolation: isolate; overflow: hidden;
  container-type: inline-size;
  width: min(100%, 44.41svh); min-height: 100svh; margin-inline: auto;
  background: var(--landing-cream); text-align: center;
}
.landing-brand { position: relative; z-index: 1; padding-top: 27.5cqi; }
.landing-symbol { width: 56.475%; margin: 0 auto; }
.landing-symbol img { display: block; width: 100%; height: auto; border-radius: 24%; }
.landing-brand h1 {
  margin: 1.1cqi 0 0; padding-left: .8cqi; color: var(--landing-forest);
  font: 800 13cqi/1.1 var(--cuoka-font-ui); letter-spacing: .8cqi;
}
.landing-claim {
  width: 72%; margin: 13.5cqi auto 0; color: var(--landing-forest);
  font: 400 7cqi/1.08 var(--cuoka-font-heading); text-wrap: wrap;
}
/* Only clean photographic fragments, never a screenshot of the interface.
   The foliage crop supplies texture behind the real HTML controls. */
.landing-scene {
  position: absolute; z-index: -1; inset: 123.9cqi 0 0;
  background: #081411 url('/assets/assets/landing-foliage-reference-provisional.png') center bottom / 100% 100% no-repeat;
}
.landing-scene::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 42.27cqi;
  background: url('/assets/assets/landing-photo-reference-provisional.png') center top / 100% auto no-repeat;
  mask-image: linear-gradient(#000 83%, transparent);
}
.landing-scene::after {
  content: ''; position: absolute; inset: -1px 0 0;
  background: linear-gradient(to bottom, var(--landing-cream), transparent 5cqi, transparent 33cqi, #07151088 55cqi, #06110fef 100%);
}
.landing-bottom { position: relative; z-index: 1; margin-top: 43.3cqi; padding: 0 12.8% 13.5cqi; }
.landing-actions { display: grid; gap: 4.1cqi; }
.landing-actions .cuoka-button {
  width: 100%; min-height: 15.3cqi; padding: 2cqi;
  background: var(--landing-forest); color: #f5f1e7;
  font-size: 4.65cqi; font-weight: 400; gap: 3.5cqi;
}
.landing-actions span { font-size: 6.8cqi; line-height: 1; }
.landing-actions .cuoka-button--secondary {
  min-height: 13cqi; border: 1.5px solid #e9e6d6;
  color: #f5f1e7; background: transparent; font-size: 4cqi;
}
.landing-motto { margin: 8.5cqi -3cqi 0; color: #a4aaa3; font-size: 2.9cqi; letter-spacing: .43cqi; white-space: nowrap; }
.landing a:focus-visible { outline: 3px solid #cda582; outline-offset: 4px; }
.landing-notice { display: none; position: relative; z-index: 2; margin: 0 1rem 1rem; padding: 1.5rem; border-radius: var(--cuoka-radius-md); background: var(--landing-cream); text-align: left; }
.landing-notice:target { display: block; }
.landing-notice h2 { margin: 0; font-family: var(--cuoka-font-heading); }
.notice-back { display: block; padding: 1rem 0 .25rem; color: var(--cuoka-forest); }
@media (max-width: 600px) {
  .landing { width: 100%; }
}
@media (min-width: 601px) {
  body.cuoka-theme { background: #e4e0d7; }
  .landing { box-shadow: 0 0 5rem #123e3412; }
}
@media (hover: hover) {
  .landing-actions .cuoka-button:hover { background: #102b24; }
}