/* Lytic Brew — shared styles */

:root{
  --base:#0E1116;
  --raise:#161A21;
  --line:#262C36;
  --text:#ECEEF1;
  --muted:#98A1AD;
  --amber:#FFBD59;
  --steel:#ACACAC;
  --measure:36rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--base);
  color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%; max-width:64rem; margin:0 auto; padding:0 1.75rem}

a{color:var(--amber); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px; border-radius:1px;
}

/* ---------- masthead ---------- */

.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.6rem 0; flex-wrap:wrap;
}

.mark{display:flex; align-items:center; gap:.7rem; color:var(--text)}
.mark:hover{text-decoration:none}
.mark img{display:block; width:30px; height:26px}
.mark span{font-family:"Newsreader",Georgia,serif; font-size:1.3rem; letter-spacing:.005em}

.nav{display:flex; gap:1.7rem; font-size:.92rem}
.nav a{color:var(--muted); padding-bottom:3px; border-bottom:1px solid transparent}
.nav a:hover{color:var(--text); text-decoration:none; border-bottom-color:var(--line)}
.nav a[aria-current=page]{color:var(--text); border-bottom-color:var(--amber)}

/* ---------- landing ---------- */

.landing{flex:1; display:flex; align-items:center; padding:3rem 0 5rem; position:relative; overflow:hidden}

.landing .wrap{position:relative; z-index:1}

h1{
  font-family:"Newsreader",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.3rem,5.4vw,3.7rem);
  line-height:1.14;
  letter-spacing:-.016em;
  margin:0 0 1.6rem;
  max-width:19ch;
}

.lede{max-width:var(--measure); font-size:1.12rem; color:var(--muted); margin:0}

.landing-actions{display:flex; gap:1.6rem; align-items:center; margin-top:2.75rem; flex-wrap:wrap}

/* brand-geometry backdrop, derived from the mark */
.field{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
}
.field svg{width:100%; height:100%; display:block}

/* ---------- inner pages ---------- */

main.page{flex:1; padding:2.5rem 0 5rem}

.page-title{
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(2rem,4.4vw,2.9rem); line-height:1.18;
  letter-spacing:-.014em; margin:0 0 .9rem; max-width:20ch;
}

.page-intro{max-width:var(--measure); color:var(--muted); font-size:1.06rem; margin:0 0 3.25rem}

h2{
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:1.75rem; letter-spacing:-.01em; margin:0 0 1.4rem;
}

.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.3rem}
.prose p:last-child{margin-bottom:0}

.rule{border:0; border-top:1px solid var(--line); margin:3.25rem 0}

.split{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start}

/* ---------- figures ---------- */

figure{margin:0; border:1px solid var(--line); background:var(--raise); border-radius:3px; overflow:hidden}
figure svg{display:block; width:100%; height:auto}
figcaption{padding:.85rem 1.1rem; border-top:1px solid var(--line); font-size:.86rem; color:var(--muted)}

/* ---------- status list ---------- */

.status{list-style:none; padding:0; margin:0}
.status li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1.5rem;
  padding:1.25rem 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.status li:first-child{border-top:1px solid var(--line)}
.stage{font-size:.82rem; color:var(--amber)}
.stage.later{color:var(--muted)}
.status strong{display:block; font-weight:500; margin-bottom:.2rem}
.status .detail{color:var(--muted); font-size:.96rem; max-width:34rem}

/* ---------- forms ---------- */

form{max-width:26rem}
label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:.45rem}
.field-row{margin-bottom:1.15rem}

input[type=text],input[type=email],textarea{
  width:100%; padding:.72rem .85rem; font:inherit; font-size:1rem;
  color:var(--text); background:var(--raise);
  border:1px solid var(--line); border-radius:2px;
}
input::placeholder,textarea::placeholder{color:#6A737F}
textarea{min-height:8rem; resize:vertical}

button{
  font:inherit; font-size:.95rem; font-weight:500;
  padding:.75rem 1.5rem; color:#151515; background:var(--amber);
  border:0; border-radius:2px; cursor:pointer;
}
button:hover{background:#FFD08A}

.detail-block p{margin:0 0 .45rem}
.detail-block .label{color:var(--muted); font-size:.88rem; margin-bottom:.2rem}
.detail-block address{font-style:normal; line-height:1.7}
.detail-block + .detail-block{margin-top:1.9rem}

/* ---------- footer ---------- */

footer{border-top:1px solid var(--line); padding:1.75rem 0 2.5rem; font-size:.87rem; color:var(--muted)}
footer .wrap{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
footer a{color:var(--muted)}

/* ---------- motion ---------- */

@media (prefers-reduced-motion:no-preference){
  .landing h1,.landing .lede,.landing-actions{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
  .landing .lede{animation-delay:.09s}
  .landing-actions{animation-delay:.18s}
  @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
}

/* ---------- responsive ---------- */

@media (max-width:720px){
  .split{grid-template-columns:1fr; gap:2.5rem}
  .status li{grid-template-columns:1fr; gap:.3rem}
  .landing{padding:2rem 0 3.5rem}
  main.page{padding:1.5rem 0 3.5rem}
  .field{opacity:.28}
}