
:root { --bg:#cfc8bc; --ink:#1c1915; --muted:#5e584f; --line:#c9bfb0; --paper:#f7f4ee; --head:#1b2822; --head2:#24352c; --link:#1a4f34; --pin:#f4efe2; --hot:#fbf8f2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
a { color:var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid #1a4f34; outline-offset:2px; }
img { max-width:100%; height:auto; }
.top { background:var(--head); color:#f3eee4; }
.top-in, .wrap { width:min(1120px, calc(100% - 1.5rem)); margin:0 auto; }
.top-in { display:flex; align-items:center; gap:1rem; padding:.7rem 0; }
.logo { color:#f3eee4; text-decoration:none; font-weight:650; font-size:1.15rem; letter-spacing:.01em; display:flex; align-items:center; gap:.55rem; }
.logo img { width:36px; height:36px; object-fit:cover; border-radius:2px; }
.logo span { font-weight:450; color:#c9d3cb; }
.search { margin-left:auto; display:flex; }
.search input { border:0; background:#f7f4ee; color:var(--ink); padding:.4rem .55rem; width:11rem; border-radius:2px 0 0 2px; }
.search button, .btn, button { font:inherit; cursor:pointer; border:0; background:#efe6d4; color:#1c1915; padding:.4rem .7rem; border-radius:2px; }
.search button { border-radius:0 2px 2px 0; }
.btn { background:#efe6d4; text-decoration:none; display:inline-block; }
button:active, .btn:active { background:#e2d3b4; }
.account { display:flex; gap:.7rem; align-items:center; }
.account a { color:#efe6d4; }
.hello { color:#efe6d4; }
.tabs { background:var(--head2); }
.tabs-in { width:min(1120px, calc(100% - 1.5rem)); margin:0 auto; display:flex; gap:.2rem; flex-wrap:wrap; }
.tabs a { color:#d5ddd6; text-decoration:none; padding:.55rem .75rem; display:inline-block; }
.tabs a[aria-current="page"], .tabs a:hover { background:#1b2822; color:#fff; }
.wrap { padding:1rem 0 2.2rem; }
.crumb { color:var(--muted); font-size:.86rem; margin:0 0 .7rem; }
.stats { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; background:var(--paper); border:1px solid var(--line); padding:.55rem .75rem; margin:0 0 .8rem; font-size:.9rem; }
.board { background:var(--paper); border:1px solid var(--line); margin:0 0 .8rem; }
.board h2 { margin:0; background:#e7e0d4; border-bottom:1px solid var(--line); padding:.45rem .7rem; font-size:.95rem; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.55rem .65rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:650; }
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; }
.last { width:13rem; font-size:.86rem; color:var(--muted); }
.sub { display:block; color:var(--muted); font-size:.86rem; margin-top:.15rem; }
.post { display:grid; grid-template-columns:150px 1fr; border-bottom:1px solid var(--line); background:var(--paper); }
.post .who { padding:.75rem .6rem; background:#f3efe6; border-right:1px solid var(--line); }
.post .body { padding:.75rem .9rem 1rem; }
.av { width:48px; height:48px; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; color:#f7f4ee; font-weight:650; }
.role, .meta { color:var(--muted); font-size:.8rem; display:block; margin-top:.2rem; }
.uname { font-weight:650; text-decoration:none; }
.sig { margin-top:.8rem; padding-top:.45rem; border-top:1px dashed var(--line); color:var(--muted); font-size:.86rem; }
blockquote { margin:.5rem 0; padding:.35rem .6rem; border-left:3px solid #c4b89a; background:#f3efe6; color:#3c3832; }
.attach { margin:.6rem 0; max-width:520px; border:1px solid var(--line); background:#fff; padding:.35rem; }
.attach figcaption { color:var(--muted); font-size:.82rem; margin-top:.25rem; }
.reply, .form { background:var(--paper); border:1px solid var(--line); padding:.8rem; margin-top:.8rem; }
label { display:block; font-size:.86rem; margin:.55rem 0 .2rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea { width:min(100%, 28rem); font:inherit; padding:.4rem .5rem; border:1px solid #b7ad9e; background:#fff; border-radius:2px; }
textarea { min-height:7rem; width:min(100%, 40rem); }
.note { background:#f4efe2; border:1px solid var(--line); padding:.6rem .7rem; margin:.6rem 0; }
.members td { vertical-align:middle; }
.bulletin { display:grid; gap:.55rem; }
.slip { background:#fbf8f1; border:1px solid var(--line); padding:.7rem .8rem; }
.slip .tag { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
footer { color:var(--muted); font-size:.86rem; padding:0 0 1.4rem; }
footer .top-in { padding-top:0; }
.film { display:grid; grid-template-columns:repeat(5, 1fr); gap:.45rem; margin:0 0 .9rem; }
.film a { display:block; background:#111; }
.film img { width:100%; height:168px; object-fit:cover; }
.film figcaption { color:var(--muted); font-size:.78rem; padding:.28rem .1rem .1rem; }
.thumb { width:92px; height:64px; object-fit:cover; display:block; background:#ddd; }
.slip img { width:100%; max-height:220px; object-fit:cover; margin:.4rem 0; }
@media (max-width: 760px) {
  .top-in { flex-wrap:wrap; }
  .search { margin-left:0; width:100%; }
  .search input { flex:1; width:auto; }
  .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 { background:#e7dfd2; font-family:Georgia,"Palatino Linotype",Palatino,serif; font-size:18px; line-height:1.55; }
.top, .tabs, button, .btn, .search, label, .meta, .dateline, footer, .role, th { font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; }
.mast { padding:.2rem 0 .2rem; }
.word { font-size:clamp(2.7rem,7vw,4.8rem); line-height:.92; letter-spacing:-.03em; font-weight:600; margin:0; }
.dateline { margin:.35rem 0 .9rem; font-size:.92rem; color:#3e382f; }
.lead { display:grid; grid-template-columns:1.5fr .68fr; gap:1.3rem; align-items:start; }
.lead img.heroimg { width:100%; height:min(520px,62vw); object-fit:cover; }
.dek { font-size:1.2rem; line-height:1.4; }
.story { max-width:68ch; }
.story p { margin:.85rem 0; }
.sideitem { display:grid; grid-template-columns:120px 1fr; gap:.65rem; margin:0 0 .9rem; }
.sideitem img { width:120px; height:86px; object-fit:cover; }
.cols { display:grid; grid-template-columns:1.35fr .72fr; gap:1.5rem; margin-top:1.3rem; }
.picrow { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:.45rem; margin:1.1rem 0; }
.picrow figure { margin:0; }
.picrow img { width:100%; height:240px; object-fit:cover; }
.picrow figcaption, .lead figcaption { color:#4a433a; font-family:"Segoe UI",sans-serif; font-size:.86rem; margin-top:.3rem; }
.talkline { padding:.5rem 0; border-top:1px solid var(--line); }
h1,h2 { text-wrap:balance; letter-spacing:-.02em; }
.storyimg { width:100%; max-height:460px; object-fit:cover; }
