/* =========================================================
   CH2 Productions — Coming Soon
   Desktop/laptop: the approved composition, laid out on a 1536 × 930
   design grid (1 unit = --p) so it scales as one piece.
   Tablet/mobile: a re-composed vertical layout (see bottom).
   ========================================================= */

@font-face{font-family:"Playfair Display";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/playfair-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/playfair-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant SC";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/cormorant-sc-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --black:#07080B;
  --band:#0D0A0A;
  --white:#FAF8F7;
  --text:#E5E6E6;
  --muted:#E0E0E0;
  --foot-text:#BDBEBE;
  --gold:#E9C764;
  --gold-hi:#F7DB6E;
  --gold-lo:#E2A845;
  --display:"Playfair Display","Bodoni 72","Didot",Georgia,serif;
  --roman:"Cormorant SC","Trajan Pro",Georgia,serif;
  --sans:"Jost","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --foot-h:clamp(56px,min(5vw,9.5vh),100px);
  --shadow:0 2px 14px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;min-height:100svh;background:var(--black);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
ul{list-style:none;margin:0;padding:0}
p,h1{margin:0;font-weight:inherit}

.gold{
  color:var(--gold);
  background:linear-gradient(180deg,var(--gold-hi) 0%,#F0CB5E 45%,var(--gold-lo) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rule{display:block;background:var(--gold)}

/* shared type styles */
.logo__mark{font-family:var(--display);font-weight:600;color:var(--white);line-height:1;display:block}
.logo__mark{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.logo__mark .gold{font-weight:700}
.logo__name{font-family:var(--roman);font-weight:600;color:var(--white);text-transform:uppercase;line-height:1;display:block}
.founder{font-family:var(--sans);font-weight:300;color:var(--muted);text-transform:uppercase;line-height:1}
.cats{font-family:var(--sans);font-weight:400;color:var(--white);text-transform:uppercase;line-height:1;display:flex;justify-content:center;align-items:center;white-space:nowrap}
.cats li + li::before{content:"|";color:var(--gold);font-weight:400}
.kicker{display:block;font-family:var(--sans);font-weight:300;color:var(--muted);text-transform:uppercase;line-height:1}
.coming,.soon{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1}
.coming{color:var(--white)}
.lede{font-family:var(--sans);font-weight:400;color:var(--text)}
.pillars li{font-family:var(--sans);font-weight:300;color:var(--muted);text-transform:uppercase;line-height:1}
.brand,.message,.pillars{text-shadow:var(--shadow)}
.gold{text-shadow:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}

.footer{
  position:relative;
  height:var(--foot-h);
  --fs:min(1.02vw,1.9vh);
  background:var(--band);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,min(1.4vw,2.4vh),22px);
  padding:0 16px;
}
.footer .rule--foot{width:clamp(80px,7.75vw,140px);height:2px}
.footer p{font-family:var(--sans);font-weight:400;font-size:clamp(12px,var(--fs),17px);letter-spacing:.08em;color:var(--foot-text);text-align:center;line-height:1.3}

/* entrance: a slow fade-up of the type over the photograph */
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes artin{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
.art img{animation:artin 1.6s cubic-bezier(.2,.7,.2,1) both}
.brand{animation:in 1s ease .25s both}
.message{animation:in 1s ease .5s both}
.pillars{animation:in 1s ease .75s both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* =========================================================
   DESKTOP + LAPTOP (≥1024px wide, landscape)
   ========================================================= */
@media (min-width:1024px) and (min-aspect-ratio:4/3){
  body{overflow:hidden}
  .hero{
    position:relative;
    height:calc(100svh - var(--foot-h));
    min-height:540px;
    overflow:hidden;
    container-type:size;
  }
  /* The photograph is always shown whole in height (head to books) and anchored right.
     On windows wider than the artwork, the extra width on the left is the artwork's own black,
     feathered in. On narrower windows it overflows to the right (stage edge is cropped).
     The left text block scales to fit the window height, so nothing is ever cut off. */
  .art,.type--art{
    --cw:calc(100cqh * 1536 / 930);
    position:absolute;
    width:var(--cw);
    aspect-ratio:1536/930;
    left:max(calc(100cqw - var(--cw)), calc(var(--cw) * -0.04));
    top:0;
  }
  .art{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%);
  }
  .type--main{
    position:absolute;
    width:min(100cqw, calc(100cqh * 1536 / 930 * .97));
    aspect-ratio:1536/930;
    /* on extra-wide windows, move the text in to share the spare width */
    left:max(0px, calc((100cqw - 100cqh * 1536 / 930) * .45));
    top:50%;
    translate:0 -50%;
  }
  .art img{display:block;width:100%;height:100%;object-fit:fill}
  .type{container-type:inline-size}
  .type *{--p:calc(100cqw / 1536)}
  .brand,.message,.pillars{position:absolute;inset:0}
  .brand > *,.message h1 > *,.message > .rule,.message .lede,.pillars > *{position:absolute}
  .logo{position:static}
  .logo > *{position:absolute}
  .lede span{display:block;white-space:nowrap}
  .pillars ul{position:static}
  .pillars li{position:absolute}
  .logo__mark{font-size:calc(var(--p)*135.53);letter-spacing:-0.0050em;text-indent:-0.0050em;transform:scaleX(1.1113);top:calc(var(--p)*71.40);left:calc(var(--p)*(381.35 - 380));width:calc(var(--p)*760);text-align:center}
  .logo__name{font-size:calc(var(--p)*38.57);letter-spacing:0.2656em;text-indent:0.2656em;top:calc(var(--p)*206.70);left:calc(var(--p)*(384.90 - 380));width:calc(var(--p)*760);text-align:center}
  .founder{font-size:calc(var(--p)*20.00);letter-spacing:0.4047em;text-indent:0.4047em;top:calc(var(--p)*258.80);left:calc(var(--p)*(384.00 - 380));width:calc(var(--p)*760);text-align:center}
  .cats{font-size:calc(var(--p)*12.92);letter-spacing:0.5170em;text-indent:0.5170em;--sep:0.5500em;top:calc(var(--p)*321.60);left:calc(var(--p)*(383.45 - 380));width:calc(var(--p)*760);text-align:center}
  .kicker{font-size:calc(var(--p)*24.23);letter-spacing:0.6239em;text-indent:0.6239em;top:calc(var(--p)*390.80);left:calc(var(--p)*(373.00 - 380));width:calc(var(--p)*760);text-align:center}
  .coming{font-size:calc(var(--p)*129.91);letter-spacing:0.0227em;text-indent:0.0227em;top:calc(var(--p)*403.20);left:calc(var(--p)*(379.65 - 380));width:calc(var(--p)*760);text-align:center}
  .soon{font-size:calc(var(--p)*141.50);letter-spacing:0.0099em;text-indent:0.0099em;top:calc(var(--p)*506.40);left:calc(var(--p)*(380.20 - 380));width:calc(var(--p)*760);text-align:center}
  .lede{font-size:calc(var(--p)*27.82);letter-spacing:0.0000em;text-indent:0.0000em;line-height:1.0428;top:calc(var(--p)*701.40);left:calc(var(--p)*(370.45 - 380));width:calc(var(--p)*760);text-align:center}
  .p1{font-size:calc(var(--p)*20.00);letter-spacing:0.3560em;top:calc(var(--p)*120.80);left:calc(var(--p)*1160.10)}
  .p2{font-size:calc(var(--p)*20.00);letter-spacing:0.3200em;top:calc(var(--p)*164.80);left:calc(var(--p)*1160.10)}
  .p3{font-size:calc(var(--p)*18.77);letter-spacing:0.3770em;top:calc(var(--p)*209.80);left:calc(var(--p)*1161.00)}
  .p4{font-size:calc(var(--p)*18.77);letter-spacing:0.3601em;top:calc(var(--p)*253.80);left:calc(var(--p)*1161.00)}
  .cats{display:flex;justify-content:center}
  .cats li + li::before{margin:0 var(--sep)}
  .rule--brand{left:calc(var(--p)*360);width:calc(var(--p)*33);top:calc(var(--p)*299.5);height:max(1px,calc(var(--p)*2))}
  .rule--msg{left:calc(var(--p)*317);width:calc(var(--p)*116);top:calc(var(--p)*669.5);height:max(1px,calc(var(--p)*2))}
  .rule--ptop{left:calc(var(--p)*1160);width:calc(var(--p)*79);top:calc(var(--p)*89.5);height:max(1px,calc(var(--p)*2))}
  .rule--pbot{left:calc(var(--p)*1160);width:calc(var(--p)*105);top:calc(var(--p)*299.5);height:max(1px,calc(var(--p)*2))}
}

/* =========================================================
   TABLET + MOBILE (stacked composition)
   ========================================================= */
@media (max-width:1023px), (max-aspect-ratio:1333/1000){
  .hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(36px,8vw,64px)}
  .type{display:contents}
  .brand{order:1;display:flex;flex-direction:column;align-items:center;padding:0 16px;position:relative;z-index:2}
  .logo{display:flex;flex-direction:column;align-items:center}
  .logo__mark{font-size:clamp(76px,22vw,150px);letter-spacing:-.005em;line-height:.84}
  .logo__name{font-size:clamp(26px,7.4vw,46px);letter-spacing:.17em;margin:.32em -.17em 0 0}
  .founder{font-size:clamp(13px,3.7vw,20px);letter-spacing:.32em;margin:clamp(12px,3vw,18px) -.32em 0 0}
  .rule--brand{width:clamp(28px,8vw,40px);height:2px;margin:clamp(16px,4vw,22px) 0}
  .cats{flex-wrap:wrap;row-gap:10px;font-size:clamp(11px,3vw,15px);letter-spacing:.24em;max-width:min(92vw,600px)}
  .cats li{display:flex;align-items:center}
  .cats li + li::before{margin:0 .9em 0 .66em}
  .cats li:nth-child(4)::before{content:none}
  .cats li:nth-child(4){flex-basis:100%;justify-content:center}

  .art{
    order:2;
    position:relative;z-index:0;
    width:100%;
    height:clamp(380px,118vw,720px);
    margin-top:clamp(-40px,-6vw,-16px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 50%,rgba(0,0,0,.35) 72%,transparent 90%);
            mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 50%,rgba(0,0,0,.35) 72%,transparent 90%);
  }
  .art img{display:block;width:100%;height:100%;object-fit:cover;object-position:59.5% 18%}

  .message{order:3;position:relative;z-index:2;margin-top:clamp(-230px,-30vw,-120px);padding:0 16px;display:flex;flex-direction:column;align-items:center}
  .kicker{font-size:clamp(13px,3.8vw,22px);letter-spacing:.42em;margin-right:-.42em}
  .coming,.soon{font-size:clamp(60px,18.6vw,138px);letter-spacing:-.01em;line-height:.98}
  .coming{margin-top:.12em}
  .rule--msg{width:clamp(80px,22vw,116px);height:2px;margin:clamp(22px,6vw,34px) 0}
  .lede{font-size:clamp(16px,4.4vw,22px);line-height:1.45;max-width:30em}
  .lede span{display:inline}

  .pillars{order:4;position:relative;z-index:2;margin:clamp(34px,9vw,52px) 0 clamp(34px,9vw,52px);display:flex;flex-direction:column;align-items:center}
  .pillars ul{display:grid;grid-template-columns:auto auto;gap:14px clamp(28px,9vw,56px);margin:18px 0}
  .pillars li{font-size:clamp(12px,3.4vw,16px);letter-spacing:.3em;margin-right:-.3em}
  .rule--ptop{width:72px;height:2px}
  .rule--pbot{width:96px;height:2px}

  .footer{height:auto;padding:26px 16px 30px}
}

/* tablet: a wider photograph showing more of the stage and books; pillars in one line */
@media (min-width:700px) and (max-width:1023px){
  .hero{position:relative}
  .art{height:clamp(560px,82vw,820px)}
  .art img{object-position:66% 20%}
  .message{margin-top:clamp(-300px,-27vw,-200px)}
  .pillars ul{grid-template-columns:repeat(4,auto);gap:0 clamp(28px,5vw,48px)}
}