/* 2026 mobile-first refresh — warm editorial materiality with quiet technology */
:root {
  --paper-warm: #f3eee4;
  --paper-light: #fbf8f1;
  --ink-warm: #202d2d;
  --moss: #536a62;
  --clay: #b86f50;
  --aqua-muted: #75a9a4;
  --deep-moss: #152525;
}

html {
  background: var(--paper-warm);
  scroll-padding-top: 5.5rem;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(184, 111, 80, .08), transparent 26rem),
    var(--paper-warm);
  color: var(--ink-warm);
  letter-spacing: .012em;
}

::selection { color: #fffdf8; background: var(--clay); }

.hero-background {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(164, 210, 196, .18), transparent 21rem),
    radial-gradient(circle at 16% 14%, rgba(184, 111, 80, .27), transparent 31rem),
    radial-gradient(circle at 83% 74%, rgba(91, 152, 147, .25), transparent 29rem),
    linear-gradient(135deg, #0b1718 0%, #142827 48%, #18221e 100%);
}
.hero-editorial-marks { display: none; }
.hero-orb-one { background: #9a5d46; }
.hero-orb-two { background: #5f9995; }
.hero-orb-three { background: #758c70; }
.hero-grid { background-image: linear-gradient(rgba(204, 228, 216, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(204, 228, 216, .16) 1px, transparent 1px); }
.hero-kicker { color: #d2e8d8; }
.hero-kicker span { background: #c98664; box-shadow: 0 0 13px #c98664; }

.section-kicker,
.product-eyebrow {
  color: var(--moss);
  font-family: var(--display);
  letter-spacing: .14em;
}
.product-type { color: var(--moss); }

.section-heading h2 em { color: var(--clay); }

/* Paper-like content surfaces keep the dark hero as the technical counterpoint. */
#about { background: var(--paper-light); }
#about::before {
  right: -18rem;
  border-color: rgba(83, 106, 98, .17);
  box-shadow: 0 0 0 5rem rgba(83, 106, 98, .025), 0 0 0 10rem rgba(184, 111, 80, .025);
}
.about-content > p { color: #41514d; }
.capability-list li { border-color: rgba(32, 45, 45, .15); color: #30403c; }
.capability-list span { color: var(--clay); }

#profile {
  background:
    linear-gradient(135deg, rgba(117, 169, 164, .10), transparent 52%),
    #e9e4d8;
}
#profile::before {
  background-image: radial-gradient(rgba(83, 106, 98, .28) .7px, transparent .8px);
  mask-image: linear-gradient(90deg, transparent, black 24%, transparent 86%);
}
.profile-card {
  border-color: rgba(255, 253, 247, .84);
  border-radius: 1.05rem;
  background: rgba(253, 250, 243, .68);
  box-shadow: 0 17px 36px rgba(52, 64, 56, .09);
}
.profile-card::before { background: var(--clay); box-shadow: 0 0 0 .28rem rgba(184, 111, 80, .12); }
.profile-card:hover { box-shadow: 0 22px 44px rgba(52, 64, 56, .14); }
.avatar { border-color: rgba(255, 253, 247, .9); box-shadow: 0 10px 24px rgba(47, 61, 54, .15); }
.member-info h3 { color: var(--ink-warm); }
.member-info .title { color: var(--moss); }
.member-info .desc { color: #5a6862; }

/* Products: small-run objects, not an ecommerce grid. */
#products {
  padding-top: clamp(5.5rem, 11vw, 8.5rem);
  color: var(--ink-warm);
  background: var(--paper-light);
}
#products::before {
  opacity: .18;
  background-image: linear-gradient(rgba(83, 106, 98, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 106, 98, .2) 1px, transparent 1px);
}
#products::after {
  border-color: rgba(184, 111, 80, .16);
  box-shadow: 0 0 80px rgba(184, 111, 80, .08), inset 0 0 70px rgba(83, 106, 98, .07);
}
.product-intro h2 em { color: var(--clay); }
.product-intro > p:last-child { color: #586660; }
.product-eyebrow span { background: var(--clay); box-shadow: 0 0 0 .28rem rgba(184, 111, 80, .12); }
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 4vw, 3.5rem); }
.product-card { overflow: hidden; border: 1px solid rgba(32, 45, 45, .10); border-radius: 1.1rem; background: #e9e5dc; box-shadow: 0 14px 30px rgba(50, 54, 47, .06); }
.product-card-offset { margin-top: 0; }
.product-card:hover { transform: translateY(-.4rem); }
.product-image { border-radius: 0; }
.product-image::after { background: linear-gradient(180deg, transparent 44%, rgba(23, 37, 37, .34)); }
.concept-badge { background: rgba(251, 248, 241, .86); color: var(--deep-moss); backdrop-filter: blur(8px); }
.product-number { color: #fffdf8; }
.product-info { background: #e9e5dc; }
.product-info h3 { color: var(--ink-warm); }
.product-info > p:not(.product-type) { min-height: 0; color: #56625d; }
.product-info a, .exhibition-note a { color: var(--moss); }
.product-info a:hover, .exhibition-note a:hover { color: var(--clay); }
.exhibition-note { border-color: rgba(32, 45, 45, .12); background: #dce4dc; }
.exhibition-status { color: var(--moss); }
.exhibition-status span { background: var(--clay); box-shadow: 0 0 0 .28rem rgba(184, 111, 80, .12); }
.exhibition-note h3 { color: var(--ink-warm); }
.exhibition-note p { color: #586660; }

/* A darker, quieter register for the action area. */
#preorder {
  background:
    radial-gradient(circle at 12% 7%, rgba(117, 169, 164, .25), transparent 24rem),
    radial-gradient(circle at 88% 88%, rgba(184, 111, 80, .18), transparent 28rem),
    var(--deep-moss);
}
#preorder::before {
  opacity: .13;
  background-image: linear-gradient(rgba(220, 236, 225, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 236, 225, .16) 1px, transparent 1px);
}
.preorder-intro h2 em { color: #b6d6c6; text-shadow: none; }
.preorder-intro > p { color: #c7d4cc; }
.preorder-intro .section-kicker { color: #a9cabb; }
.preorder-perks > div { color: #b7c7bd; }
.preorder-perks i { border-color: rgba(203, 229, 215, .26); color: #b7d9c9; }
.preorder-perks b { color: #fffdf8; }
.preorder-form {
  border-color: rgba(238, 235, 220, .19);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(39, 60, 57, .97), rgba(20, 35, 34, .97));
  box-shadow: 0 24px 55px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .06);
}
.form-heading { border-color: rgba(238, 235, 220, .14); }
.form-heading span { color: #c8e2d6; }
.form-field > span, .product-picker legend { color: #eef4ed; }
.form-field b, .product-picker b, .privacy-consent b { color: #d6a58d; }
.form-field input, .form-field select, .form-field textarea { border-color: rgba(236, 240, 226, .18); background: rgba(7, 20, 19, .35); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #abcfc0; box-shadow: 0 0 0 3px rgba(171, 207, 192, .16); }
.product-choice-grid { grid-template-columns: repeat(2, 1fr); }
.product-choice-grid span { border-color: rgba(236, 240, 226, .18); background: rgba(7, 20, 19, .24); }
.product-choice-grid i { color: #b5d9c7; }
.product-choice-grid input:checked + span { border-color: #bed9ca; background: rgba(150, 193, 174, .19); box-shadow: 0 0 0 2px rgba(190, 217, 202, .12); }
.preorder-submit { color: #182725; background: linear-gradient(110deg, #d9e9d8, #b8d3c9); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.preorder-submit:hover { box-shadow: 0 16px 30px rgba(0, 0, 0, .26); }

#services { background: var(--paper-light); }
.service-card, .service-card:nth-child(even), .service-card:nth-child(odd) { border-color: rgba(32, 45, 45, .11); background: rgba(255, 253, 247, .7); box-shadow: 0 10px 24px rgba(51, 57, 49, .05); }
.service-card:hover { border-color: rgba(83, 106, 98, .42); box-shadow: 0 16px 30px rgba(51, 57, 49, .10); }
.service-content h3 { color: var(--ink-warm); }
.service-content p, .summary-card li { color: #5a6762; }
#summary { background: var(--paper-light); }
.summary-card { border-color: rgba(83, 106, 98, .17); border-radius: 1.05rem; background: linear-gradient(145deg, #eef1e9, #fffdf8); }
.summary-card h2 { color: var(--moss); }

footer { background: #102020; }
footer::before { border-color: rgba(183, 217, 201, .16); box-shadow: 0 0 0 5rem rgba(183, 217, 201, .035), 0 0 0 10rem rgba(184, 111, 80, .025); }
.footer-intro .section-kicker { color: #abcbbd; }
.footer-intro h2 em { color: #bad9ca; }
.email-link { border-color: rgba(212, 232, 220, .55); }
.email-link i { color: #b7d9c9; }

.mobile-preorder-bar { display: none; }

@media (max-width: 768px) {
  body { padding-bottom: 5.5rem; }
  .navbar { padding-top: env(safe-area-inset-top); }
  .nav-container { padding: .65rem 1rem; }
  .navbar.solid { padding-top: env(safe-area-inset-top); background: rgba(16, 32, 32, .88); }
  .logo { font-size: 1.28rem; }
  .menu-toggle { width: 2.8rem; height: 2.65rem; border-radius: .85rem; border-color: rgba(232, 239, 222, .34); background: rgba(232, 239, 222, .08); }
  .navbar .nav-links { top: calc(100% + .35rem); right: .75rem; left: .75rem; padding: .7rem; border-color: rgba(232, 239, 222, .16); border-radius: 1rem; background: rgba(16, 32, 32, .98); }
  .navbar .nav-link { padding: .78rem .85rem; border-radius: .55rem; font-size: .91rem; }
  .navbar .nav-link:active, .navbar .nav-link.active { background: rgba(216, 234, 216, .12); }

  /* Timeless mobile cover: a moving studio ident, independent of any exhibition product. */
  .hero-background {
    background:
      radial-gradient(circle at 80% 18%, rgba(207, 142, 99, .34), transparent 24rem),
      radial-gradient(circle at 16% 76%, rgba(84, 153, 146, .30), transparent 22rem),
      linear-gradient(145deg, #121d1e 0%, #182624 54%, #0b1719 100%);
  }
  .hero-background::before { background: linear-gradient(180deg, rgba(4, 13, 13, .26), transparent 36%, transparent 68%, rgba(4, 13, 13, .62)); }
  .hero-background::after { display: block; width: 19rem; aspect-ratio: 1; inset: 50% auto auto 50%; border-color: rgba(214, 237, 218, .14); box-shadow: 0 0 6rem rgba(104, 210, 190, .12), inset 0 0 4rem rgba(222, 162, 113, .08); animation: hero-pulse 8s ease-in-out infinite; }
  .hero-grid { display: block; inset: -25%; opacity: .27; background-size: 2.45rem 2.45rem; transform: perspective(62vh) rotateX(63deg) translateY(21%); }
  .hero-orb { display: block; opacity: .36; filter: blur(60px); }
  .hero-orb-one { width: 18rem; height: 18rem; top: -8rem; left: -9rem; }
  .hero-orb-two { width: 18rem; height: 18rem; right: -10rem; bottom: -9rem; }
  .hero-orb-three { display: none; }
  .hero-rings { display: none; }
  .hero-noise { opacity: .08; }
  .hero-section { min-height: 100svh; padding: max(6.5rem, calc(5.5rem + env(safe-area-inset-top))) 1.25rem max(7rem, calc(5rem + env(safe-area-inset-bottom))); align-items: center; justify-content: flex-start; text-align: center; }
  .hero-editorial-marks { position: absolute; z-index: 0; inset: 0; display: block; overflow: hidden; pointer-events: none; }
  .hero-mark-code, .hero-mark-index { position: absolute; color: rgba(232, 242, 230, .55); font-family: var(--display); font-size: .57rem; font-weight: 700; letter-spacing: .18em; line-height: 1.55; }
  .hero-mark-code { top: 16%; left: 1.25rem; animation: studio-fade 5s ease-in-out infinite; }
  .hero-mark-index { right: 1.12rem; bottom: 22%; text-align: right; }
  .hero-mark-word { position: absolute; color: transparent; font-family: var(--display); font-size: 30vw; font-weight: 700; letter-spacing: -.11em; line-height: .8; -webkit-text-stroke: 1px rgba(225, 240, 226, .14); text-transform: uppercase; }
  .hero-mark-word-one { top: 9%; right: -3vw; animation: studio-drift-one 11s ease-in-out infinite alternate; }
  .hero-mark-word-two { bottom: 20%; left: -7vw; animation: studio-drift-two 13s ease-in-out infinite alternate; }
  .hero-mark-orbit { position: absolute; width: 16.5rem; height: 16.5rem; border: 1px solid rgba(185, 225, 210, .16); border-radius: 48% 52% 58% 42%; }
  .hero-mark-orbit-one { top: 26%; left: -4.2rem; transform: rotate(24deg); animation: studio-orbit 18s linear infinite; }
  .hero-mark-orbit-two { right: -6.5rem; bottom: 16%; border-color: rgba(216, 165, 122, .18); transform: rotate(-38deg); animation: studio-orbit 22s linear infinite reverse; }
  .hero-mark-signal { position: absolute; right: 1.25rem; bottom: 13%; display: flex; gap: .28rem; align-items: flex-end; height: 1.5rem; }
  .hero-mark-signal i { width: .16rem; border-radius: 99px; background: #d5e8da; animation: studio-signal 1.7s ease-in-out infinite alternate; }
  .hero-mark-signal i:nth-child(1) { height: .55rem; animation-delay: -.8s; }
  .hero-mark-signal i:nth-child(2) { height: 1.35rem; animation-delay: -.25s; }
  .hero-mark-signal i:nth-child(3) { height: .9rem; animation-delay: -.55s; }
  .hero-copy { position: relative; z-index: 1; width: 100%; max-width: 32rem; margin: clamp(7.5rem, 18svh, 10.5rem) auto 0; }
  .hero-kicker { margin-bottom: 1rem; font-size: .66rem; letter-spacing: .13em; }
  .hero-greeting { margin: 0 0 .25rem; font-size: 1rem; }
  .hero-copy h1 { max-width: none; font-size: clamp(3.1rem, 15vw, 4.45rem); line-height: .96; letter-spacing: -.075em; }
  .hero-copy h1 em { display: block; max-width: none; margin-top: .6rem; font-size: .38em; line-height: 1.25; letter-spacing: .02em; }
  .hero-tagline { margin-top: 1.25rem; color: rgba(239, 247, 238, .82); font-size: .98rem; letter-spacing: .03em; }
  .hero-scroll-cue { position: absolute; z-index: 1; right: auto; bottom: 5.3rem; left: 50%; font-size: .62rem; transform: translateX(-50%); }
  .hero-scroll-cue .arrow-down { margin-left: .55rem; }

  .container { padding: 4.8rem 1.25rem; }
  .section-heading h2 { font-size: clamp(2.35rem, 11.6vw, 3.55rem); line-height: 1.08; }
  .section-heading-centered { margin-bottom: 2.5rem; text-align: left; }
  .section-lead { margin-right: 0; margin-left: 0; }
  .about-layout { gap: 2.35rem; }
  .about-content > p { font-size: 1rem; line-height: 1.95; }
  .capability-list { margin-top: 1.8rem; }
  .capability-list li { gap: .75rem; padding-top: .8rem; font-size: .93rem; }

  .profile-grid { gap: .9rem; }
  .profile-card { display: grid; grid-template-columns: 5.3rem 1fr; gap: 1rem; align-items: center; padding: 1rem; }
  .avatar { width: 5.3rem; margin: 0; border-width: 3px; }
  .member-info h3 { margin: 0; font-size: 1.18rem; }
  .member-info .title { margin: .18rem 0 .38rem; font-size: .72rem; }
  .member-info .desc { min-height: 0; margin: 0; font-size: .83rem; line-height: 1.55; }

  #products { padding: 4.8rem 0 4.6rem; }
  #products .product-container { padding: 0 1.25rem; }
  .product-intro { margin-bottom: 2.25rem; }
  .product-intro h2 { font-size: clamp(2.45rem, 12vw, 3.65rem); line-height: 1.06; }
  .product-intro > p:last-child { max-width: 28rem; font-size: .98rem; line-height: 1.9; }
  .product-grid { grid-template-columns: 1fr; gap: 1rem; }
  .product-card { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 11rem; border-radius: .95rem; }
  .product-image { min-height: 100%; aspect-ratio: auto; }
  .product-image img { position: absolute; inset: 0; }
  .concept-badge { top: .6rem; left: .6rem; padding: .25rem .35rem; font-size: .47rem; }
  .product-number { right: .6rem; bottom: .25rem; font-size: 2.8rem; }
  .product-info { display: flex; flex-direction: column; justify-content: center; padding: 1.15rem .95rem; }
  .product-info h3 { margin: .22rem 0 .45rem; font-size: 1.35rem; }
  .product-info > p:not(.product-type) { margin: 0 0 .7rem; font-size: .78rem; line-height: 1.65; }
  .product-info a { font-size: .8rem; }
  .product-type { font-size: .56rem !important; letter-spacing: .11em; }
  .product-actions { gap: .38rem; }
  .product-actions a { white-space: nowrap; }
  .exhibition-note { grid-template-columns: 1fr; gap: .8rem; margin-top: 1rem; padding: 1.25rem; border-radius: .95rem; }
  .exhibition-note h3 { margin: 0; font-size: 1.16rem; line-height: 1.45; }
  .exhibition-note p { margin: .42rem 0 0; font-size: .86rem; line-height: 1.65; }

  #preorder { padding: 4.9rem 0; }
  .preorder-container { gap: 2.1rem; padding: 0 1.25rem; }
  .preorder-intro h2 { font-size: clamp(2.65rem, 13vw, 3.6rem); }
  .preorder-intro > p { font-size: .96rem; line-height: 1.85; }
  .preorder-perks { grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: 1.6rem; }
  .preorder-perks > div { display: block; font-size: .68rem; line-height: 1.45; }
  .preorder-perks i { width: 2rem; height: 2rem; margin-bottom: .45rem; border-radius: .55rem; }
  .preorder-form { padding: 1.15rem; border-radius: 1rem; }
  .form-heading { display: block; margin-bottom: 1.15rem; padding-bottom: .8rem; }
  .form-heading p { margin-top: .25rem; font-size: .72rem; }
  .form-grid { gap: .8rem; }
  .form-field > span, .product-picker legend { font-size: .76rem; }
  .form-field input, .form-field select, .form-field textarea { min-height: 3rem; padding: .72rem .78rem; font-size: 16px; }
  .form-field textarea { min-height: 6.3rem; }
  .form-field-full { margin-top: .8rem; }
  .product-picker { margin-top: 1rem; }
  .product-choice-grid { gap: .55rem; }
  .product-choice-grid span { min-height: 4.1rem; padding: .68rem; font-size: .75rem; }
  .privacy-consent { margin: 1rem 0 1.1rem; font-size: .74rem; }
  .preorder-submit { min-height: 3.2rem; border-radius: .75rem; font-size: .93rem; }

  #services .container { padding-top: 4.8rem; }
  .services-list { gap: .9rem; }
  .service-card, .service-card:nth-child(even) { gap: 0; padding: .65rem; border-radius: .95rem; }
  .service-image { aspect-ratio: 16 / 9; border-radius: .65rem; }
  .service-image img { border-radius: .65rem; }
  .service-content { padding: 1.05rem .35rem .55rem; }
  .service-content h3 { margin-bottom: .55rem; font-size: 1.24rem; }
  .service-content p { margin: 0; font-size: .87rem; line-height: 1.75; }
  #summary { padding-bottom: 4.8rem; }
  .summary-container { gap: .85rem; }
  .summary-card { padding: 1.2rem; }
  .summary-card h2 { margin-top: 0; font-size: 1.08rem; }
  .summary-card ul { margin-bottom: 0; padding-left: 1.2rem; }
  .summary-card li { margin-bottom: .45rem; font-size: .84rem; }

  .footer-container { gap: 2.2rem; padding: 4.8rem 1.25rem 2.4rem; }
  .footer-intro h2 { font-size: clamp(2.5rem, 12.5vw, 3.6rem); }
  .footer-contact > p { font-size: .93rem; }
  .email-link { max-width: 100%; font-size: 1rem; overflow-wrap: anywhere; }
  .footer-bottom { padding: 1rem 1.25rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

  .mobile-preorder-bar { position: fixed; z-index: 1002; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); left: .75rem; display: flex; justify-content: space-between; align-items: center; min-height: 3.65rem; padding: .6rem .75rem .6rem 1rem; border: 1px solid rgba(238, 237, 223, .28); border-radius: 1.05rem; color: #f7f5ec; background: rgba(21, 37, 37, .94); box-shadow: 0 12px 30px rgba(14, 26, 25, .25); backdrop-filter: blur(16px); text-decoration: none; }
  .mobile-preorder-bar span { font-size: .7rem; color: #c0d1c5; letter-spacing: .06em; }
  .mobile-preorder-bar strong { display: inline-flex; gap: .5rem; align-items: center; padding: .55rem .7rem; border-radius: .65rem; color: #20312e; background: #d9e7d8; font-size: .79rem; }
  .mobile-preorder-bar i { font-style: normal; }
}

@keyframes studio-drift-one { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1.2rem, 1.6rem, 0); } }
@keyframes studio-drift-two { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(1.5rem, -1rem, 0); } }
@keyframes studio-orbit { to { rotate: 1turn; } }
@keyframes studio-fade { 50% { opacity: .35; } }
@keyframes studio-signal { to { transform: scaleY(.35); opacity: .35; } }

@media (max-width: 390px) {
  .product-card { grid-template-columns: .88fr 1.12fr; }
  .product-info { padding: 1rem .8rem; }
  .product-info h3 { font-size: 1.18rem; }
  .product-info p { font-size: .72rem; }
  .product-actions { flex-direction: column; }
  .preorder-perks > div { font-size: .62rem; }
}

@media (hover: none), (pointer: coarse) {
  .profile-card:hover, .product-card:hover, .service-card:hover, .summary-card:hover { transform: none; }
  .preorder-submit:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-preorder-bar { backdrop-filter: none; }
  .hero-editorial-marks *, .hero-background * { animation: none !important; }
}