/* HAVENHOLD-UI-SHADCN-006 — paper video in lead column (vertical rhythm) */
:root {
  --bg:#f4f4f5; --ink:#09090b; --muted:#71717a; --line:#e4e4e7;
  --paper:#ffffff; --head:#18181b; --head2:#27272a; --link:#166534;
  --pin:#fafaf9; --hot:#f4f4f5; --ring:#22c55e; --radius:.5rem;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --ease:150ms cubic-bezier(.4,0,.2,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition-duration:0s !important; } }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
a { color:var(--link); text-decoration:none; transition:color var(--ease); }
a:hover { color:#14532d; text-decoration:underline; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:2px solid var(--ring); outline-offset:2px;
}
img { max-width:100%; height:auto; }
.top {
  background:var(--head); color:#fafafa; border-bottom:1px solid #3f3f46;
  position:sticky; top:0; z-index:40; font-size:.8125rem;
}
.top-in, .wrap { width:min(1120px, calc(100% - 1.5rem)); margin:0 auto; }
.top-in {
  display:grid; grid-template-columns:minmax(0,auto) minmax(8rem,1fr) auto;
  align-items:center; gap:.4rem .75rem; padding:.4rem 0;
}
.logo {
  color:#fafafa; text-decoration:none; font-weight:600; font-size:.875rem; letter-spacing:-.01em;
  display:flex; align-items:center; gap:.45rem; min-width:0;
}
.logo:hover { color:#fff; text-decoration:none; }
.logo img { width:32px; height:32px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); flex-shrink:0; }
.logo span { font-weight:450; color:#a1a1aa; }
.search { display:flex; min-width:0; width:100%; max-width:13.5rem; justify-self:end; }
.search input[type="search"] {
  border:1px solid #3f3f46; background:#27272a; color:#fafafa; padding:.3rem .5rem; flex:1; min-width:0; width:auto; max-width:none;
  border-radius:var(--radius) 0 0 var(--radius); transition:border-color var(--ease), box-shadow var(--ease); min-height:2rem;
  font-size:.8125rem;
}
.search input::placeholder { color:#a1a1aa; }
.search input:focus { border-color:var(--ring); box-shadow:0 0 0 1px var(--ring); outline:none; }
.search button, .btn, button {
  font:inherit; cursor:pointer; border:1px solid transparent; background:#fafafa; color:#18181b;
  padding:.3rem .65rem; border-radius:var(--radius); font-weight:500; transition:background var(--ease), transform var(--ease);
  font-size:.8125rem;
}
.search button { border-radius:0 var(--radius) var(--radius) 0; border-left:0; flex-shrink:0; white-space:nowrap; }
.btn { text-decoration:none; display:inline-block; }
button:hover, .btn:hover { background:#e4e4e7; }
button:active, .btn:active { transform:scale(.98); }
.account { display:flex; gap:.45rem; align-items:center; font-size:.8125rem; flex-shrink:0; justify-self:end; }
.account a:not(.btn) { color:#e4e4e7; white-space:nowrap; }
.account a:not(.btn):hover { color:#fff; }
.account .btn { color:#18181b !important; background:#fafafa; text-decoration:none; }
.account .btn:hover { background:#e4e4e7; color:#18181b !important; text-decoration:none; }
.hello { color:#fafafa; font-weight:500; white-space:nowrap; }
.tabs { background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.04); }
.tabs-in { width:min(1120px, calc(100% - 1.5rem)); margin:0 auto; display:flex; gap:0; flex-wrap:wrap; padding:0; }
.tabs a {
  color:var(--muted); text-decoration:none; padding:.72rem 1rem; display:inline-block;
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--ease), border-color var(--ease), background var(--ease);
}
.tabs a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--link); background:transparent; }
.tabs a:hover { color:var(--ink); background:#fafafa; text-decoration:none; }
.wrap { padding:1.25rem 0 2.5rem; }
.crumb { color:var(--muted); font-size:.8125rem; margin:0 0 .75rem; }
.stats {
  display:flex; flex-wrap:wrap; gap:.35rem 1rem; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:.5rem .75rem; margin:0 0 .85rem; font-size:.8125rem;
}
.board { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin:0 0 .85rem; overflow:hidden; }
.board h2 { margin:0; background:#fafafa; border-bottom:1px solid var(--line); padding:.5rem .75rem; font-size:.875rem; font-weight:600; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.45rem .65rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:.875rem; }
th { font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; }
tbody tr { transition:background var(--ease); }
tbody tr:hover { background:#fafafa; }
tr:last-child td { border-bottom:0; }
tr.pin { background:var(--pin); }
.num { text-align:right; white-space:nowrap; color:var(--muted); width:4.5rem; font-variant-numeric:tabular-nums; }
.last { width:13rem; font-size:.8125rem; color:var(--muted); }
.sub { display:block; color:var(--muted); font-size:.8125rem; margin-top:.12rem; line-height:1.4; }
.post { display:grid; grid-template-columns:152px 1fr; border-bottom:1px solid var(--line); background:var(--paper); }
.post .who { padding:.75rem .65rem; background:#fafafa; border-right:1px solid var(--line); }
.post .body { padding:.75rem 1rem 1rem; }
.av { width:40px; height:40px; border-radius:var(--radius); display:inline-flex; align-items:center; justify-content:center; color:#fafafa; font-weight:600; font-size:.75rem; }
.role, .meta { color:var(--muted); font-size:.75rem; display:block; margin-top:.15rem; }
.uname { font-weight:600; text-decoration:none; }
.uname:hover { text-decoration:underline; }
.sig { margin-top:.75rem; padding-top:.4rem; border-top:1px dashed var(--line); color:var(--muted); font-size:.8125rem; }
blockquote { margin:.5rem 0; padding:.4rem .65rem; border-left:3px solid #d4d4d8; background:#fafafa; color:#3f3f46; border-radius:0 var(--radius) var(--radius) 0; }
.attach { margin:.6rem 0; max-width:520px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:.35rem; box-shadow:var(--shadow); }
.attach figcaption { color:var(--muted); font-size:.75rem; margin-top:.25rem; }
.reply, .form { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:.85rem; margin-top:.85rem; }
label { display:block; font-size:.8125rem; font-weight:500; margin:.5rem 0 .25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  width:min(100%, 28rem); font:inherit; padding:.45rem .55rem; border:1px solid var(--line); background:#fff;
  border-radius:var(--radius); transition:border-color var(--ease), box-shadow var(--ease);
}
input:focus, select:focus, textarea:focus { border-color:var(--ring); box-shadow:0 0 0 1px var(--ring); outline:none; }
textarea { min-height:7rem; width:min(100%, 40rem); }
.note { background:#fefce8; border:1px solid #fef08a; border-radius:var(--radius); padding:.6rem .75rem; margin:.6rem 0; font-size:.875rem; }
.members td { vertical-align:middle; }
.bulletin { display:grid; gap:.6rem; }
.slip {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:.75rem .85rem; transition:box-shadow var(--ease), border-color var(--ease);
}
.slip:hover { border-color:#d4d4d8; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.slip .tag { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
footer { color:var(--muted); font-size:.8125rem; padding:0 0 1.5rem; border-top:1px solid var(--line); margin-top:.5rem; }
footer .top-in { padding-top:1rem; }
.film { display:grid; grid-template-columns:repeat(6, 1fr); gap:.45rem; margin:0 0 .9rem; }
.film a { display:block; background:#18181b; border-radius:var(--radius); overflow:hidden; transition:transform var(--ease); }
.film a:hover { transform:translateY(-2px); }
.film img { width:100%; height:168px; object-fit:cover; }
.film figcaption { color:var(--muted); font-size:.75rem; padding:.3rem .1rem .1rem; }
.thumb { width:92px; height:64px; object-fit:cover; display:block; background:#e4e4e7; border-radius:calc(var(--radius) - 2px); }
.slip img {
  width:100%; max-height:280px; min-height:140px; object-fit:cover; margin:.45rem 0;
  border-radius:calc(var(--radius) - 2px); display:block; background:#e4e4e7;
}
.news-hero img, .sideitem img { background:#e4e4e7; }
@media (max-width: 900px) {
  .top-in {
    grid-template-columns:1fr auto;
    grid-template-areas:"logo account" "search search";
  }
  .logo { grid-area:logo; }
  .account { grid-area:account; }
  .search { grid-area:search; max-width:none; justify-self:stretch; }
}
@media (max-width: 760px) {
  .post { grid-template-columns:1fr; }
  .post .who { border-right:0; border-bottom:1px solid var(--line); display:flex; gap:.6rem; align-items:center; }
  .last, .num { width:auto; }
  .film { grid-template-columns:repeat(2, 1fr); }
  .film img { height:120px; }
  .lead, .cols, .picrow { grid-template-columns:1fr; }
  .lead img.heroimg, .picrow img { height:220px; }
}
body.paper, body { font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif; font-size:17px; line-height:1.6; }
.top, .tabs, button, .btn, .search, label, .meta, .dateline, footer, .role, th, .stats, .board h2, .slip .tag { font-family:ui-sans-serif, system-ui, "Segoe UI", sans-serif; }
.mast { padding:.15rem 0 .25rem; }
.word { font-size:clamp(2.4rem,6.5vw,4.2rem); line-height:.95; letter-spacing:-.035em; font-weight:600; margin:0; }
.dateline { margin:.4rem 0 1rem; font-size:.875rem; color:var(--muted); }
.lead { display:grid; grid-template-columns:1.55fr .65fr; gap:1.25rem; align-items:start; }
.lead-main { min-width:0; display:flex; flex-direction:column; gap:0; }
.lead-main .story p:last-child { margin-bottom:.35rem; }
.lead img.heroimg { width:100%; height:min(500px,58vw); object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.dek { font-size:1.15rem; line-height:1.45; color:#27272a; }
.story { max-width:68ch; }
.story p { margin:.8rem 0; }
.sideitem {
  display:grid; grid-template-columns:112px 1fr; gap:.65rem; margin:0 0 .75rem; padding:.5rem;
  border-radius:var(--radius); transition:background var(--ease);
}
.sideitem:hover { background:#fafafa; }
.sideitem img { width:112px; height:80px; object-fit:cover; border-radius:calc(var(--radius) - 2px); }
.cols { display:grid; grid-template-columns:1.35fr .72fr; gap:1.35rem; margin-top:1.25rem; }
.picrow { display:grid; grid-template-columns:repeat(4, 1fr); gap:.45rem; margin:.65rem 0 1rem; }
.picrow figure { margin:0; }
.picrow img { width:100%; height:220px; object-fit:cover; border-radius:var(--radius); }
.picrow figcaption, .lead figcaption { color:var(--muted); font-size:.8125rem; margin-top:.35rem; }
.papervideo { margin:.5rem 0 0; padding:.5rem 0 0; border-top:1px solid var(--line); }
.papervideo-h { font-family:ui-sans-serif, system-ui, "Segoe UI", sans-serif; font-size:.9375rem; font-weight:600; margin:0 0 .4rem; letter-spacing:-.02em; }
.papervideo-frame { margin:0; }
.papervideo-v {
  width:100%; max-height:min(420px,52vw); object-fit:cover; display:block;
  border-radius:var(--radius); box-shadow:var(--shadow); background:#18181b;
}
.papervideo-frame figcaption { color:var(--muted); font-size:.8125rem; margin-top:.45rem; max-width:52ch; }
.papervideo-note { font-size:.75rem; color:var(--muted); margin:.35rem 0 0; font-family:ui-sans-serif, system-ui, sans-serif; }
.talkline { padding:.45rem 0; border-top:1px solid var(--line); transition:padding-left var(--ease); }
.talkline:hover { padding-left:.25rem; }
h1,h2 { text-wrap:balance; letter-spacing:-.025em; }
h1 a, h2 a { color:inherit; text-decoration:none; }
h1 a:hover, h2 a:hover { color:var(--link); }
.storyimg { width:100%; max-height:460px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }