/* here — one stylesheet for every page. Tokens come from the here design system. */

@font-face { font-family: "TeX Gyre Adventor"; src: url(/fonts/TeXGyreAdventor-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f5f2e8;
  --blue: #1830b8;
  --pink: #e24aa1;
  --yellow: #fff200;
  --green: #4b8c28;
  --navy: #0d1c43;
  --newsprint: #ede6d3;
  --display: "ITC Avant Garde Gothic Pro", "ITC Avant Garde Gothic", "TeX Gyre Adventor", "Century Gothic", sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --rail: 250px;          /* nav tab width */
  --gutter: 330px;        /* where content starts, right of the rail */
  --ground: var(--pink);  /* set per page */
  --ink: var(--blue);
  --title: var(--paper);
  --logo: var(--navy);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--navy);
  font: 400 16px/1.6 var(--mono);
  letter-spacing: .02em;
  position: relative;
  overflow-x: hidden;
}
/* faint toner speckle over the whole page */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: var(--navy); opacity: .1;
  -webkit-mask: url(/assets/toner-speckle.webp) 0 0 / 900px auto repeat;
          mask: url(/assets/toner-speckle.webp) 0 0 / 900px auto repeat;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: .95; letter-spacing: -.005em; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--navy); color: var(--paper); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* page themes: each subpage is its own overprint, matched by its nav tab */
.page-about      { --ground: var(--pink);   --ink: var(--blue); --title: var(--paper); --logo: var(--navy); }
.page-events     { --ground: var(--blue);   --ink: var(--pink); --title: var(--paper); --logo: var(--paper); }
.page-newsletter { --ground: var(--yellow); --ink: var(--blue); --title: var(--navy);  --logo: var(--navy); }
.page-coworking  { --ground: var(--green);  --ink: var(--pink); --title: var(--paper); --logo: var(--paper); }

/* ---------- logo ---------- */
.logo {
  position: absolute; left: 40px; top: 34px; z-index: 7;
  width: 180px; aspect-ratio: 521 / 208.49;
  background: var(--logo);
  -webkit-mask: url(/assets/here-lockup.svg) 0 0 / 100% 100% no-repeat;
          mask: url(/assets/here-lockup.svg) 0 0 / 100% 100% no-repeat;
}
.page-home .logo { background: var(--navy); }

/* ---------- nav: torn tabs cut flush with the left edge ---------- */
.rail { position: absolute; left: 0; top: 150px; z-index: 6; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tab {
  position: relative; isolation: isolate; display: block;
  width: var(--rail); height: 67px; padding-left: 30px;
  font: 700 19px/67px var(--mono); letter-spacing: .12em; text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(40, 30, 10, .4));
  transition: transform .12s steps(2);
}
.tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tab) center / 100% 100% no-repeat; transform: scaleX(-1); }
.tab:hover { transform: translateX(14px); }
.tab[aria-current="page"] { transform: translateX(26px); --tab: url(/assets/tab-white.webp); color: var(--navy); }
.tab .staple { position: absolute; left: 12px; top: 6px; width: 38px; pointer-events: none; }
/* a stapled tab can't slide: it swings on its staple instead, a little on hover, more when it's the current page */
.tab.stapled { transform-origin: 31px 10px; }
.tab.stapled:hover { transform: rotate(2.5deg); }
.tab.stapled[aria-current="page"] { transform: rotate(4deg); }
.t-about      { --tab: url(/assets/tab-pink.webp);   color: var(--navy); }
.t-events     { --tab: url(/assets/tab-blue.webp);   color: var(--paper); }
.t-newsletter { --tab: url(/assets/tab-yellow.webp); color: var(--navy); }
.t-coworking  { --tab: url(/assets/tab-green.webp);  color: var(--paper); }
.tab.t-about[aria-current], .tab.t-events[aria-current], .tab.t-newsletter[aria-current], .tab.t-coworking[aria-current] { --tab: url(/assets/tab-white.webp); color: var(--navy); }
.menu-btn { display: none; }

/* ---------- overprint header ---------- */
.head { position: relative; height: 380px; overflow: hidden; background: var(--paper); z-index: 1; }
.head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 52%; background: var(--ground); }
.head::after  { content: ""; position: absolute; left: 0; right: 0; top: 64%; bottom: 0; background: var(--ground); }
.head .photo {
  position: absolute; right: 0; top: 0; width: 62%; height: 64%; z-index: 1;
  background: var(--ink); mix-blend-mode: multiply;
  -webkit-mask: var(--photo) center / cover no-repeat;
          mask: var(--photo) center / cover no-repeat;
}
.head .speck {
  position: absolute; inset: 0; z-index: 2; background: var(--ink); opacity: .3; pointer-events: none;
  -webkit-mask: url(/assets/toner-speckle.webp) 0 0 / 900px auto repeat;
          mask: url(/assets/toner-speckle.webp) 0 0 / 900px auto repeat;
}
.head h1 { position: absolute; left: var(--gutter); bottom: 30px; z-index: 3; color: var(--title); font-size: clamp(72px, 11.5vw, 150px); line-height: .82; white-space: nowrap; }

/* ---------- content ---------- */
main { position: relative; z-index: 2; padding: 56px 56px 0 var(--gutter); }
.page-home main { padding-top: 44px; }
.cols { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 300px); gap: 56px; align-items: start; }
.lede { font-size: 52px; }
.page-home .lede { font-size: clamp(48px, 6.4vw, 84px); max-width: 860px; }
.stack > * + * { margin-top: 16px; }
.label { font: 700 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.page-home .label { margin-bottom: 18px; }
.sub { font-size: 36px; margin-top: 8px; }

.btn {
  display: inline-block; border: 3px solid var(--c, var(--blue)); color: var(--c, var(--blue)); background: transparent;
  padding: 13px 20px; font: 700 15px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.btn.fill { background: var(--c, var(--blue)); color: var(--paper); }
.btn:hover { background: var(--c, var(--blue)); color: var(--paper); }
.btn.fill:hover { background: var(--navy); border-color: var(--navy); }
.btn-row { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

.sheet { position: relative; box-shadow: 0 1px 1px rgba(40, 30, 10, .22), 0 8px 16px -8px rgba(40, 30, 10, .4); }
.staple { position: absolute; z-index: 4; width: 58px; pointer-events: none; }
.scrap {
  position: relative; background: var(--newsprint); padding: 30px 34px;
  box-shadow: 0 0 0 1px rgba(13, 28, 67, .45), 2px 3px 0 -1px rgba(13, 28, 67, .25);
  transform: rotate(-.8deg);
}
.scrap .label { margin-bottom: 16px; }
.scrap p + p { margin-top: 10px; }

/* ---------- forms: typed blanks ---------- */
.form { margin-top: 22px; }
.form label { display: block; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.form input[type=email] {
  display: block; width: 100%; margin-top: 8px; padding: 6px 0; border: 0; border-bottom: 2px solid var(--navy); border-radius: 0;
  background: transparent; color: var(--navy); font: 400 16px/1.4 var(--mono);
}
.form input[type=email]::placeholder { color: rgba(13, 28, 67, .55); }
.form .btn { margin-top: 18px; --c: var(--navy); }
.form .note { margin-top: 12px; font-size: 13px; }
.hp { position: absolute; left: -9999px; }

/* ---------- the newsletter pull-tab flyer ---------- */
.pulltab { background: var(--yellow); overflow: hidden; transform: rotate(2deg); }
.pulltab .in { padding: 42px 24px 26px; }
.pulltab h2 { font-size: 38px; line-height: .9; text-transform: uppercase; }
.pulltab p { margin-top: 14px; font-size: 15px; }
.tabs { display: flex; height: 104px; border-top: 2px dashed var(--navy); }
.tabs span { flex: 1; display: flex; align-items: center; justify-content: center; border-right: 2px dashed var(--navy); }
.tabs span:last-child { border-right: 0; }
.tabs span b { transform: rotate(-90deg); white-space: nowrap; font: 700 10px/1 var(--mono); letter-spacing: .2em; }
.tabs span.gone b { display: none; }
.pin { position: relative; }
.pin > .staple { left: calc(50% - 29px); top: 10px; }

/* ---------- home cards ---------- */
.cards { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 44px; max-width: 900px; align-items: start; }
.card { position: relative; display: block; text-decoration: none; color: var(--navy);
  /* stapled at the top center: on hover it swings on the staple, the other way from how it hangs */
  transform-origin: 50% 12px; transform: rotate(var(--tilt)); transition: transform .12s steps(2); }
.card:hover, .card:focus-visible { transform: rotate(var(--swing)); }
.card:nth-child(1) { --tilt: .8deg;  --swing: -1.6deg; }
.card:nth-child(2) { --tilt: -1deg;  --swing: 1.8deg; }
.card:nth-child(3) { --tilt: 1.4deg; --swing: -1.2deg; }
.card:nth-child(4) { --tilt: -.6deg; --swing: 2deg; }
.card .sheet { background: var(--paper); overflow: hidden; }
.card .mini { position: relative; height: 190px; background: var(--paper); overflow: hidden; }
.card .mini::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 48%; background: var(--ground); }
.card .mini::after  { content: ""; position: absolute; left: 0; right: 0; top: 58%; bottom: 0; background: var(--ground); }
.card .mini .photo { position: absolute; right: 0; top: 0; width: 70%; height: 58%; z-index: 1; background: var(--ink); mix-blend-mode: multiply;
  -webkit-mask: var(--photo) center / cover no-repeat; mask: var(--photo) center / cover no-repeat; }
.card .mini h2 { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: var(--title); font-size: 60px; line-height: .82; }
.card .body { padding: 22px 24px 26px; }
.card .body .btn { margin-top: 18px; }
.card .staple { left: calc(50% - 29px); top: 8px; }
.card.newsletter .sheet { background: var(--yellow); }
.card .tabs { margin: 22px -24px -26px; height: 96px; }

/* ---------- events: the dinner flyer ---------- */
.flyer-img { width: 100%; height: auto; background: var(--paper); }
.event { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 340px); gap: 56px; align-items: start; }
.event .pin { transform: rotate(-1.2deg); }
.event .pin > .staple:nth-of-type(1) { left: 30px; top: 12px; }
.event .pin > .staple:nth-of-type(2) { left: auto; right: 30px; top: 10px; }
.facts { margin-top: 20px; border-top: 1px solid var(--navy); }
.facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--navy); }
.facts dt { font: 700 11px/1.9 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.facts dd { margin: 0; }

/* ---------- footer ---------- */
footer { position: relative; z-index: 2; margin: 96px 56px 0 var(--gutter); padding: 16px 0 44px; border-top: 1px solid var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
footer .mark { width: 26px; aspect-ratio: 1; background: var(--navy); -webkit-mask: url(/assets/here-mark.svg) 0 0/100% 100% no-repeat; mask: url(/assets/here-mark.svg) 0 0/100% 100% no-repeat; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 290px; }
  .cols, .event { grid-template-columns: minmax(0, 1fr); }
  .cols > aside, .event > aside { max-width: 360px; }
  .cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --drawer: min(78vw, 300px); }
  body::before { display: none; }
  .logo { left: 18px; top: 20px; width: 110px; }
  .menu-btn {
    display: block; position: absolute; left: 0; top: 86px; z-index: 8;
    width: 150px; height: 46px; padding: 0 0 0 20px; border: 0; background: none; cursor: pointer; text-align: left;
    font: 700 14px/46px var(--mono); letter-spacing: .12em; color: var(--navy);
    filter: drop-shadow(1px 2px 2px rgba(40, 30, 10, .4)); isolation: isolate;
  }
  .menu-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/assets/tab-white.webp) center / 100% 100% no-repeat; transform: scaleX(-1); }
  /* phone menu: the page slides right and the tabs sit on a navy block underneath it */
  .drawer {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--drawer); z-index: 0;
    background: var(--navy); visibility: hidden; overflow-y: auto;
    padding: 28px 0 40px;
  }
  .drawer::before {
    content: "MENU"; display: block; margin: 0 0 22px 20px;
    font: 700 11px/1 var(--mono); letter-spacing: .2em; color: var(--paper);
  }
  .rail { position: static; gap: 16px; }
  .tab { width: calc(var(--drawer) - 24px); height: 62px; line-height: 62px; font-size: 18px; transform: none; }
  .tab:hover, .tab[aria-current="page"], .tab.stapled:hover, .tab.stapled[aria-current="page"] { transform: none; }
  .tab[aria-current="page"] { width: calc(var(--drawer) - 4px); }
  .shell {
    position: relative; z-index: 1; min-height: 100vh; background: var(--paper);
    transition: transform .24s steps(3);
  }
  .shell::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: var(--navy); opacity: .1;
    -webkit-mask: url(/assets/toner-speckle.webp) 0 0 / 900px auto repeat;
            mask: url(/assets/toner-speckle.webp) 0 0 / 900px auto repeat;
  }
  .nav-open .drawer { visibility: visible; }
  .nav-open .shell { transform: translateX(var(--drawer)); box-shadow: -1px 0 0 rgba(13, 28, 67, .3), -10px 0 24px -12px rgba(0, 0, 0, .6); }
  .nav-open .shell > * { pointer-events: none; }
  .nav-open .shell > .menu-btn { pointer-events: auto; }
  .nav-open { overflow: hidden; }
  .head { height: 240px; }
  .head::before { width: 50%; }
  .head::after { top: 58%; }
  .head .photo { width: 60%; height: 58%; }
  .head h1 { left: auto; right: 16px; bottom: 16px; font-size: clamp(48px, 16vw, 72px); }
  .page-home main { padding-top: 152px; }
  main { padding: 36px 20px 0; }
  .lede { font-size: 34px; }
  .page-home .lede { font-size: 40px; }
  .cards { margin-top: 30px; gap: 30px; }
  .card .mini { height: 140px; }
  .card .mini h2 { font-size: 48px; }
  .card, .card:nth-child(n) { transform: rotate(0); }
  .scrap { padding: 20px 22px; }
  footer { margin: 64px 20px 0; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .tab, .shell, .card { transition: none; }
}