/* The Rose Entertainment Complex - theroseqc.com
   Text-only interim identity. Black ground, ivory type, one gold hairline. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/cormorant-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/cormorant-300-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/cormorant-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/cormorant-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/pinyon-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --ink:#0A0A0A;
  --ivory:#F4F1EA;
  --ivory-dim:#B9B4AA;
  --gold:#C2A25C;
  --rule:rgba(244,241,234,.14);
  --serif:'Cormorant Garamond',"Hoefler Text",Garamond,"Times New Roman",serif;
  --script:'Pinyon Script','Snell Roundhand','Apple Chancery',cursive;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--ivory);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--gold);color:var(--ink)}
a{color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .2s,color .2s}
a:hover{color:var(--gold);border-color:var(--gold)}
img{max-width:100%}

.wrap{width:100%;max-width:820px;margin:0 auto;padding:0 28px}

/* ---------- layout ---------- */
.inner{width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.inner.narrow{max-width:640px}
section{padding:clamp(64px,10vh,140px) 0}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10vh 0;
  border-bottom:1px solid var(--rule);
}
.mark .the{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(.85rem,1.6vw,1.25rem);
  letter-spacing:.62em;text-indent:.62em;
  color:var(--ivory-dim);margin:0 0 .5em;
}
.mark .rose{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3.6rem,14vw,11rem);
  line-height:.88;letter-spacing:.10em;text-indent:.10em;
  margin:0;color:var(--ivory);
}
.mark .complex{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(.56rem,1.1vw,.85rem);
  letter-spacing:.42em;text-indent:.42em;
  color:var(--ivory-dim);margin:1.5em 0 0;text-transform:uppercase;
}
.opening{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,5vw,3.8rem);line-height:1.15;letter-spacing:.03em;
  margin:clamp(2.6rem,7vh,4.4rem) 0 0;
}
.place{
  font-family:var(--sans);font-size:clamp(.62rem,1.1vw,.82rem);
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:var(--ivory-dim);margin:1.2rem 0 0;
}
.place span{white-space:nowrap}
.place .dot{margin:0 -.2em 0 -.1em}

/* ---------- about ---------- */
.about{text-align:center}
.lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,3vw,2.35rem);line-height:1.4;
  margin:0 auto;max-width:26ch;color:var(--ivory);
}

.spaces{
  list-style:none;margin:clamp(3rem,7vh,5rem) 0 0;padding:0;
  display:grid;gap:clamp(2rem,4vw,3.5rem);text-align:left;
}
.spaces li{border-top:1px solid var(--rule);padding-top:1.5rem}
.spaces h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.1rem,1.5vw,1.35rem);
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .8rem;
}
.spaces .tag{
  margin:0 0 1rem;color:var(--ivory);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
}
.spaces p{margin:0;color:var(--ivory-dim);font-size:.94rem;line-height:1.75}
.spaces h2{margin-bottom:.6rem}

.addr{
  font-family:var(--sans);font-size:clamp(.66rem,1vw,.78rem);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory-dim);margin:clamp(3rem,7vh,5rem) 0 0;
}

/* ---------- sibling brand link ---------- */
.sibling{border-top:1px solid var(--rule);text-align:center}
.sibling p{margin:0 auto;max-width:44ch;font-size:.95rem;color:var(--ivory-dim);line-height:1.8}
.sibling strong{color:var(--ivory);font-weight:400}
.go{
  display:inline-block;margin-top:1.6rem;border:0;
  font-family:var(--sans);font-weight:600;font-size:.7rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ivory);
  border-bottom:1px solid var(--gold);padding-bottom:.35rem;
}
.go:hover{color:var(--gold)}

/* ---------- why the rose ----------
   Its own band, built like the Club Torch one: script headline, a line of copy, a control that
   looks like a control. It spent one deploy as a bare script line inside the spaces list and
   nobody would have read that as a link. */
.storycta{border-top:1px solid var(--rule);text-align:center}
.storycta .script{
  font-family:var(--script);font-weight:400;
  font-size:clamp(2.4rem,6vw,4rem);line-height:1.15;letter-spacing:.01em;
  color:var(--ivory);margin:0 0 1.4rem;
}
.storycta p{margin:0 auto;max-width:46ch;font-size:.95rem;color:var(--ivory-dim);line-height:1.8}
.storycta .go{margin-top:2rem}
.addr a{color:var(--ivory);border-bottom-color:var(--rule)}

/* ---------- signup ---------- */
.signup{border-top:1px solid var(--rule)}
.sub{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.5rem);
  letter-spacing:.04em;margin:0;text-align:center;color:var(--ivory);
}
.subnote{margin:.9rem 0 clamp(2.4rem,5vh,3.4rem);text-align:center;
  font-size:.85rem;color:var(--ivory-dim);line-height:1.6}

form label{display:block;margin:0 0 1.4rem}
form label > span{
  display:block;margin:0 0 .45rem;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim);
}
form input[type=text],form input[type=email],form input[type=tel]{
  display:block;width:100%;
  background:transparent;color:var(--ivory);
  border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:.6rem .1rem;
  font-family:var(--sans);font-size:16px; /* 16px stops iOS zooming on focus */
  transition:border-color .2s;
}
form input:focus{outline:none;border-bottom-color:var(--gold)}
form input:-webkit-autofill{-webkit-text-fill-color:var(--ivory);
  transition:background-color 9999s ease-in-out 0s}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}

label.check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  margin:0 0 1.3rem;cursor:pointer}
label.check input{margin:.2rem 0 0;width:16px;height:16px;accent-color:var(--gold)}
label.check > span{font-size:.74rem;line-height:1.6;color:var(--ivory-dim);
  letter-spacing:0;text-transform:none;margin:0}


/* a required consent box that was not ticked */
label.check.invalid > span{color:#D98B7A}
label.check.invalid input{outline:2px solid #D98B7A;outline-offset:2px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

form button{
  display:block;width:100%;margin:1.8rem 0 0;
  background:var(--gold);color:var(--ink);border:0;border-radius:2px;
  padding:1.05rem 1.2rem;cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  transition:background .2s;
}
form button:hover:not(:disabled){background:#D4B570}
form button:disabled{opacity:.5;cursor:default}

.formnote{margin:1.1rem 0 0;text-align:center;font-size:.72rem;line-height:1.7;color:var(--ivory-dim)}
.formnote:empty{margin:0}
.formnote.ok{color:var(--gold)}
.formnote.bad{color:#D98B7A}
input.invalid{border-bottom-color:#D98B7A !important}

.done{
  font-family:var(--serif);font-weight:300;font-size:1.6rem;line-height:1.4;
  text-align:center;color:var(--ivory);margin:2.5rem 0 0;
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:3rem 0 3.6rem;text-align:center}
footer a{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory-dim);border-bottom:0}
footer a + a{margin-left:1.8rem}
.legal a{letter-spacing:.06em;text-transform:none;margin:0}
footer a:hover{color:var(--gold)}
.legal{font-size:.68rem;line-height:1.9;color:#6E6A63;letter-spacing:.06em;margin:1.4rem 0 0}

/* ---------- desktop ---------- */
@media (min-width:820px){
  .spaces{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .row.two{grid-template-columns:1fr;gap:0}   /* two half-width name fields is not a field */
  .place{letter-spacing:.26em;text-indent:.26em}
}

/* ---------- legal pages ---------- */
.doc{padding:clamp(48px,8vh,88px) 0 0}
.doc .inner{max-width:820px;text-align:left}
.doc-head{text-align:center;border-bottom:1px solid var(--rule);padding-bottom:2.4rem;margin-bottom:2.8rem}
.doc-head h1{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,5.5vw,2.6rem);letter-spacing:.1em;text-indent:.1em;
  text-transform:uppercase;margin:1.6rem 0 .6rem}

/* legal-page lockup: small, subordinate, and a way home. The h1 is the headline here,
   not the brand -- when both were set in the display serif they read as one title. */
.doc-brand{
  display:inline-block;border-bottom:0;
  font-family:var(--sans);font-weight:500;
  font-size:.66rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
  color:var(--ivory-dim);
}
.doc-brand span{color:#6E6A63}
.doc-brand:hover{color:var(--gold)}
.doc-head h1{margin-top:1.4rem}
.doc-head .eff{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim);margin:0}
.doc-body{max-width:70ch;margin:0 auto;font-size:.95rem;line-height:1.8;color:#DAD6CD}
.doc-body h2{font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:3.2rem 0 1rem}
.doc-body h3{font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.05em;
  color:var(--ivory);margin:1.9rem 0 .6rem}
.doc-body p{margin:0 0 1.05rem}
.doc-body p.tight{margin:0}
.doc-body ul{margin:0 0 1.15rem;padding-left:1.15rem}
.doc-body li{margin:0 0 .35rem}
.doc-body strong{color:var(--ivory);font-weight:600}
.doc-body .box{border:1px solid var(--rule);border-left:2px solid var(--gold);
  padding:1.05rem 1.25rem;margin:1.5rem 0;background:rgba(244,241,234,.03)}
.doc-body address{font-style:normal;line-height:1.8}


@media (max-width:430px){
  .place{letter-spacing:.26em;text-indent:.26em}
  .row.two{grid-template-columns:1fr}   /* two 150px name fields is not a field */
}

/* ---------- story page ----------
   Same ground, same serif, same hairline as the home page. The only new idea here is
   photography, so the photographs are the only thing allowed to be loud. */
.story{padding:clamp(48px,8vh,88px) 0 0}   /* bottom air comes from .storylink's margin */
.story .inner{max-width:1080px;text-align:left}

.story-head{text-align:center;border-bottom:1px solid var(--rule);
  padding-bottom:clamp(2.2rem,5vh,3rem);margin-bottom:clamp(2.8rem,7vh,4.5rem)}
.story-head h1{font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,6.5vw,3.6rem);line-height:1.1;
  letter-spacing:.06em;text-indent:.06em;margin:1.5rem 0 0;color:var(--ivory)}
.story-head .kicker{font-family:var(--sans);font-size:.66rem;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:var(--ivory-dim);margin:1.4rem 0 0}

.prose{max-width:66ch;margin:0 auto;font-size:1rem;line-height:1.85;color:#DAD6CD}
.prose p{margin:0 0 1.15rem}
.prose strong{color:var(--ivory);font-weight:600}

/* the short lines his copy lands on. Serif, ivory, given room to breathe. */
.prose .lift{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.25rem,2.6vw,1.8rem);line-height:1.45;letter-spacing:.02em;
  color:var(--ivory);margin:2rem 0 2rem;text-align:center}
.prose .verse{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.9;letter-spacing:.02em;
  color:var(--ivory);margin:2rem 0;text-align:center}

figure{margin:clamp(2.6rem,7vh,4.5rem) auto;max-width:900px}
figure img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
figcaption{margin:.95rem 0 0;text-align:center;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#6E6A63}

.chapter{border-top:1px solid var(--rule);
  padding-top:clamp(3rem,8vh,5.5rem);margin-top:clamp(3rem,8vh,5.5rem)}
.chapter-label{text-align:center;font-family:var(--sans);font-weight:600;
  font-size:.68rem;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:var(--gold);margin:0 0 clamp(2.4rem,6vh,3.6rem)}

.owner{display:grid;grid-template-columns:minmax(0,300px) 1fr;
  gap:clamp(2rem,4.5vw,3.8rem);align-items:start}
.owner + .owner{border-top:1px solid var(--rule);
  padding-top:clamp(3rem,8vh,5rem);margin-top:clamp(3rem,8vh,5rem)}
.owner .portrait img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.owner h2{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;letter-spacing:.04em;
  margin:0;color:var(--ivory)}
.owner .role{font-family:var(--sans);font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:.8rem 0 1.8rem}
.owner .prose{max-width:60ch;margin:0}

@media (max-width:820px){
  .owner{grid-template-columns:1fr}
  .owner .portrait{max-width:300px;margin:0 auto}
  .owner h2{text-align:center}
  .owner .role{text-align:center}
}

/* the way back to the home page, on the home page the way in */
/* the way back, at the foot of the story page. The footer draws its own rule immediately
   below this, so the bottom margin here is what keeps the link off that line. */
.storylink{display:block;text-align:center;
  margin:clamp(3rem,7vh,4.5rem) 0 clamp(3.5rem,8vh,5.5rem);
  font-family:var(--sans);font-weight:600;font-size:.7rem;
  letter-spacing:.26em;text-transform:uppercase;line-height:1.7;
  color:var(--ivory);border-bottom:0;transition:color .25s}
.storylink span{border-bottom:1px solid var(--gold);padding-bottom:.35rem}
.storylink:hover{color:var(--gold)}

/* ---------- line breaking ----------
   Display type gets balance so a headline never drops one orphan word onto its own line;
   body copy gets pretty, which only fixes the last line and does not reflow the paragraph.
   Both degrade to normal wrapping in browsers that do not support them. */
.lede,.opening,.sub,.mark .complex,.storycta .script,.story-head h1,.owner h2,
.prose .lift,.prose .verse,.sibling p,.storycta p,.subnote{text-wrap:balance}
.prose p,.spaces p,.nights p,.doc-body p,.doc-body li{text-wrap:pretty}

/* Legal links AT THE POINT OF OPT-IN. TCR rejection 30909 requires the opt-in flow itself to
   carry a privacy policy link, a terms link, the message frequency and the rates statement.
   A link in the page footer does not satisfy it, and terms.html is linked from nowhere else. */
.consentlinks{margin:.2rem 0 0;font-size:.7rem;line-height:1.6;color:var(--ivory-dim)}
.consentlinks a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(191,155,74,.45)}
.consentlinks a:hover{border-bottom-color:var(--gold)}