/*
Theme Name: Sidewell
Author: Sidewell
Description: Mobile bar. The open side of the trailer.
Version: 1.0.0
Text Domain: sidewell
*/

@font-face {
  font-family: "Big Shoulders Display";
  src: url("assets/fonts/big-shoulders-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #14110e;
  --ink: #1c140e;
  --bulb: #f4d7a4;
  --foam: #f3efe6;
  --oak: #8d5b34;
  --lime: #d6e07a;
  --metal: #c5c6c0;
  --quiet: rgba(243, 239, 230, 0.72);
  --quieter: rgba(243, 239, 230, 0.5);
  --rail: 4.75rem;
  --edge: clamp(1.25rem, 4vw, 4.5rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--foam);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 400;
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 7;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 9;
  background: var(--bulb);
  color: var(--ink);
  padding: 0.4rem 0.6rem;
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.hinge {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0 1.2rem;
  background: #100e0c;
  border-right: 1px solid rgba(244, 215, 164, 0.22);
}
.wedge { display: grid; place-items: center; }
.hinge ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  align-items: center;
}
.hinge a {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--quiet);
  font-size: 0.95rem;
}
.hinge a[aria-current="page"] { color: var(--bulb); }

main { margin-left: var(--rail); }

.yard {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--night);
}
.yard-copy {
  padding: 7vh var(--edge) 4vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.9rem;
  position: relative;
  z-index: 1;
}
.eyebrow {
  margin: 0;
  font-family: "Big Shoulders Display", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--quiet);
}
.word {
  margin: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: clamp(5.2rem, 12vw, 10.5rem);
  line-height: 0.76;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--bulb);
}
.word span { display: block; }
.word span:last-child {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bulb);
}
.lede {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.25;
  font-weight: 500;
}
.aside {
  margin: 0;
  max-width: 36ch;
  color: var(--quiet);
}

.yard-photo {
  position: relative;
  min-height: 100%;
}
.yard-photo img,
.well img,
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yard-photo img { position: absolute; inset: 0; }
.glow {
  position: absolute;
  width: 46%;
  height: 42%;
  left: 8%;
  top: 6%;
  background: radial-gradient(circle, rgba(244, 215, 164, 0.42), transparent 68%);
  animation: bulb 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bulb { 50% { opacity: 0.55; } }

.plate {
  background:
    linear-gradient(165deg, rgba(255,255,255,0.34), rgba(0,0,0,0.06) 46%, rgba(255,255,255,0.12)),
    var(--metal);
  color: var(--ink);
  padding: 1.15rem 1.1rem 1.15rem;
  box-shadow: inset 0 11px 0 var(--oak), 0 16px 36px rgba(0, 0, 0, 0.28);
}
.plate .aside,
.plate .deposit-line { color: rgba(28, 20, 14, 0.72); }
.miss {
  background: #3a2018;
  color: var(--bulb);
  padding: 0.55rem 0.7rem;
  margin: 0 0 0.75rem;
}
.miss p { margin: 0.15rem 0; }

.fields {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 0.7fr;
  gap: 1rem 0.9rem;
  margin-bottom: 1.15rem;
}
.fields-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem 0.9rem;
  margin-bottom: 0.35rem;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-wide { grid-column: 1 / -1; margin-bottom: 1.15rem; }
.field span,
.picks legend {
  font-family: "Big Shoulders Display", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--ink);
}
.plate input,
.plate select,
.plate textarea {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 2px solid #1c140e;
  border-radius: 0;
  padding: 0.35rem 0 0.4rem;
  font-size: 1.05rem;
}
.plate textarea { min-height: 6rem; resize: vertical; }
.hp { position: absolute; left: -9999px; }

.picks {
  border: 0;
  margin: 0.8rem 0 0.35rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}
.picks label {
  font-family: "Big Shoulders Display", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.05rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  white-space: nowrap;
}
.deposit-line { margin: 0.35rem 0 0.8rem; }
.deposit-line strong { font-weight: 500; }

.pour {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--bulb);
  color: var(--ink);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
}
.pour:hover { background: #fff6e4; }

.band {
  padding: 3.5rem var(--edge) 3rem;
}
.band h2,
.sheet h1,
.sheet h2 {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.88;
  margin: 0 0 0.8rem;
}
.band h2,
.sheet h1 { font-size: clamp(3rem, 7vw, 5.4rem); color: var(--bulb); }
.sheet h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--foam); }

.rail-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
  padding-top: 1.4rem;
}
.bottle {
  position: relative;
  background: #1b1714;
  color: var(--foam);
  padding: 1.35rem 1.05rem 1.2rem;
  border-radius: 0;
  box-shadow: inset 0 9px 0 var(--oak), inset 0 0 0 1px rgba(244, 215, 164, 0.16);
}
.bottle .neck { display: none; }
.bottle h3 {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0.4rem 0 0.35rem;
  color: var(--bulb);
}
.bottle .price {
  margin: 0;
  font-size: 1.35rem;
}
.bottle .meta { margin: 0.15rem 0 0.7rem; color: var(--quiet); }
.bottle p { margin: 0; }
.bottle.is-lit {
  background: #2a2118;
  transform: translateY(-8px);
  box-shadow: inset 0 0 0 1px var(--bulb), 0 18px 30px rgba(0, 0, 0, 0.28);
}
.use {
  display: inline-block;
  margin-top: 1rem;
  color: var(--lime);
  font-family: "Big Shoulders Display", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.night {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(244, 215, 164, 0.22);
  border-bottom: 1px solid rgba(244, 215, 164, 0.22);
}
.night article {
  padding: 1.4rem var(--edge) 1.6rem 1.1rem;
  border-right: 1px solid rgba(244, 215, 164, 0.16);
}
.night article:first-child { padding-left: var(--edge); }
.night strong {
  display: block;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--bulb);
  letter-spacing: -0.02em;
}
.night p { margin: 0.35rem 0 0; color: var(--quiet); }

.well {
  position: relative;
  min-height: 68vh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.well img { position: absolute; inset: 0; }
.well p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 8vh var(--edge);
  max-width: 10ch;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--bulb);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.hb {
  margin-top: 1.5rem;
  padding: 1rem 1rem 1.1rem;
  background: #1a1613;
  border-left: 8px solid var(--lime);
}
.hb-label { margin: 0 0 0.4rem; color: var(--foam); }
.hb-wait, .hb p { color: var(--quiet); }
.hb iframe {
  width: 100%;
  min-height: 28rem;
  border: 0;
  background: #fff;
  margin-top: 0.6rem;
}
.hb a { color: var(--lime); }

.sheet { padding: 7vh var(--edge) 5rem; max-width: 78rem; }
.prose { max-width: 38rem; }
.prose p, .split p { margin: 0 0 0.9rem; }
.split-next { margin-top: 2.5rem; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2rem 3rem;
  align-items: start;
}
.frame { min-height: 22rem; overflow: hidden; }
.frame img { height: 100%; min-height: 22rem; object-fit: cover; }
.bring {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bring li {
  padding: 0.55rem 0;
  border-top: 1px solid rgba(244, 215, 164, 0.2);
  color: var(--quiet);
}
.bring li:last-child { border-bottom: 1px solid rgba(244, 215, 164, 0.2); }
.kicker {
  font-family: "Big Shoulders Display", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bulb);
  margin: 0 0 0.4rem;
}

.notes {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
}
.notes li {
  padding: 0.7rem 0;
  border-top: 1px solid rgba(244, 215, 164, 0.2);
  color: var(--quiet);
}
.sample {
  color: inherit;
  font-style: italic;
}

.tab-wrap { padding: 6vh var(--edge) 5rem; }
.tab {
  max-width: 34rem;
  background: var(--foam);
  color: var(--ink);
  padding: 1.5rem 1.3rem 1.4rem;
  box-shadow: inset 0 12px 0 var(--oak);
}
.tab h1 {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(3.2rem, 8vw, 4.8rem);
  line-height: 0.84;
  text-transform: uppercase;
  margin: 0.35rem 0 1rem;
}
.stamp {
  display: inline-block;
  border: 3px solid #6d7a22;
  color: #6d7a22;
  font-family: "Big Shoulders Display", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  transform: rotate(-6deg);
}
.tab dl {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0 0 1rem;
}
.tab dt { opacity: 0.62; }
.tab dd { margin: 0; }
.tab .eyebrow { color: rgba(28, 20, 14, 0.62); }
.tab .due { font-size: 1.35rem; margin: 0 0 0.9rem; }
.tab .aside { color: rgba(28, 20, 14, 0.7); }

.colophon {
  padding: 1.6rem var(--edge) 2.2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--quieter);
  border-top: 1px solid rgba(244, 215, 164, 0.16);
}
.colophon a { color: var(--quiet); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body.login { background: var(--night); }
body.login h1 a { background-image: none !important; width: auto; height: auto; text-indent: 0; font-family: "Big Shoulders Display", sans-serif; color: var(--bulb); font-size: 2rem; letter-spacing: 0.08em; }
.login form {
  background: var(--metal);
  border: 0;
  box-shadow: inset 0 11px 0 var(--oak);
  color: var(--ink);
}
.login label { color: var(--ink); }
.wp-core-ui .button-primary {
  background: var(--bulb);
  border: 0;
  color: var(--ink);
  text-shadow: none;
  box-shadow: none;
}
.login #nav, .login #backtoblog { text-align: left; }
.login #nav a, .login #backtoblog a { color: var(--quiet); }

@media (max-width: 860px) {
  .hinge {
    top: auto;
    right: 0;
    bottom: 0;
    width: auto;
    height: 3.5rem;
    flex-direction: row;
    align-items: center;
    padding: 0 0.8rem;
    border-right: 0;
    border-top: 1px solid rgba(244, 215, 164, 0.28);
  }
  .hinge ul { flex-direction: row; gap: 0.9rem; padding: 0; width: 100%; justify-content: space-between; }
  .hinge a { writing-mode: horizontal-tb; transform: none; font-size: 0.92rem; letter-spacing: 0.08em; }
  .wedge { display: none; }
  main { margin-left: 0; padding-bottom: 5rem; }
  html { scroll-padding-bottom: 5rem; }
  .yard { grid-template-columns: 1fr; min-height: 0; overflow: hidden; }
  .yard-photo { order: -1; min-height: 42vh; height: 46vh; }
  .yard-copy { padding: 1.35rem var(--edge) 1.5rem; }
  .word { font-size: clamp(4.4rem, 24vw, 6.4rem); }
  .fields, .fields-2, .rail-row, .night, .split { grid-template-columns: 1fr; }
  .rail-row { gap: 0.9rem; }
  .night article, .night article:first-child { padding: 1.1rem var(--edge); border-right: 0; border-bottom: 1px solid rgba(244, 215, 164, 0.16); }
  .sheet, .band, .tab-wrap { padding-left: var(--edge); padding-right: var(--edge); }
  .tab dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .tab dd { margin-bottom: 0.45rem; }
  .well { min-height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow { animation: none; }
  .bottle.is-lit { transform: none; }
}

body.admin-bar .hinge { top: 32px; }
@media (max-width: 860px) {
  body.admin-bar .hinge { top: auto; }
}
@media (max-width: 782px) {
  body.admin-bar .hinge { top: auto; }
}