/* og2000 — overgrow.net homepage. 2001 Edge Forums aesthetic, 2026 mechanics. Palette, ridge borders, GIF vocabulary and density are preserved verbatim. Type scale, measure, landmarks, contrast and responsiveness are rebuilt. */ :root{ /* palette — from the 2001 page, with the two failing pairs corrected */ --sage:#80a080; /* page background + ridge border */ --cream:#f7f7f1; /* forum row background */ --pale:#cfdfcf; /* alternating cell / category bar */ --bar:#4d6b4d; /* was #709070 — darkened so white on it reaches 5.9:1 */ --ink:#000000; --link:#003300; /* 13.3:1 on cream, 4.9:1 on sage. #007700 is not used: 2.0:1 on sage */ --hot:#b30000; /* was #ff0000 — 5.9:1 on cream, 5.1:1 on pale */ --white:#ffffff; /* type — root is 16px, everything below is rem so a reader's default size wins */ --face:Verdana,"DejaVu Sans","Bitstream Vera Sans",Geneva,Tahoma,sans-serif; --fs-small:clamp(0.875rem,0.82rem + 0.25vw,0.95rem); /* 14–15.2px — was ≈10px */ --fs-base:clamp(1rem,0.95rem + 0.25vw,1.075rem); /* 16–17.2px — was ≈13px */ --fs-lead:1.1875rem; /* strap line, section headings */ --measure:1160px; --frame-pad:1.15rem; --lh-desc:1.5; --cell-y:0.4rem; --cell-x:0.55rem; } /* Alternate states. The type scale and the measure are the two corrections the whole project exists for, so "2001" is kept: it restores the original 10px/13px quirks-mode sizing, which makes the before/after directly comparable. Nothing sets these attributes at runtime — set one on by hand to compare. */ html[data-type-scale="2001"]{--fs-small:0.625rem;--fs-base:0.8125rem;--lh-desc:1.18} html[data-type-scale="mid"]{--fs-small:0.75rem;--fs-base:0.875rem;--lh-desc:1.35} html[data-density="compact"]{--cell-y:0.22rem;--cell-x:0.45rem;--lh-desc:1.35} html[data-density="comfy"]{--cell-y:0.7rem;--cell-x:0.8rem} html[data-bar="2001"]{--bar:#709070} html[data-grouping="flat"] tr.grouprow{display:none} html[data-subforums="off"] .fsubs{display:none} html[data-catcolor="on"] tr.frow>.c-status{box-shadow:inset 3px 0 0 var(--cat,transparent)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;padding:1.25rem 1rem 2.5rem;background:var(--sage);color:var(--ink);font-family:var(--face);font-size-adjust:0.545;font-size-adjust:ex-height from-font;font-size:var(--fs-small);line-height:var(--lh-desc)} img{border:0;vertical-align:middle} a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} a:hover,a:active{color:var(--hot);text-decoration-thickness:2px} a:visited{color:var(--link)} :where(a,button,input,select,summary):focus-visible{outline:3px solid var(--link);outline-offset:2px} .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .page{max-width:var(--measure);margin:0 auto} /* ---------- masthead: artwork + real nav (the three image maps are gone) ---------- */ /* ---------- the cream panel ---------- */ /* Measured off assets/edge_header.png (420x103): its own sage-to-cream boundary is at y=40 on the right edge, so the panel's top edge sits there and the artwork's lower 63px overlays the panel. Below y=56 the only non-cream pixels are the leaf, out to x=115 - hence the 130px indent on the masthead. One cream, no step. */ .frame{position:relative;background:var(--cream);margin-top:40px;padding:0 var(--frame-pad)} .masthead{position:relative;padding:1rem 0 0 130px;min-height:63px} .brand{position:absolute;top:-40px;left:calc(-1 * var(--frame-pad));width:420px;max-width:100%;line-height:0;text-decoration:none;z-index:0} .brand img{display:block;width:100%;height:auto} .brand:focus-visible{outline-offset:-3px} /* The bottom corners are closed by 15px corner artwork; the top-left is closed by the header artwork's own sage-to-cream sweep. The top-right reuses the same corner GIF, flipped, so all three open corners are the identical curve. */ .topcorner{position:absolute;top:0;right:0;transform:scaleY(-1)} .topnav{position:relative;z-index:1} .topnav ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0.35rem 0.6rem;margin:0 0 0.4rem;padding:0 1.1rem 0 0;list-style:none} .topnav li{display:flex;align-items:center;gap:0.6rem} .topnav li+li::before{content:"\00b7";color:var(--bar);font-weight:700} .topnav a{display:inline-flex;align-items:center;min-height:1.5rem;padding:0.25rem 0.15rem;color:var(--link);font-size:var(--fs-small);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;text-decoration:none} .topnav a:hover,.topnav a:active{color:var(--hot);text-decoration:underline;text-decoration-thickness:2px} /* The 2001 page's one ridge rule, kept literally for post imagery. */ .img-med{border:6px ridge var(--sage);margin:5px} .strap{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0.2rem 0.9rem;margin:0 0 0.75rem;font-size:var(--fs-base);line-height:1.35} .strap .label{font-weight:700} .strap .title{font-size:var(--fs-lead)} .strap .by{font-style:italic} .strap time{color:var(--hot)} .fade{display:block;width:472px;max-width:100%;height:auto;margin-left:auto} /* ---------- bulletin band (news, stats, last visit, hot topic, clock) ---------- */ h1{margin:0;font-size:var(--fs-base);line-height:1.35} h1 .site{font-weight:700} h1 .sub{font-weight:400} .bulletin{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0.35rem 1.5rem;padding:0.35rem 0 0.6rem} .bulletin>*{margin:0} .bulletin .right{text-align:right} .news{font-size:var(--fs-base);line-height:1.35} .news b{font-weight:700} .stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0.1rem 0.75rem;font-size:var(--fs-base);font-variant-numeric:tabular-nums} .stats li{display:flex;gap:0.35rem;list-style:none} .stats{margin:0;padding:0} .stats b{font-weight:700} .stats li:not(:first-child){padding-inline-start:0.75rem;border-inline-start:1px solid #9ab89a} .catbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.25rem 1.5rem;align-items:center;background:var(--pale);padding:0.4rem 0.6rem;font-size:var(--fs-base)} .catbar>*{margin:0} .catbar .hot{display:flex;align-items:center;gap:0.45rem;min-width:0} .catbar .hot .lbl{font-weight:700;white-space:nowrap} .catbar .hot a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .catbar .appreciated{text-align:right} .clock{margin:0;padding:0.45rem 0 0.6rem;font-size:var(--fs-small)} .clock .guest{font-style:italic} /* ---------- the forum index: a real table, because it is real tabular data ---------- */ .forums{width:100%;border-collapse:separate;border-spacing:1px;background:var(--sage);font-size:var(--fs-small)} .forums caption{text-align:left;padding:0 0 0.4rem;font-size:var(--fs-small)} .forums th,.forums td{padding:var(--cell-y) var(--cell-x);text-align:left;vertical-align:top;line-height:1.3} .forums thead th{background:var(--bar);color:var(--white);font-size:var(--fs-small);font-weight:700;white-space:nowrap} .forums thead .num,.forums thead .st{text-align:center} .forums col.st{width:2.25rem} .forums col.num{width:5rem} .forums col.last{width:17.5rem} .grouprow th{background:var(--pale);padding:0.5rem 0.6rem} .grouprow h2{margin:0;font-size:var(--fs-base);font-weight:700;line-height:1.3} .frow .c-status{background:var(--cream);text-align:center} .frow .c-forum{background:var(--cream)} .frow .c-posts{background:var(--pale)} .frow .c-threads{background:var(--cream)} .frow .c-last{background:var(--pale)} .frow .c-posts,.frow .c-threads{text-align:center;white-space:nowrap;font-size:var(--fs-base);font-variant-numeric:tabular-nums} /* 24×24 minimum hit area for the period icons (WCAG 2.5.8) */ .hit{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem} .state{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem} .fhead{display:flex;flex-wrap:wrap;align-items:center;gap:0 0.25rem;margin:0} .fname{margin:0;font-size:var(--fs-base);font-weight:700;line-height:1.3} .fdesc{margin:0.2rem 0 0;max-width:75ch;line-height:var(--lh-desc)} .fsubs{display:flex;flex-wrap:wrap;gap:0.1rem 0.7rem;margin:0.3rem 0 0;font-size:var(--fs-small)} /* any `display` an author sets outranks the UA's [hidden]{display:none}. app.js builds rows from the