/* The Practice — Exeter · shared stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Barlow:wght@400;500;600&display=swap');

:root{
  --bg:#f5f1e8;        /* warm cream (matches the seal) */
  --paper:#fbf9f3;
  --ink:#1a1712;       /* near-black, warm */
  --muted:#6f665a;
  --faint:#a89e8e;
  --line:#ddd4c4;
  --ember:#b8552a;     /* used sparingly — the rig's orange */
  --maxw:640px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* header / nav */
header{padding:40px 0 8px;text-align:center;}
.mark{width:96px;height:96px;display:inline-block;}
nav{margin-top:22px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;}
nav a{color:var(--muted);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;}
nav a:hover{color:var(--ink);}
nav a.active{color:var(--ink);border-bottom-color:var(--ink);}

/* type */
h1{font-family:'Fraunces',serif;font-weight:500;font-size:40px;line-height:1.1;
  letter-spacing:-.01em;margin:34px 0 4px;text-align:center;}
h1 .place{display:block;font-size:16px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);margin-top:12px;font-family:'Barlow',sans-serif;}
h2{font-family:'Fraunces',serif;font-weight:500;font-size:26px;line-height:1.2;
  margin:52px 0 14px;}
h3{font-family:'Barlow',sans-serif;font-weight:600;font-size:15px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:34px 0 10px;}
p{margin:0 0 18px;}
.act{font-family:'Fraunces',serif;font-weight:500;font-size:22px;text-transform:none;margin:36px 0 8px;letter-spacing:0;}
.act .when{display:block;font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:5px;}
.lede{font-size:21px;line-height:1.55;}
em{font-style:italic;}
a{color:var(--ember);}
hr{border:none;border-top:1px solid var(--line);margin:44px 0;}
.center{text-align:center;}
.muted{color:var(--muted);}

/* timetable */
.timetable{border-top:1px solid var(--line);margin:8px 0 0;}
.slot{display:flex;align-items:baseline;gap:16px;padding:15px 2px;
  border-bottom:1px solid var(--line);}
.slot .day{font-weight:600;min-width:104px;}
.slot .what{flex:1;}
.slot .time{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.slot.soon{opacity:.62;}
.slot.soon .what::after{content:" · coming soon";color:var(--ember);font-size:14px;}
.note{font-size:15px;color:var(--muted);margin-top:14px;}

/* join / CTA */
.join{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:28px 26px;margin:40px 0;text-align:center;}
.join img.qr{width:172px;height:172px;border-radius:8px;margin:6px auto 4px;display:block;}
.btn{display:inline-block;background:var(--ink);color:var(--bg);text-decoration:none;
  font-weight:600;letter-spacing:.03em;padding:13px 26px;border-radius:999px;margin-top:8px;}
.btn:hover{background:#000;}

/* embedded simulator */
.simframe{width:100%;height:78vh;min-height:560px;border:1px solid var(--line);
  border-radius:14px;background:#06080d;margin:22px 0;}
.videos{display:grid;gap:16px;margin:20px 0;}
.video{aspect-ratio:16/9;background:var(--paper);border:1px dashed var(--line);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:16px;}

/* light-grammar key */
.key{display:flex;gap:14px;align-items:flex-start;margin:14px 0;}
.key .dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.key .g{background:#2bd66f;} .key .b{background:#3a8dff;} .key .o{background:#ff9d3d;}

footer{border-top:1px solid var(--line);margin-top:64px;padding:28px 0 56px;
  text-align:center;color:var(--faint);font-size:13px;letter-spacing:.04em;}

@media(max-width:520px){
  body{font-size:17px;}
  h1{font-size:32px;}
  .lede{font-size:19px;}
  .slot .day{min-width:86px;}
}