/* Vicsense Coming Soon v3 — typography refinement; no layout/scroll changes. */
:root {
  --pine: #25291f;
  --ivory: #f7f5ef;
  --subtle: rgba(247,245,239,.94);
  --olive: #a6ae95;
  --ink: #1e201d;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--pine); }
body { margin: 0; min-width: 320px; background: var(--pine); color: var(--ivory); font-family: 'Inter', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.coming-soon { display: grid; grid-template-columns: minmax(0,34%) minmax(0,66%); min-height: 100vh; min-height: 100svh; }
.editorial { min-width: 0; background: var(--pine); }
.editorial-inner { min-height: 100vh; min-height: 100svh; padding: clamp(46px,3.4vw,82px) clamp(42px,3.1vw,76px) clamp(42px,3.1vw,76px); }
.brand { display: inline-flex; width: fit-content; align-items: center; color: var(--ivory); line-height: 1; user-select: none; }
.brand-symbol { flex: 0 0 35px; width: 35px; height: 35px; transform-origin: center; transition: color 170ms ease, transform 170ms cubic-bezier(.2,.7,.2,1); }
.brand:hover .brand-symbol { color: var(--olive); transform: scale(1.08); }
.brand-type { display: inline-flex; align-items: center; margin-left: 2px; white-space: nowrap; font-family: 'Oswald','Arial Narrow', sans-serif; font-size: 18px; line-height: 1; letter-spacing: .31em; }
.brand-type strong { font-weight: 500; }
.brand-sense { display: inline-flex; margin-left: .11em; font-weight: 300; }
.brand-sense > span { display: inline-block; }
.brand--photo { display: none; }
.intro { margin-top: clamp(90px, 9vh, 140px); max-width: 520px; }
.eyebrow { margin: 0 0 27px; font-family: 'Oswald','Arial Narrow',sans-serif; font-weight: 300; font-size: clamp(10px,.7vw,12px); letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; color: var(--ivory); }
h1 { font-family: 'Newsreader',Georgia,serif; font-weight: 300; font-optical-sizing: none; font-variation-settings: 'opsz' 16; letter-spacing: -.032em; font-size: clamp(61px,4.42vw,88px); line-height: 1.015; margin: 0; }
.description { color: var(--subtle); font-size: clamp(15px,1.0vw,18px); line-height: 1.56; max-width: 485px; margin: clamp(35px,3vw,62px) 0 0; }
.closing { margin-top: clamp(38px,3.6vw,75px); }
.closing-rule { display: block; width: 55px; height: 1px; background: rgba(247,245,239,.44); margin-bottom: 22px; }
.closing p { color: var(--subtle); font-size: clamp(13px,.86vw,16px); line-height: 1.5; margin: 0; }
.visual { position: relative; grid-column: 2; grid-row: 1; min-height: 100vh; min-height: 100svh; background: #b69b7b url('/assets/hero.webp') 94% 50% / cover no-repeat; }
/* On ordinary laptops, preserve the more generous copy column from the Framer reference. */
@media (min-width: 1200px) and (max-width: 1919px) {
  .coming-soon { grid-template-columns: minmax(0,42%) minmax(0,58%); }
  .editorial-inner { padding-left: clamp(52px,4.2vw,76px); padding-right: clamp(48px,4.2vw,76px); }
  .intro { margin-top: clamp(90px,9vh,130px); }
  h1 { font-size: clamp(61px,4.9vw,78px); }
  .description { max-width: 435px; font-size: clamp(15px,1.05vw,18px); }
  .closing { margin-top: clamp(38px,3.1vw,54px); }
}
/* Short desktop windows: allow ordinary scrolling instead of squeezing or clipping copy. */
@media (min-width: 1200px) and (max-height: 750px) {
  .editorial-inner { padding-top: 33px; padding-bottom: 33px; }
  .intro { margin-top: clamp(47px,8vh,80px); }
  .eyebrow { margin-bottom: 21px; }
  h1 { font-size: clamp(55px,4.4vw,74px); }
  .description { margin-top: 28px; }
  .closing { margin-top: 28px; }
  .closing-rule { margin-bottom: 13px; }
}
/* Tablet and mobile: photo first, brand set over the photo, copy in dark lower panel. */
@media (max-width: 1199px) {
  .coming-soon { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; }
  .visual { grid-row: 1; grid-column: 1; min-height: 0; height: clamp(300px,34vw,445px); background-position: 55% 52%; }
  .editorial { grid-row: 2; grid-column: 1; }
  .editorial-inner { min-height: 0; padding: clamp(40px,4.2vw,57px) clamp(38px,4.2vw,64px) 48px; }
  .brand--panel { display: none; }
  .brand--photo { display: inline-flex; position: absolute; top: clamp(29px,3.5vw,44px); left: clamp(32px,4.2vw,64px); color: var(--ink); z-index: 1; }
  .brand--photo:hover .brand-symbol { color: #596451; }
  .brand-symbol { width: 30px; height: 30px; flex-basis: 30px; }
  .brand-type { font-size: 16px; }
  .intro { margin-top: 0; max-width: 680px; }
  .eyebrow { margin-bottom: 23px; font-size: 10.5px; }
  h1 { font-size: clamp(59px,6vw,77px); line-height: 1.02; }
  .description { margin-top: 28px; max-width: 475px; font-size: 16px; }
  .closing { margin-top: 30px; }
  .closing-rule { margin-bottom: 15px; }
  .closing p { font-size: 13px; }
}
@media (max-width: 809px) {
  .visual { height: clamp(340px,106vw,525px); background-position: 60% 51%; }
  .brand--photo { top: 38px; left: clamp(25px,6.4vw,38px); }
  .editorial-inner { padding: 38px clamp(25px,6.4vw,39px) 54px; }
  .eyebrow { margin-bottom: 27px; font-size: 10px; letter-spacing: .18em; }
  h1 { font-size: clamp(54px,14vw,69px); }
  .description { margin-top: 33px; font-size: clamp(15px,3.8vw,17px); line-height: 1.57; }
  .closing { margin-top: 32px; }
}
@media (max-width: 370px) {
  h1 { font-size: 48px; }
  .eyebrow { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}