/* The Other Night – holding page. Fonts self-hosted (SIL Open Font License, see fonts/). */
@font-face{font-family:"Arvo";font-style:italic;font-weight:700;font-display:swap;src:url(fonts/arvo-bold-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-latin.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-latin.woff2) format("woff2")}

:root{
  --paper:#f4f0e8; --ink:#16130f; --slate:#3b3b57; --slate-2:#5a5a74; --red:#9b1c1c;
  --shadow:#b9b9c2;
  --slab:"Arvo","Rockwell","Roboto Slab",Georgia,serif;
  --serif:Georgia,"Times New Roman",serif;
  --tag-red:#e8202a;
  /* Project Duke palette (from projectduke.org style.css) */
  --pd-ink:#0f1b2d; --pd-ink-2:#1d2b42; --pd-paper:#f7f4ee; --pd-gold:#a8823a;
  --pd-serif:"Cormorant Garamond","EB Garamond",Georgia,serif; --pd-sans:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);font-family:var(--serif);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit}

/* Title-card lettering: slate fill, white outline, soft grey drop shadow */
.masthead{text-align:center;padding:clamp(30px,4.5vw,56px) 16px clamp(22px,3vw,34px)}
h1,.soon{
  margin:0;font-family:var(--slab);font-style:italic;font-weight:700;color:var(--slate);
  -webkit-text-stroke:.11em #fff;paint-order:stroke fill;
  text-shadow:.06em .06em 0 var(--shadow),.06em .06em .02em rgba(40,40,60,.18);
}
h1{font-size:clamp(3.6rem,10.5vw,8.6rem);line-height:1;letter-spacing:.005em}
h1 span{display:inline-block}
.soon{margin-top:clamp(16px,1.6vw,22px);font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.15;-webkit-text-stroke-width:.12em}

/* double rules, slate */
.bar{border-top:1px solid var(--slate);border-bottom:1px solid var(--slate);padding:3px 0}
.bar p{
  margin:0;padding:9px 22px 8px calc(22px + .2em);text-align:center;border-top:1px solid var(--slate);border-bottom:1px solid var(--slate);
  font-family:var(--sans);font-weight:600;font-size:.95rem;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
}

main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:clamp(52px,6.5vw,92px) 24px 56px}

/* "in association with" + a Project Duke panel in projectduke.org's own style */
.tag{
  --tag:clamp(1rem,4.6vw,1.85rem);
  display:inline-flex;flex-direction:column;align-items:center;font-size:var(--tag);line-height:1;
  text-decoration:none;color:inherit;border-radius:12px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),filter .25s ease;
}
.tag:hover,.tag:focus-visible{transform:translateY(-3px) scale(1.015);filter:drop-shadow(0 8px 12px rgba(15,27,45,.22))}
.tag:focus-visible{outline:2px solid var(--slate);outline-offset:6px}
.tag-with{
  position:relative;z-index:1;margin-bottom:.2em;white-space:nowrap;
  font-family:var(--slab);font-style:italic;font-weight:700;font-size:1.5em;letter-spacing:.005em;
  color:var(--tag-red);-webkit-text-stroke:.13em #fff;paint-order:stroke fill;
  text-shadow:.05em .05em 0 rgba(59,59,87,.22);
}
.pd{
  position:relative;display:flex;flex-direction:column;align-items:center;
  width:max-content;padding:1.05em 2em .95em;border-radius:12px;overflow:hidden;
  color:var(--pd-paper);
  background:
    radial-gradient(120% 90% at 50% 42%,rgba(29,43,66,.85) 0%,rgba(15,27,45,0) 62%),
    radial-gradient(140% 120% at 50% 50%,rgba(0,0,0,0) 55%,rgba(4,9,17,.55) 100%),
    var(--pd-ink);
  box-shadow:0 .5em 1.2em rgba(15,27,45,.18);
}
.pd::after{content:"";position:absolute;inset:7px;border:1px solid rgba(168,130,58,.42);border-radius:7px;pointer-events:none}
.pd-logo{display:block;width:1.45em;height:auto;margin-bottom:.5em}
.pd-name{
  font-family:var(--pd-serif);font-weight:300;font-size:2.6em;line-height:1.02;
  letter-spacing:.12em;margin-right:-.12em;white-space:nowrap;
}
.pd-rule{
  display:block;width:3.2em;height:1px;margin:.55em auto .6em;
  background:linear-gradient(90deg,rgba(168,130,58,0),var(--pd-gold) 22%,var(--pd-gold) 78%,rgba(168,130,58,0));
}
.pd-domain{
  font-family:var(--pd-sans);font-weight:400;font-size:.62em;
  text-transform:uppercase;letter-spacing:.3em;margin-right:-.3em;color:var(--pd-gold);
}
@media (max-width:480px){
  .pd{padding:.95em 1.4em .85em}
  .pd-name{letter-spacing:.08em;margin-right:-.08em}
  .pd-domain{letter-spacing:.24em;margin-right:-.24em}
}

footer{
  text-align:center;padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(59,59,87,.25);margin:0 auto;width:min(100% - 40px,960px);
  font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.2em;text-indent:.2em;color:var(--slate-2);
}