*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{--bg:#F4F1E8;--bg2:#EAE6D8;--surface:#FFFFFF;--surface2:#F9F7F1; --green:#2D6A35;--green-h:#1E4F26;--green-tint:rgba(45,106,53,.09);--green-ring:rgba(45,106,53,.22); --green2:#3D8247;--green2-tint:rgba(61,130,71,.1); --moss:#5A7A3A;--moss-tint:rgba(90,122,58,.1); --amber:#7A5C1E;--amber-tint:rgba(122,92,30,.1); --rust:#8B3A2A;--rust-tint:rgba(139,58,42,.08); --text:#12190F;--text2:#1E2E1A;--text3:#4A5E42;--text4:#5E7156;--text4-dark:#8A9E82; --line:#D4CFC0;--line2:#BFB9A8; --ok:#166534;--ok-bg:rgba(22,101,52,.08); --err:#B91C1C;--err-bg:rgba(185,28,28,.08); --font-d:"Fraunces",serif;--font-b:"DM Sans",sans-serif; --font-m:"Fira Mono",monospace;--font-s:"Fraunces",serif; --e1:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04); --e2:0 4px 14px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.05); --e3:0 12px 36px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.06); --ease:cubic-bezier(.22,1,.36,1); --border:var(--line);--border2:var(--line2); --shadow-sm:var(--e1); --red:#B91C1C;--red-bg:rgba(185,28,28,.08); --green-bg:rgba(45,106,53,.08); --orange:var(--green);--orange-h:var(--green-h); --orange-tint:var(--green-tint);--orange-ring:var(--green-ring); --orange-light:rgba(45,106,53,.06); --amber-tint:rgba(122,92,30,.1);} html{font-size:16px;scroll-behavior:smooth} *,*::before,*::after{box-sizing:border-box} body{font-family:var(--font-b);background:var(--bg);color:var(--text2);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;max-width:100vw} ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:var(--bg2)} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} input,textarea,select,button{font-family:var(--font-b)} .mnav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:var(--e1)} .mnav-inner{display:flex;align-items:center;gap:8px;padding:0 32px;height:62px;width:100%} .mlogo{display:flex;align-items:center;gap:10px;flex-shrink:0} .logo-word{font-family:var(--font-d);font-size:19px;font-weight:900;color:var(--text);letter-spacing:-.4px} .logo-word em{font-style:italic;color:var(--green)} .mnav-links{display:flex;gap:0;flex:1;justify-content:center;overflow:visible} .nl{font-size:13px;color:var(--text3);padding:6px 10px;border-radius:7px;transition:.15s;font-family:var(--font-b);font-weight:500} .nl:hover{color:var(--text);background:var(--bg2)} .nl.active{color:var(--green);background:var(--green-tint);font-weight:600} .mnav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;justify-content:flex-end} .nav-user{position:relative} .nu-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:11px;font-weight:700;flex-shrink:0;overflow:hidden;color:#fff} .nu-name{font-size:12px;color:var(--text);padding:4px 8px 4px 5px;border-radius:8px;background:var(--surface2);border:1.5px solid var(--line);display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;transition:.15s;font-weight:500} .nu-name:focus-visible{outline:2px solid var(--green);outline-offset:2px} .nu-name:hover{background:var(--bg2);border-color:var(--line2)} .nu-caret{font-size:8px;color:var(--text4);margin-left:1px} .nu-drop{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:6px;min-width:190px;z-index:400;box-shadow:var(--e3)} .nu-drop.open{display:flex;flex-direction:column} .nu-sep{height:1px;background:var(--line);margin:4px 6px} .nu-drop a,.nu-drop button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;font-size:13px;color:var(--text2);border-radius:7px;background:none;border:none;cursor:pointer;text-align:left;transition:.12s;text-decoration:none} .nu-drop a:hover,.nu-drop button:hover{background:var(--bg2);color:var(--text)} .btn-ghost-nav{font-size:13px;color:var(--text2);padding:6px 12px;border-radius:7px;border:1.5px solid var(--line);transition:.15s;font-weight:500} .btn-ghost-nav:hover{border-color:var(--line2);color:var(--text)} .btn-green-nav{background:var(--green);color:#fff;font-size:13px;padding:6px 12px;border-radius:7px;font-weight:600;transition:.15s} .btn-green-nav:hover{background:var(--green-h)} .nav-burger{display:none;background:none;border:none;color:var(--text);font-size:18px;cursor:pointer;padding:6px} .btn{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border-radius:9px;font-family:var(--font-b);font-size:13.5px;font-weight:600;cursor:pointer;border:none;transition:.15s;letter-spacing:-.1px;text-decoration:none} .btn-primary{background:var(--green);color:#fff;box-shadow:0 1px 4px rgba(45,106,53,.35)} .btn-primary:hover{background:var(--green-h);box-shadow:0 4px 14px rgba(45,106,53,.4)} .btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--line2)} .btn-outline:hover{border-color:var(--green);color:var(--green)} .btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--line)} .btn-ghost:hover{background:var(--bg2);border-color:var(--line2)} .btn-sm{padding:7px 14px;font-size:12.5px;border-radius:7px} .btn-full{width:100%;justify-content:center} .hidden{display:none!important} .award-row .fg{margin:0} .rs-seg-btn.on{background:var(--green);color:#fff;box-shadow:var(--e1)} #track{max-width:100%} .q-dot.on{background:var(--green);width:20px;border-radius:4px} .bd-awb.more{cursor:pointer;color:var(--green);border-color:var(--green);background:var(--green-tint)} .bd-hero .btn-outline,.page-hero .btn-outline, .hero-section .btn-outline,.profile-hero .btn-outline,.reading-goal-hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.07);} .bd-hero .btn-outline:hover,.page-hero .btn-outline:hover, .hero-section .btn-outline:hover,.profile-hero .btn-outline:hover,.reading-goal-hero .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.15);color:#fff;} .bd-hero .btn-ghost,.page-hero .btn-ghost, .hero-section .btn-ghost,.profile-hero .btn-ghost,.reading-goal-hero .btn-ghost{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06);} .bd-hero .btn-ghost:hover,.page-hero .btn-ghost:hover, .hero-section .btn-ghost:hover,.profile-hero .btn-ghost:hover,.reading-goal-hero .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.44);color:#fff;} .flash{padding:13px 20px;border-radius:9px;margin:14px 40px;font-size:13.5px;display:flex;align-items:center;gap:10px} .flash-success{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(22,101,52,.22)} .flash-error{background:var(--err-bg);color:var(--err);border:1px solid rgba(185,28,28,.22)} .wrap{max-width:1200px;margin:0 auto;padding:0 40px} .section{padding:80px 0;background:var(--bg)} .label{font-family:var(--font-m);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--green)} .h1{font-family:var(--font-d);font-size:clamp(34px,5.5vw,66px);font-weight:900;line-height:1.05;letter-spacing:-.5px;color:var(--text)} .h2{font-family:var(--font-d);font-size:clamp(22px,3.5vw,40px);font-weight:700;line-height:1.15;color:var(--text)} .h3{font-family:var(--font-d);font-size:clamp(17px,2.5vw,24px);font-weight:700;line-height:1.25;color:var(--text)} .ob-author-form-grid .fg{display:flex;flex-direction:column;gap:5px} @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .state-pill.active{background:var(--green);color:#fff;border-color:var(--green)} .cat-pill.active{background:var(--green);color:#fff;border-color:var(--green)} .bs-item.active{color:var(--green);font-weight:600} @keyframes bdLbIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}} .pill{display:inline-block;font-family:var(--font-m);font-size:10px;font-weight:600;padding:4px 11px;border-radius:20px;letter-spacing:.5px} .fg{margin-bottom:14px} .fg label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;letter-spacing:.1px} .fg input,.fg textarea,.fg select{width:100%;border:1.5px solid var(--line2);border-radius:8px;padding:10px 13px;font-size:13.5px;color:var(--text);background:#fff;outline:none;transition:.2s} .fg input::placeholder,.fg textarea::placeholder{color:var(--text4)} .fg select option{background:var(--surface);color:var(--text)} .fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--green);background:var(--surface);box-shadow:0 0 0 3px var(--green-tint)} .fg textarea{resize:vertical;min-height:96px} .fg input[type=file]{padding:8px 10px;font-size:12px;color:var(--text3);cursor:pointer} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pf-mod-stamp.on{background:rgba(45,106,53,.14);border-color:rgba(45,106,53,.35);filter:none;opacity:1} .tc{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;box-shadow:var(--e1)} .space-link.active{background:var(--green-tint)} .admin-layout{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 62px)} .admin-sb{background:var(--surface);padding:20px 14px;border-right:1.5px solid var(--line)} .admin-ni{display:block;padding:9px 13px;border-radius:8px;font-size:13px;color:var(--text3);margin-bottom:3px;transition:.15s;text-decoration:none;font-weight:500} .admin-ni:hover,.admin-ni.active{background:var(--green-tint);color:var(--green)} .admin-alert{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:12px 16px; border-radius:10px;background:var(--red-bg);border:1.5px solid rgba(185,28,28,.25); color:var(--red);font-size:13px;text-decoration:none} .admin-alert strong{font-family:var(--font-m)} .admin-alert:hover{background:rgba(185,28,28,.12)} .admin-content{padding:30px 36px;background:var(--bg);min-width:0;overflow-x:auto} .admin-title{font-family:var(--font-d);font-size:24px;font-weight:900;color:var(--text);margin-bottom:22px} .atbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface);border-radius:12px;overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--e1)} .atbl th{padding:11px 14px;background:var(--bg2);border-bottom:1.5px solid var(--line);font-weight:600;color:var(--text3);font-family:var(--font-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;text-align:left} .atbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--text2);vertical-align:middle} .atbl tr:hover td{background:var(--surface2)} .atbl tr:last-child td{border-bottom:none} .nl-group{position:relative;display:inline-flex;align-items:center} .nl-group-btn{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--text2);padding:6px 10px;border-radius:7px;cursor:pointer;transition:.15s;font-family:var(--font-b);font-weight:500;border:none;background:none;white-space:nowrap} .nl-group-btn:hover,.nl-group-btn.open{color:var(--green);background:var(--green-tint)} .nl-group-btn .nl-caret{font-size:8px;opacity:.5;transition:.2s;display:inline-block} .nl-group-btn.open .nl-caret{transform:rotate(180deg);opacity:.8} .nl-group-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:170px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;box-shadow:var(--e2);padding:6px;z-index:400;display:none;flex-direction:column;gap:2px} .nl-group-drop.open{display:flex} .nl-group-drop a{display:block;padding:8px 12px;border-radius:7px;font-size:13px;color:var(--text2);text-decoration:none;transition:.15s;font-weight:500;white-space:nowrap} .nl-group-drop a:hover{background:var(--green-tint);color:var(--green)} .nl-group-drop a.active{color:var(--green);font-weight:600} .menu-row{display:flex;align-items:stretch;gap:0;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);overflow:hidden;transition:.15s;cursor:default} .menu-row:hover{border-color:var(--line2);box-shadow:var(--e1)} .menu-row.drag-over{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);background:var(--surface2)} .menu-row.dragging{opacity:.45;border-style:dashed} .menu-drag-handle{display:flex;align-items:center;justify-content:center;width:36px;flex-shrink:0;background:var(--surface2);border-right:1.5px solid var(--line);cursor:grab;color:var(--text4);font-size:16px;transition:.15s;user-select:none} .menu-drag-handle:active{cursor:grabbing;background:var(--green-tint);color:var(--green)} .menu-row-body{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:10px} .menu-row-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px} .menu-row-meta{display:flex;align-items:center;justify-content:space-between;gap:12px} .menu-toggle{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none} .menu-toggle input{position:absolute;opacity:0;width:0;height:0} .menu-toggle-track{width:36px;height:20px;border-radius:999px;background:var(--line2);transition:.2s;flex-shrink:0;position:relative} .menu-toggle input:checked~.menu-toggle-track{background:var(--green)} .menu-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s} .menu-toggle input:checked~.menu-toggle-track .menu-toggle-thumb{transform:translateX(16px)} .menu-toggle-label{font-size:12.5px;font-weight:600;color:var(--text3)} .menu-row.inactive-row{opacity:.65} .menu-preview{background:var(--text);border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:42px} .menu-preview-item{font-size:12px;color:rgba(255,255,255,.6);padding:4px 10px;border-radius:6px;transition:.15s;font-family:var(--font-b);font-weight:500;white-space:nowrap} .menu-preview-item.active{color:#fff;background:rgba(255,255,255,.12)} .menu-preview-logo{font-family:var(--font-d);font-size:13px;font-weight:700;color:#fff;margin-right:8px;padding-right:12px;border-right:1px solid rgba(255,255,255,.15);white-space:nowrap} .menu-add-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;border:1.5px dashed var(--line2);background:transparent;color:var(--text3);font-size:13px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--font-b)} .menu-add-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} .site-footer{background:#0A1A0C;padding:52px 40px 26px} .footer-inner{display:grid;grid-template-columns:2fr 3fr;gap:52px;margin-bottom:44px} .footer-cols-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px} .fb-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-size:18px;font-weight:900;color:#fff;margin-bottom:12px} .footer-brand p{font-size:13px;color:rgba(255,255,255,.3);line-height:1.75} .fc h4{font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:14px} .fc a{display:block;font-size:13px;color:rgba(255,255,255,.35);margin-bottom:9px;transition:.15s} .fc a:hover{color:var(--green2)} .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--font-m);font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.3px} @media(max-width:1200px){.nl{font-size:12.5px;padding:6px 8px}} @media(max-width:1380px){.nu-name .nu-label{display:none}} @media(max-width:900px){.mnav-inner{padding:0 16px;justify-content:space-between} .mnav-links{display:none;position:absolute;top:62px;left:0;right:0;background:var(--surface);flex-direction:column;padding:8px 16px 16px;border-bottom:1.5px solid var(--line);z-index:300;box-shadow:var(--e2)} .mnav-links.open{display:flex} .nl-group{width:100%} .nl-group-btn{width:100%;justify-content:space-between;padding:8px 4px} .nl-group-drop{position:static;border:none;box-shadow:none;background:var(--bg2);border-radius:8px;padding:4px 8px;margin-top:2px} .nl-group-drop.open{display:flex} .mnav-right{gap:6px} .nav-burger{display:block} .footer-inner{grid-template-columns:1fr;gap:0} .footer-brand{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)} .footer-cols-row{grid-template-columns:1fr 1fr 1fr;gap:20px} .admin-layout{grid-template-columns:1fr} .admin-sb{display:flex;gap:4px;flex-wrap:wrap;padding:10px;border-right:none;border-bottom:1.5px solid var(--line)} .admin-content{padding:20px 12px} .form-row{grid-template-columns:1fr} .wrap{padding:0 16px} .site-footer{padding:40px 20px 20px} .flash{margin:10px 16px}} @media(max-width:760px){.wrap,.bd-body,.books-layout,.community-layout,.tracker-layout,.profile-hero{max-width:100%;overflow-x:hidden} .section{padding:32px 0;width:100%;overflow-x:hidden} .nr-qa-compose-actions .btn{width:100%;justify-content:center} .pill{font-size:9.5px;padding:3px 9px} .bd-actions .btn{padding:10px 16px;font-size:13px;flex:1;min-width:130px;text-align:center;justify-content:center} .bd-actions .btn-primary{flex:1 0 100%} .bd-share .btn{flex:1;min-width:0} .wrap{padding:0 16px} .mnav-inner{padding:0 14px} .mnav-right{gap:4px} .nu-name .nu-pts{display:none} .nu-name .nu-caret{display:none} .nu-name .nu-label{display:none} .nu-name{padding:3px;gap:0;background:none;border-color:transparent;border-radius:50%;min-width:40px;min-height:40px;justify-content:center} .nu-name:hover{background:none;border-color:var(--line)} .nu-avatar{width:34px;height:34px;font-size:12px} .btn-ghost-nav{padding:5px 8px;font-size:12px;border-color:transparent} .btn-green-nav{padding:5px 10px;font-size:12px} .flash{margin:8px 14px;font-size:13px} .footer-inner{grid-template-columns:1fr;gap:0} .footer-brand{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08)} .footer-cols-row{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:16px}} @media(max-width:480px){.footer-inner{grid-template-columns:1fr} .footer-cols-row{grid-template-columns:1fr 1fr!important} .footer-bottom{flex-direction:column;gap:8px;text-align:center}} @keyframes hpTrendingPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}70%{box-shadow:0 0 0 10px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}} .hp-trending-slide.active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative} .hp-trending-dot-btn.active{background:var(--green);transform:scale(1.4)} @keyframes hpPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}} .hp-qr-slide.active{display:block} @keyframes hpQrIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .hp-qr-dot-btn.on{background:var(--green2);width:18px;border-radius:3px} .pp-toast.show{transform:translateX(-50%) translateY(0);opacity:1} .mr-tab.on{color:var(--green);border-bottom-color:var(--green);font-weight:700} .mr-tab.on .mr-tab-count{background:var(--green);color:#fff} .mr-qa-input.focus{border-color:var(--green);background:var(--surface)} .mr-yr.on{background:var(--green);color:#fff;border-color:var(--green)} .mr-bar-n.on{color:var(--green);font-weight:800;font-size:12px} .mr-bar.filled{background:linear-gradient(180deg,var(--green2),var(--green));opacity:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .mr-bar.current{outline:2px solid var(--green-ring);outline-offset:2px;box-shadow:0 0 0 4px rgba(45,106,53,.1),inset 0 1px 0 rgba(255,255,255,.3)} .mr-bar-m.on{color:var(--green);font-weight:700} .cv2-space-pill.on{background:var(--green);color:#fff;border-color:var(--green);font-weight:700} .cv2-space-pill.on .cv2-sp-dot{display:none} .cv2-compose:focus-within,.cv2-compose.editing{border-color:var(--green);box-shadow:0 0 0 4px var(--green-tint),var(--e1)} .cv2-compose.editing .cv2-compose-toolbar{border-top:none;padding:10px 20px 4px} .cv2-compose.editing .cv2-compose-footer{padding-top:14px} .cv2-fp.on{background:var(--text);color:#fff;border-color:var(--text)} .cv2-more-menu.open{display:block} .cv2-act.on{color:var(--green);background:var(--green-tint)} .cv2-act.on.bookmark{color:var(--amber);background:var(--amber-tint)} .cv2-reply-like.on{color:var(--green)} .cv2-pg.on{background:var(--green);color:#fff;border-color:var(--green)} .cv2-reply-accept.on{background:var(--green);color:#fff;border-color:var(--green)} .bd-sticky.on{transform:translateY(0)} .bd-sheet-backdrop.on{opacity:1;pointer-events:auto} .bd-sheet.on{transform:translateY(0)} .bd-sheet-item.on{background:var(--green);border-color:var(--green);color:#fff} .bd-sheet-item.on .bd-sheet-lbl{color:#fff} .bd-celebrate-backdrop.on{opacity:1;pointer-events:auto} .bd-celebrate.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .bd-celebrate.on .bd-celebrate-confetti span{opacity:1} @keyframes bd-fall{ 0%{transform:translateY(0) rotate(0);opacity:0} 10%{opacity:1} 100%{transform:translateY(420px) rotate(360deg);opacity:0} } .bd-celebrate-actions .btn{flex:1;min-width:140px} @media(max-width:480px){.bd-celebrate-actions .btn{width:100%}} @keyframes obFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(max-width:900px){:root{--nr-tabh:60px} .nr-tab.on{color:var(--green);font-weight:700} .nr-tab.on svg{stroke-width:2} body{padding-bottom:calc(var(--nr-tabh) + 4px + env(safe-area-inset-bottom,0px))} @media(display-mode:standalone){.mnav{padding-top:env(safe-area-inset-top,0px)}}} [hidden]{display:none!important} .nr-install{border-top:1px solid rgba(255,255,255,.08);margin-top:8px; padding:16px 0 4px;text-align:center} .nr-install-btn{display:inline-flex;align-items:center;gap:8px; font-family:var(--font-b);font-size:13px;font-weight:600;color:#0A1A0C; background:var(--green2);border:0;border-radius:8px;padding:9px 18px; cursor:pointer;transition:filter .15s} .nr-install-btn:hover{filter:brightness(1.08)} .nr-install-btn:focus-visible{outline:2px solid var(--green2);outline-offset:3px} .nr-install-help{font-size:12.5px;color:rgba(255,255,255,.45); max-width:52ch;margin:0 auto;line-height:1.7} .nr-install-help b{display:block;color:rgba(255,255,255,.7); font-family:var(--font-d);font-size:14px;font-weight:600;margin-bottom:5px} .nr-install-help p b{display:inline;font-family:var(--font-b);font-size:inherit; color:rgba(255,255,255,.8)} /* 1.12: beta label and feedback strip, footer disclaimer */ .beta-tag{font-family:var(--font-m);font-size:9.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--green);background:var(--green-tint);border:1px solid var(--green-ring);border-radius:999px;padding:2px 7px;line-height:1.3;align-self:center} .beta-strip{display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 44px 7px 16px;position:relative;background:var(--green);color:#fff;font-size:12.5px;line-height:1.45;text-align:center} .beta-strip a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px} .beta-strip button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer} .beta-strip button:hover,.beta-strip button:focus-visible{background:rgba(255,255,255,.16)} .footer-disc{max-width:620px;text-align:right;line-height:1.6;font-family:var(--font-b);font-size:11.5px;letter-spacing:0} @media(max-width:480px){.footer-disc{text-align:center}} /* 1.14: newsletter archive */ .nl-cta{margin:var(--s5) 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--rad);background:var(--surface);font-size:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap} .nl-cta .hm-btn{margin-left:auto} .nl-list{list-style:none;margin:var(--s5) 0 0;padding:0} .nl-list li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px} .nl-list a{color:var(--text);font-size:17px} .nl-list small{color:var(--text3);font-size:12.5px} .nl-list span{color:var(--text2);font-size:14px} /* 1.14.2: maintenance page */ .mt-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 16px;background:radial-gradient(ellipse at 50% 0%,var(--green-tint),transparent 60%),var(--bg)} .mt-preview{max-width:560px;width:100%;font-size:13px;padding:10px 14px;border-radius:10px;background:var(--amber-tint);color:var(--text2)} .mt-brand img{height:40px;max-width:200px;object-fit:contain;display:block} .mt-brand .logo-word{font-size:24px} .mt-card{max-width:560px;width:100%;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:36px 32px 30px;box-shadow:0 18px 50px -24px rgba(18,25,15,.25)} .mt-art{width:170px;height:auto;display:block;margin:0 auto 18px} .mt-sea{fill:var(--green-tint)} .mt-hull{fill:var(--green)} .mt-box{stroke:var(--surface);stroke-width:1.5} .mt-b1{fill:var(--green2,var(--green))}.mt-b2{fill:var(--amber)}.mt-b3{fill:var(--rust)} .mt-b3{animation:mt-lift 3.2s ease-in-out infinite;transform-origin:center} .mt-crane,.mt-hook{fill:none;stroke:var(--text3);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .mt-gear circle{fill:none;stroke:var(--green);stroke-width:4;stroke-dasharray:4 3} .mt-gear .mt-gear-hole{stroke-width:2;stroke-dasharray:none} .mt-gear{transform-origin:138px 34px;animation:mt-spin 6s linear infinite} .mt-eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:6px} .mt-card .v4-h1{margin:0 0 12px} .mt-msg{font-size:16px;line-height:1.6;color:var(--text3);max-width:44ch;margin:0 auto} .mt-when{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 14px;border-radius:999px;background:var(--green-tint);color:var(--text2);font-size:14px} .mt-when svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;flex-shrink:0} .mt-bar{height:4px;border-radius:999px;background:var(--bg2);overflow:hidden;margin:24px auto 14px;max-width:280px} .mt-bar span{display:block;height:100%;width:35%;border-radius:999px;background:var(--green);animation:mt-slide 1.8s ease-in-out infinite} .mt-small{font-size:13px;color:var(--text4);max-width:46ch;margin:0 auto} .mt-foot{font-size:12.5px;color:var(--text4)} .mt-foot a{color:var(--text3);text-decoration:underline} @keyframes mt-spin{to{transform:rotate(360deg)}} @keyframes mt-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes mt-slide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}} @media (prefers-reduced-motion:reduce){.mt-gear,.mt-b3,.mt-bar span{animation:none}.mt-bar span{width:100%;opacity:.35}} @media (max-width:520px){.mt-card{padding:28px 20px 24px}.mt-art{width:140px}} /* ══════════════════════════════════════════════════════════════════════════ V4 TOKENS Colour tokens are inherited from the v3 :root block, which is already well-disciplined (1758 var() uses against 195 raw hexes). Nothing here redefines a colour. What was missing was type, space, and rhythm. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* Type scale. 1.25 ratio, rounded to whole pixels. */ /* v4.1.0 — five steps that are actually distinguishable, not nine that are not. The old --t-sm 13 against --t-xs 12 meant a card title and its author line were the same thing to a reader; the gap between adjacent steps is now at least 2px below 20 and proportional above it. */ --t-2xs:10px; /* tag caps only, never body text */ --t-xs:12px; /* meta, timestamps, tags */ --t-sm:14px; /* secondary body, captions */ --t-base:16px; /* body */ --t-md:16px; /* MINIMUM for any input. See note below */ --t-lg:18px; /* the thought / quote voice */ --t-xl:22px; /* panel headings */ --t-2xl:27px; /* page title, mobile */ --t-3xl:34px; /* page title, desktop */ --t-4xl:42px; /* hero only, used sparingly */ /* v4.1.0 — two weights, used deliberately. Almost everything was 500, which reads as neither bold nor regular. A name or a title is 600; everything else is 400 and gets its emphasis from size and colour instead. */ --w-name:600; --w-body:400; /* v4.1.2 — display type needs LESS weight than UI type to read as equally emphatic. That is optical sizing: at 34px a stroke that reads as confident is heavy at 14px, and the reverse. 4.1.1 put page titles on --w-name (600) to fix them reading thin at 400, and overshot — on a phone the hero came out as a slab. Headings get their own token; card titles and reader names keep 600, because small text does need it. */ --w-display:300; /* v4.6.4 — the weight for the NAME of something: a book title, an author. --w-display stays light because the only other thing wearing .v4-h1 is the homepage hero, which is a sentence rather than a name. Both live inside the loaded 300-900 range, so both render as asked. */ --w-title:600; /* Line heights, paired to the scale rather than set ad hoc. */ --lh-tight:1.2; --lh-snug:1.45; --lh-body:1.6; /* Space scale. Every margin, padding and gap picks from these eight. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; /* Radius */ --rad-sm:6px; --rad:10px; --rad-lg:14px; --rad-full:999px; /* Measure. Prose never runs wider than this. */ --measure:62ch; /* Avatar sizes, so face stacks line up across pages. */ --face-sm:26px; --face:31px; --face-lg:44px; --face-xl:96px; /* v4.0.0-beta.4 — stars. --amber (#7A5C1E) is a dark olive-brown that reads as mud at star size. It is consumed by v3 award chips and .btn-amber, so it is left alone; this token is used only by .v4 .v4-star-on. */ --star:#D9A32B; --star-off:rgba(217,163,43,.18); } /* v4.6.0 — the CSS half of the colour-scheme declaration. The meta tag tells the browser before the stylesheet arrives; this tells form controls, scrollbars and the rest of the UA chrome to stay light too. */ :root{color-scheme:light} /* iOS Safari magnifies the viewport when a focused input is under 16px and never restores it. That shipped as v3.38.1. It is now structural: any v4 control inherits the floor and cannot opt out by accident. */ .v4 input,.v4 textarea,.v4 select{font-size:var(--t-md)} /* ══════════════════════════════════════════════════════════════════════════ V4 SCOPE + LAYOUT PRIMITIVES Everything is namespaced under .v4 so a v4 page and a v3 page can coexist on the same site during the migration. ══════════════════════════════════════════════════════════════════════════ */ .v4{font-family:var(--font-b);font-size:var(--t-base);line-height:var(--lh-body);color:var(--text)} /* v4.0.0-beta.6 — 1080, matching body.v4skin .wrap. 900 was chosen for reading and it is still right for reading, but it was never the constraint on prose: .v4-prose caps text at --measure (62ch, about 465px) independently, so text lines do not get longer here. What 900 was actually capping was everything that is not prose — the browse grid at six covers, the author directory at two columns, book details at two. The other half of the reason is the seam. v4 pages were 900 and the 22 v3 pages under the skin were 1080, so clicking from the Commons to the Quote Wall stepped the content 180px wider. One number for the whole site. Not v3's 1200: five cards across a main column reads as a directory, and narrowing that was one of the deliberate v4 changes. */ .v4 .v4-wrap{max-width:1080px;margin:0 auto;padding:0 var(--s5)} .v4 .v4-prose{max-width:var(--measure)} /* The two-column shell. minmax(0,...) on both tracks is not optional: grid items default to min-width:auto, which is what blew the main column out in v3.38.2 when a carousel wider than its track refused to shrink. */ .v4 .v4-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s6);margin-top:var(--s5)} .v4 .v4-stack>*+*{margin-top:var(--s5)} .v4 .v4-stack-tight>*+*{margin-top:var(--s3)} /* Any flex row that contains text. min-width:0 on the growing child is the other half of the same bug class. Baked in so call sites cannot forget. */ .v4 .v4-row{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--line)} .v4 .v4-row:last-child{border-bottom:none} .v4 .v4-row>.v4-grow{flex:1;min-width:0} /* ── type ─────────────────────────────────────────────────────────────────── */ /* v4.1.1 — back to weight. 4.1.0 dropped these to 400 on the theory that a display face at 34px does not also need weight. It does: Fraunces is fine-stroked and at 400 a book title read thin rather than confident. */ .v4 .v4-h1{font-family:var(--font-d);font-weight:var(--w-display);font-size:var(--t-3xl);line-height:var(--lh-tight);letter-spacing:-.015em;margin:0 0 var(--s1)} /* v4.6.4 — .is-name marks a heading that names a thing rather than saying something. Book pages and author pages carry it; the homepage hero does not. */ .v4 .v4-h1.is-name{font-weight:var(--w-title);letter-spacing:-.02em} .v4 .v4-h2{font-family:var(--font-d);font-weight:var(--w-display);font-size:var(--t-xl);line-height:var(--lh-snug);letter-spacing:-.01em;margin:0 0 var(--s3)} /* v4.1.0 — an eyebrow is a label, not content. It was --t-xs at weight 700, the same size as the meta text under it and heavier than most titles, so it competed with the section it was introducing. Smaller, lighter, wider. */ /* v4.1.1 — 600, not 500. Dropping an eyebrow from 700 to 500 took it one step too far: ABOUT THE BOOK and BOOK DETAILS receded until they stopped working as section markers. The smaller size and wider tracking were right; the weight was not. */ .v4 .v4-eyebrow{font-family:var(--font-m);font-weight:600;font-size:var(--t-2xs); letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin:0 0 var(--s4)} /* v4.1.0 — a panel's own label sits below a page section's. Every heading on the page carried identical weight, so the giveaway and "Nobody can find a copy" felt equally urgent. */ .v4 .v4-panel > .v4-eyebrow:first-child{margin-bottom:var(--s3);color:var(--text4)} /* v4.1.0 — the reading voice. A thought is somebody speaking and should sound like it: larger than the meta around it, with room to breathe. */ /* Italic now survives only on the presence lede, which is always one sentence. */ .v4 .v4-thought q{line-height:var(--lh-body)} .v4 .v4-meta{font-family:var(--font-m);font-size:var(--t-xs);color:var(--text4);letter-spacing:.02em} .v4 .v4-sub{color:var(--text3);font-size:var(--t-sm);line-height:var(--lh-snug)} /* ── buttons ──────────────────────────────────────────────────────────────── */ .v4 .v4-btn{display:inline-block;background:var(--green);color:#fff;font-family:var(--font-b);font-size:var(--t-base);font-weight:500;padding:var(--s3) var(--s4);border-radius:var(--rad);border:none;cursor:pointer;text-align:center;line-height:1.3} .v4 .v4-btn:hover{background:var(--green-h)} /* beta.8 — a secondary action. The status pills are what a reader is doing with the book; a follow is about the author, and at equal weight it read as the loudest control on the page. */ .v4 .v4-btn.is-sm{font-size:var(--t-sm);padding:var(--s2) var(--s3)} .v4 .v4-btn.is-ghost{background:transparent;color:var(--green-h);border:1.5px solid var(--line2)} .v4 .v4-btn.is-ghost:hover{border-color:var(--green);background:var(--green-tint)} .v4 .v4-btn.is-wide{display:block;width:100%} .v4 .v4-tag{display:inline-block;font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.05em;text-transform:uppercase;padding:var(--s1) var(--s2);border-radius:var(--rad-sm);background:var(--bg2);color:var(--text3)} .v4 .v4-tag.is-now{background:var(--green-tint);color:var(--green-h)} .v4 .v4-tag.is-ask{background:var(--rust-tint);color:var(--rust)} /* ── surfaces ─────────────────────────────────────────────────────────────── */ .v4 .v4-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);padding:var(--s4)} .v4 .v4-panel{background:var(--surface2);border:1px solid var(--line);border-radius:var(--rad-lg);padding:var(--s4)} /* v4.10.2 — the signed-out compose prompt. Shaped like .v4-compose so the page does not rearrange when somebody signs in: the ghost is replaced by the real box in the same place at about the same height. It is an , not a form, and the "Sign in" pill inside it is a — nesting a real button inside a link gives assistive tech two controls where there is one. The whole row is the link; the pill is how it looks. */ .v4 .v4-compose-ghost{display:flex;align-items:center;gap:var(--s3); text-decoration:none;background:var(--surface);border:1px solid var(--line); border-radius:var(--rad-lg);padding:var(--s3);margin:0 0 var(--s4)} .v4 .v4-compose-ghost:hover{border-color:var(--green-ring)} .v4 .v4-compose-ghost:focus-visible{outline:2px solid var(--green);outline-offset:2px} .v4 .v4-compose-ghost-av{width:38px;height:38px;border-radius:50%;flex:none; background:var(--bg2)} .v4 .v4-compose-ghost-t{flex:1;min-width:0;font-family:var(--font-b); font-size:var(--t-base);color:var(--text4);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* v4.10.3 — the book page needs a rating alongside the line, so its ghost carries five off stars. A GRID, not the base rule's flex row. On a 342px phone row the placeholder, the stars and the pill do not all fit, and flex resolved that by shrinking the placeholder to "One line about th..." -- the one string that carries the message. Here the avatar and the pill each span both rows and the stars sit on their own row directly under the placeholder they qualify, so nothing is truncated and the height is the same 64px the Commons ghost has. Wrapping the stars and pill into a flex group was tried first: on a phone it pushed them to a second line hard right, under nothing, and the two halves read as separate objects. */ .v4 .v4-compose-ghost.is-rate{display:grid;grid-template-columns:auto 1fr auto; align-items:center;column-gap:var(--s3);row-gap:5px} .v4 .v4-compose-ghost.is-rate .v4-compose-ghost-av{grid-column:1;grid-row:1/3} .v4 .v4-compose-ghost.is-rate .v4-compose-ghost-t{grid-column:2;grid-row:1} .v4 .v4-compose-ghost.is-rate .v4-ghoststars{grid-column:2;grid-row:2} .v4 .v4-compose-ghost.is-rate .v4-btn{grid-column:3;grid-row:1/3} .v4 .v4-ghoststars{display:block;width:66px;height:13px;fill:var(--line2)} /* v4.10.4 — the website link on a public profile. v3 rendered one; the v4 port dropped it, so the field was collected and never read back for four releases. Mono because it is a machine address, not prose. */ .v4 .v4-weblink{display:inline-block;margin-top:var(--s2);font-family:var(--font-m); font-size:var(--t-xs);color:var(--green);text-decoration:none; border-bottom:1px solid var(--green-ring);padding-bottom:1px} .v4 .v4-weblink:hover{border-bottom-color:var(--green)} /* v4.10.4 — the reading-from question on onboarding step 1. */ .v4 .v4ob-place{margin:var(--s5) 0 0;max-width:340px} .v4 .v4ob-place select{width:100%;margin-top:var(--s2)} .v4 .v4-empty{border:1px dashed var(--line2);border-radius:var(--rad-lg);padding:var(--s5);text-align:center} /* v4.1.0 — italic is reserved for a person's own words (a thought) and the editorial lede (the presence line). An empty state is the site talking to you about nothing being there; in italic it read as wistful. */ .v4 .v4-empty p{margin:0 0 var(--s3);font-family:var(--font-d);font-size:var(--t-lg);color:var(--text3)} /* ══════════════════════════════════════════════════════════════════════════ THE PRESENCE LINE — the signature element of v4 Named people, not counts. At 121 members a count of 18 reads as small; three named people reading right now reads as a room with people in it. ══════════════════════════════════════════════════════════════════════════ */ .v4 .v4-presence{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:var(--s4) 0} .v4 .v4-presence p{margin:0;font-family:var(--font-d);font-size:var(--t-lg);line-height:var(--lh-snug);color:var(--text2);flex:1;min-width:220px} .v4 .v4-presence p em{font-style:italic} .v4 .v4-faces{display:flex;flex-shrink:0} .v4 .v4-face{width:var(--face);height:var(--face);border-radius:var(--rad-full);background:var(--bg2);border:2px solid var(--bg);margin-left:-9px;display:flex;align-items:center;justify-content:center;font-family:var(--font-b);font-size:var(--t-xs);font-weight:700;color:var(--text3);flex-shrink:0;overflow:hidden} .v4 .v4-face:first-child{margin-left:0} .v4 .v4-face.is-live{background:var(--green-tint);color:var(--green-h);border-color:var(--green)} .v4 .v4-face.is-sm{width:var(--face-sm);height:var(--face-sm);font-size:var(--t-2xs)} .v4 .v4-face.is-lg{width:var(--face-lg);height:var(--face-lg);font-size:var(--t-sm)} .v4 .v4-face.is-xl{width:var(--face-xl);height:var(--face-xl);font-family:var(--font-d);font-size:var(--t-2xl);font-weight:400;margin-left:0} /* ══════════════════════════════════════════════════════════════════════════ THE THOUGHT — the atomic unit of the community One reader, one line, in the display face. Everything else on a book page is arrangement around these. ══════════════════════════════════════════════════════════════════════════ */ .v4 .v4-thought{padding:var(--s4) 0;border-bottom:1px solid var(--line)} /* 4.5.2 — in the Commons stream a post is three siblings: the thought, its replies, and the reply control. The rule above draws the separator under the FIRST of them, so Reply appeared below the line and read as the opening of the next post. The line belongs to the whole post, so it moves to a wrapper and comes off the thought inside one. */ .v4 .v4-post{border-bottom:1px solid var(--line);padding-bottom:var(--s3)} .v4 .v4-post>.v4-thought{border-bottom:none} /* 4.5.3 — a reply belongs to the post above it, so it should sit closer to it than to the next post. Three paddings were stacking to about 36px: the thought's own bottom padding, the reply block's top margin, and the first nested thought's top padding. Pulled in only INSIDE a post — the thought keeps its normal rhythm everywhere else. */ .v4 .v4-post>.v4-thought{padding-bottom:var(--s1)} .v4 .v4-post>.v4-replies>.v4-thought:first-child{padding-top:var(--s1)} /* 4.5.4 — the reply BOX, which 4.5.3 missed. .v4-replies is the nested comment column and only exists once somebody has answered;
is the Reply control itself and is on every post. Tightening only the first left the common case — a post nobody has replied to yet — carrying the box's own --s2 margin on top of the thought's padding. The margin BELOW it stays: the control should sit against the post it belongs to and away from the rule that closes it. */ /* 4.5.12 — the rules above were written when a post was three siblings and the Reply control was the last of them. It now sits inside .v4-acts, so .v4-post>.v4-reply matches nothing and the margin-bottom it carried is replaced by padding on .v4-post itself. The replies column now follows the acts row rather than the thought, so it needs the wider gap back: pulling it to --s1 was right when it sat under a sentence and wrong under a row of controls. */ .v4 .v4-post>.v4-replies{margin-top:var(--s3)} .v4 .v4-thought:last-child{border-bottom:none} .v4 .v4-thought-who{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap} /* v4.1.0 — the name carries. On a site whose premise is who else here has read this, the reader was quieter than their own sentence. */ .v4 .v4-thought-who b{font-size:var(--t-sm);font-weight:var(--w-name);letter-spacing:-.005em} /* v4.3.0 — the poll. It sits directly under the dark week bar and belongs to it, so it takes the same width and a matching top edge. */ .v4 .v4-poll{background:var(--surface);border:1px solid var(--line); border-top:0;border-radius:0 0 var(--rad-lg) var(--rad-lg); padding:var(--s4);margin-top:calc(var(--rad-lg) * -1);padding-top:var(--s5)} .v4 .v4-poll-res{position:relative;padding:var(--s3);margin-bottom:var(--s2); border-radius:var(--rad-sm);overflow:hidden;background:var(--bg)} .v4 .v4-poll-res.is-mine{box-shadow:inset 0 0 0 1.5px var(--green)} /* The bar is behind the text, not beside it: a row that is both the label and the measurement reads faster than a label with a chart next to it. */ .v4 .v4-poll-bar{position:absolute;inset:0 auto 0 0;background:var(--green-tint); transition:width .3s ease} .v4 .v4-poll-row{position:relative;display:flex;align-items:baseline; justify-content:space-between;gap:var(--s3)} .v4 .v4-poll-label{font-size:var(--t-sm);font-weight:var(--w-name);color:var(--text)} .v4 .v4-poll-n{font-family:var(--font-m);font-size:var(--t-sm);color:var(--green); font-weight:600;flex-shrink:0} .v4 .v4-poll-who{position:relative;display:flex;align-items:center;gap:var(--s1); margin-top:var(--s2)} .v4 .v4-poll-who .v4-face{margin-left:0;border:2px solid var(--bg)} .v4 .v4-poll-who .v4-face+.v4-face{margin-left:-8px} .v4 .v4-poll-form{margin-top:var(--s3)} .v4 .v4-poll-opt{display:flex;align-items:center;gap:var(--s3);padding:var(--s3); margin-bottom:var(--s2);border:1.5px solid var(--line2);border-radius:var(--rad-sm); cursor:pointer;font-size:var(--t-sm);background:var(--bg)} .v4 .v4-poll-opt:hover{border-color:var(--green)} .v4 .v4-poll-opt.is-mine{border-color:var(--green);background:var(--green-tint)} .v4 .v4-poll-opt input{flex-shrink:0;accent-color:var(--green);width:18px;height:18px} .v4 .v4-poll-form textarea{width:100%;box-sizing:border-box;margin-top:var(--s2); border:1px solid var(--line2);border-radius:var(--rad-sm);background:var(--bg); padding:var(--s2) var(--s3);font-family:var(--font-b);font-size:var(--t-md); color:var(--text);resize:vertical;line-height:var(--lh-snug)} .v4 .v4-poll-form textarea:focus{outline:none;border-color:var(--green); box-shadow:0 0 0 3px var(--green-tint)} .v4 .v4-poll-form button{margin-top:var(--s2)} /* v4.2.0 — replies under a thought. Indented and quieter than the thought itself: a reply is a response to something, and should read as subordinate to the line it answers rather than as another verdict. */ .v4 .v4-replies{margin-top:var(--s3);padding-left:var(--s4); border-left:2px solid var(--line)} /* 4.5.1 — scoped to div. .v4-reply names TWO different elements: the comment row here, and the
that ui_reply_box wraps its form in. Unscoped, display:flex turned that
into a flex container and stood the summary beside the form, squeezing the box to content width — the reason the Commons reply area and the book-page thread boxes have never been full width. The
rules further down already target it on their own. */ .v4 div.v4-reply{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0} .v4 div.v4-reply+div.v4-reply{border-top:1px solid var(--line)} .v4 div.v4-reply .v4-face{margin-left:0;border:none;flex-shrink:0} .v4 .v4-reply-who{font-size:var(--t-sm);font-weight:var(--w-name);color:var(--text)} .v4 div.v4-reply p{margin:var(--s1) 0 0;font-size:var(--t-sm);line-height:var(--lh-snug); color:var(--text2);overflow-wrap:anywhere} .v4 .v4-reply-cue{display:inline-block;margin-top:var(--s2);font-family:var(--font-m); font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase; color:var(--green);text-decoration:none;cursor:pointer} .v4 .v4-reply-cue:hover{text-decoration:underline} .v4 .v4-replyform>summary{list-style:none;display:block} .v4 .v4-replyform>summary::-webkit-details-marker{display:none} .v4 .v4-replyform[open]>summary{display:none} .v4 .v4-replyform textarea{width:100%;box-sizing:border-box;margin-top:var(--s2); border:1px solid var(--line2);border-radius:var(--rad-sm);background:var(--bg); padding:var(--s2) var(--s3);font-family:var(--font-b);font-size:var(--t-md); color:var(--text);resize:vertical;line-height:var(--lh-snug)} .v4 .v4-replyform textarea:focus{outline:none;border-color:var(--green); box-shadow:0 0 0 3px var(--green-tint)} .v4 .v4-replyform button{margin-top:var(--s2)} /* v4.1.1 — plain, not italic. 4.1.0 made italic mean "a person's own words", which is right for one line and wrong for six: a full review set in italic at 18px is tiring, and reviews here run long. The voice is carried by the display face, the size and the colour instead. */ /* v4.6.3 — stated rather than inherited. This text had been rendering at 300 because Fraunces 400 upright was never loaded; once it was, every review and every Commons post got heavier overnight. 300 is the weight the page was designed against, so 300 is what it asks for now. */ .v4 .v4-thought q{font-weight:var(--w-display);display:block;quotes:none;font-family:var(--font-d);font-style:normal;font-size:var(--t-lg);line-height:var(--lh-snug);color:var(--text);overflow-wrap:anywhere} .v4 .v4-thought.is-plain q{font-family:var(--font-b);font-style:normal;font-size:var(--t-base);line-height:var(--lh-body)} .v4 .v4-thought.is-plain q em{font-style:normal;font-weight:var(--w-name);color:var(--text)} .v4 .v4-thought.is-author{background:var(--green-tint);border-radius:var(--rad);border-bottom:none;padding:var(--s4)} .v4 .v4-thought-act{margin-top:var(--s2);display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-sm);color:var(--text3)} /* ══════════════════════════════════════════════════════════════════════════ BOOK CARD — one component, three variants. v3 calls book_card() once per page and then renders covers inline 29 more times across eight files. Every v4 cover goes through here. ══════════════════════════════════════════════════════════════════════════ */ .v4 .v4-cover{display:block;width:100%;aspect-ratio:2/3;border-radius:var(--rad-sm);background:linear-gradient(160deg,var(--green),var(--green-h));box-shadow:var(--e1);overflow:hidden;position:relative} .v4 .v4-cover img{width:100%;height:100%;object-fit:cover;display:block} .v4 .v4-cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s3);color:var(--bg2);font-family:var(--font-d);font-size:var(--t-sm);line-height:var(--lh-tight)} /* The card wrapper itself. Carried no rule at all until alpha.19 — the grid gap positioned the cards and nothing needed it, but a class with no rule is a class nobody can safely change. min-width:0 is the load-bearing part: without it a long unbroken title makes the card refuse to shrink below its content and pushes the whole grid track wide. */ .v4 .v4-bc{min-width:0} /* beta.9 — the guest hero. Text left, three covers right. The covers are the first thing that proves the claim beside them, so they get real size; below 900 they drop away entirely rather than shrinking to stamps, because on a phone the search bar should be reachable without scrolling past decoration. */ .v4 .v4-hero{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:var(--s6);align-items:center} .v4 .v4-hero-say{min-width:0} /* At 42px even 500 reads heavy; the hero carries its emphasis by size alone. */ .v4 .v4-hero-say .v4-h1{font-weight:450} .v4 .v4-hero-fan{display:flex;align-items:flex-start;flex-shrink:0; padding-right:var(--s4)} .v4 .v4-hero-fan-i{display:block;width:112px;flex-shrink:0;text-decoration:none; transition:transform .18s ease} .v4 .v4-hero-fan-i:nth-child(1){transform:rotate(-6deg)} .v4 .v4-hero-fan-i:nth-child(2){margin-left:-22px;z-index:2;transform:translateY(-10px)} .v4 .v4-hero-fan-i:nth-child(3){margin-left:-22px;transform:rotate(6deg)} .v4 .v4-hero-fan-i:hover{transform:translateY(-14px) rotate(0)} .v4 .v4-hero-fan .v4-cover{box-shadow:var(--e2,0 8px 24px rgba(0,0,0,.16))} /* beta.9 — who someone follows, as a face and a name. Not a face alone: at this scale several members share a first name and some have no photo, so a bare avatar row is a guessing game. */ /* v4.0.5 — the author spotlight portrait. A round 44px face is how you show somebody in a list; this panel introduces a writer at length and was showing them smaller than the covers below it. */ .v4 .v4-spot{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s5); align-items:start} .v4 .v4-spot-face{display:block;aspect-ratio:3/4;overflow:hidden; border-radius:var(--rad-sm);background:var(--surface2)} .v4 .v4-spot-face img{width:100%;height:100%;object-fit:cover;display:block} .v4 .v4-spot-initials{display:flex;width:100%;height:100%;align-items:center; justify-content:center;font-family:var(--font-m);font-size:var(--t-2xl); color:var(--text4)} /* v4.0.5 — the featured strip. Scroll-snap, not a carousel: v4 has shipped almost no JavaScript and this is the last place worth starting. Swipes on a phone, scrolls with a trackpad, and degrades to a plain row where scroll-snap is unsupported. */ .v4 .v4-bstrip{display:grid;grid-auto-flow:column;grid-auto-columns:132px; gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:var(--s3);scrollbar-width:thin;overscroll-behavior-x:contain} .v4 .v4-bstrip > *{scroll-snap-align:start} .v4 .v4-bstrip::-webkit-scrollbar{height:6px} .v4 .v4-bstrip::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px} /* v4.0.6 — the strip says it scrolls. A peeking half-card was the only cue and a mouse user has no gesture that would discover it. The fade is decorative and pointer-events:none so it never eats a click on the card beneath it. */ .v4 .v4-striproll{position:relative} .v4 .v4-striproll::after{content:'';position:absolute;top:0;right:0;bottom:var(--s3); width:56px;pointer-events:none;opacity:.9; background:linear-gradient(90deg,transparent,var(--bg))} .v4 .v4-striproll.is-end::after{opacity:0} .v4 .v4-strip-nav{display:flex;gap:var(--s2);margin-left:auto} .v4 .v4-strip-head{display:flex;align-items:center;gap:var(--s3)} .v4 .v4-strip-btn{width:30px;height:30px;flex-shrink:0;display:none; align-items:center;justify-content:center;padding:0;border-radius:var(--rad-full); border:1.5px solid var(--line2);background:var(--bg);color:var(--text2); font-size:var(--t-sm);line-height:1;cursor:pointer} .v4 .v4-strip-btn:hover:not(:disabled){border-color:var(--green);color:var(--green)} .v4 .v4-strip-btn:disabled{opacity:.3;cursor:default} /* Shown only where a pointer exists. On a phone the gesture IS the affordance and two buttons would be clutter. */ @media (hover:hover) and (pointer:fine){ .v4 .v4-strip-btn{display:inline-flex} } /* The two grid rows show 8; a phone shows 6. Done in CSS rather than by querying twice, so the server never has to guess a viewport it cannot see. */ .v4 .v4-brow{grid-template-columns:repeat(4,minmax(0,1fr))} /* Collections: four across, and a way through to the rest. */ .v4 .v4-colls{grid-template-columns:repeat(4,minmax(0,1fr))} /* v4.6.9 — the giveaway index, two across. .v4-give was drawn for the home page's 385px rail. Stacked full-width on /giveaway each card ran the whole measure, which left a full-width button under two short lines and a mostly empty row. Two columns give the card about the width it was designed for. Two rather than three or four: the prize is a real sentence, and there are rarely more than a few running. align-items:start so a card with a longer prize line does not stretch the one beside it into matching whitespace. */ .v4 .v4-gives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5);align-items:start} .v4 .v4-morelink{font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.08em; text-transform:uppercase;color:var(--green);text-decoration:none} .v4 .v4-morelink:hover{text-decoration:underline} /* v4.0.4 — the author bio disclosure. The summary carries the opening while closed and is replaced by the full text when open, so no state of this element can ever render as an empty "Show more". */ .v4 .v4-bio{display:block} .v4 .v4-bio>summary{cursor:pointer;list-style:none;display:block} .v4 .v4-bio>summary::-webkit-details-marker{display:none} .v4 .v4-bio[open]>summary{display:none} .v4 .v4-bio-cue{display:inline-block;margin-top:var(--s2);font-size:var(--t-sm); color:var(--green-h)} .v4 .v4-bio>summary:hover .v4-bio-cue{text-decoration:underline} /* Where else a writer is. */ .v4 .v4-alinks{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s3)} .v4 .v4-alinks a{font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.06em; text-transform:uppercase;color:var(--text3);text-decoration:none; border-bottom:1px solid var(--line2)} .v4 .v4-alinks a:hover{color:var(--green);border-bottom-color:var(--green)} /* Titles and bylines are links now; they inherit rather than turning green so a grid of cards does not read as a wall of hyperlinks. */ .v4 .v4-bc-title a,.v4 .v4-bc-author a{color:inherit;text-decoration:none} .v4 .v4-bc-title a:hover{color:var(--green)} .v4 .v4-bc-author a:hover{color:var(--green);text-decoration:underline} /* The pick of the month, with its cover. */ .v4 .v4-pick{display:grid;grid-template-columns:82px minmax(0,1fr);gap:var(--s4); align-items:start} .v4 .v4-pick-cover{display:block} .v4 .v4-pick-say{min-width:0} .v4 .v4-pick-say .v4-h2 a{color:inherit;text-decoration:none} .v4 .v4-pick-say .v4-h2 a:hover{color:var(--green)} /* Curated collections: four covers fanned, a name, a count. */ /* v4.0.6 — the column count moved to the single rule above. This one used to repeat grid-template-columns and, being LATER in the file at equal specificity, silently won: minmax(210px) in a 615px main column resolves to two columns, which is what the laptop was showing. Layout properties only from here on. */ .v4 .v4-colls{display:grid;gap:var(--s5)} .v4 .v4-coll{display:block;text-decoration:none;color:inherit} .v4 .v4-coll-fan{display:flex;margin-bottom:var(--s3)} /* v4.0.6 — sized to the track. Four columns of a 615px main column give 136px each; the old fan measured 52 + 38x3 = 166px and would have overflowed even once the column count was fixed. 44 - 16 x3 = 128px fits with room. */ .v4 .v4-coll-fan .v4-cover{width:44px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.12)} .v4 .v4-coll-fan .v4-cover+.v4-cover{margin-left:-16px} .v4 .v4-coll-name{display:block;font-family:var(--font-d);font-size:var(--t-lg); font-weight:400;line-height:var(--lh-tight);margin-bottom:2px} .v4 .v4-coll:hover .v4-coll-name{color:var(--green)} /* v4.8.1 — the same collection card, laid out for the 385px rail: a row instead of a stack. Scoped under .v4-coll-rail on purpose. /lists renders .v4-coll three times over and must not move, so every declaration here is one level deeper than the base rule (0,3,0 against 0,2,0) and cannot reach it. Four covers at 34 with a 13 overlap measure 34 + 21x3 = 97px, which leaves the name a comfortable ~230px of the rail. */ .v4 .v4-coll-rail{display:flex;flex-direction:column;gap:var(--s4)} .v4 .v4-coll-rail .v4-coll{display:grid;grid-template-columns:auto minmax(0,1fr); gap:var(--s3);align-items:center} .v4 .v4-coll-rail .v4-coll-fan{margin-bottom:0} .v4 .v4-coll-rail .v4-coll-fan .v4-cover{width:34px} .v4 .v4-coll-rail .v4-coll-fan .v4-cover+.v4-cover{margin-left:-13px} .v4 .v4-coll-rail .v4-coll-say{min-width:0} .v4 .v4-coll-rail .v4-coll-name{font-size:var(--t-base);margin-bottom:1px} /* v4.0.3 — the giveaway card. The image leads: a giveaway is the one panel on the home page whose job is to be looked at rather than read. Full-bleed to the panel edge, which is why the panel's own padding is cancelled here. */ .v4 .v4-give{margin:calc(var(--s4) * -1)} .v4 .v4-give-img{display:block;overflow:hidden;background:var(--surface2)} .v4 .v4-give-img img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .4s ease} .v4 .v4-give-img:hover img{transform:scale(1.03)} .v4 .v4-give-say{padding:var(--s4)} /* v4.0.5 — two shapes, because two different kinds of picture end up here. is-cover: the prize book's own cover, left, matching Reading together. is-plain (4.1.1): no picture at all. A promotional banner has no workable size in a 385px rail, so the decorated header announces the giveaway and the poster stays on /giveaway where it has the width for it. */ /* v4.1.1 — the banner is gone entirely. There is no size at which a 16:9 poster works in a 385px rail: cropped it lost its headline, uncropped it took a third of the column. A decorated header does the announcing instead, and the poster still does its job on /giveaway where it has the width for it. A prize BOOK cover is different and stays: it is portrait, and it is the thing being won. */ .v4 .v4-give-head{display:flex;align-items:center;gap:var(--s2); padding:var(--s3) var(--s4);margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4); border-radius:var(--rad-lg) var(--rad-lg) 0 0; background:var(--green);color:var(--bg2); font-family:var(--font-m);font-size:var(--t-2xs);font-weight:600; letter-spacing:.14em;text-transform:uppercase} .v4 .v4-give-head::before{content:'\25C6';letter-spacing:0;opacity:.7} /* 4.5.2 — TWO negative margins were stacking. .v4-give already cancels the panel's padding for the plain shape, and the header then cancelled it a SECOND time, pushing itself a full --s4 past the panel edge on both sides. is-cover is unaffected: it resets .v4-give's margin to 0 and pads itself, so its header still needs the pull. Radius kept, or the corners square off. */ .v4 .v4-give:not(.is-cover) .v4-give-head{margin:0 0 var(--s4)} .v4 .v4-give.is-cover .v4-give-head{margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4); grid-column:1 / -1} .v4 .v4-give.is-cover{display:grid;grid-template-columns:82px minmax(0,1fr); gap:var(--s4);padding:var(--s4);margin:0;align-items:start} .v4 .v4-give.is-cover .v4-give-img{border-radius:var(--rad-sm);aspect-ratio:2/3} .v4 .v4-give.is-cover .v4-give-say{padding:0;min-width:0} .v4 .v4-give-say .v4-h2{line-height:var(--lh-tight)} /* ── v4.7.0 — the Quote Wall ─────────────────────────────────────────────── A wall, not a feed: columns rather than rows, because quotes are different lengths and a single column of ragged cards reads as a list of interruptions. Multi-column layout rather than grid, so a short quote does not leave a tall gap beside a long one — the browser packs them. (Careful: this file is a nowdoc. A line starting with optional whitespace then the terminator word ends the block early, so no comment line here may begin with it. That is a silent, confusing parse error.) break-inside:avoid is what keeps a card from being sawn in half across a column boundary; without it the wall looks broken at exactly the moment a quote runs long, which is the moment it is most worth reading. */ .v4 .v4-quotes{columns:2;column-gap:var(--s5)} .v4 .v4-quote{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid; display:block;margin:0 0 var(--s5);padding:var(--s5);background:var(--surface); border:1px solid var(--line);border-radius:var(--rad-lg)} .v4 .v4-quote.is-verified{border-color:var(--green-ring)} .v4 .v4-quote-badge{display:inline-block;font-family:var(--font-m);font-size:var(--t-2xs); letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:var(--s3)} /* The line itself carries the page. Fraunces, stated weight rather than inherited — see the 4.6.3 note on .v4-thought q: an unset weight walks to whatever the variable font has loaded and the quote comes out thin. */ .v4 .v4-quote-t{margin:0 0 var(--s3);font-family:var(--font-d);font-weight:var(--w-display); font-size:var(--t-lg);line-height:var(--lh-snug);color:var(--text);cursor:pointer} .v4 .v4-quote-t:hover{color:var(--green-h)} .v4 .v4-quote-t:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:2px} .v4 .v4-quote-book{display:flex;gap:var(--s3);align-items:center;text-decoration:none; color:inherit;padding-top:var(--s3);border-top:1px solid var(--line)} .v4 .v4-quote-book .v4-cover{width:34px;flex:none} .v4 .v4-quote-bt{display:block;min-width:0} .v4 .v4-quote-bt b{display:block;font-size:var(--t-sm);font-weight:var(--w-title)} .v4 .v4-quote-book:hover .v4-quote-bt b{color:var(--green-h)} .v4 .v4-quote-acts{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap; margin-top:var(--s3)} .v4 .v4-quote-acts > .v4-meta:first-child{margin-right:auto} /* One shape that fills in when saved, so the state change is the same object changing rather than two unrelated pictures (v3.29.0). */ .v4 .v4-quote-save{display:inline-flex;align-items:center;gap:var(--s1);background:none; border:0;padding:var(--s1);cursor:pointer;color:var(--text4);font-family:var(--font-m); font-size:var(--t-2xs);line-height:1} .v4 .v4-quote-save svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6} .v4 .v4-quote-save:hover{color:var(--green-h)} .v4 .v4-quote-save.saved{color:var(--green)} .v4 .v4-quote-save.saved svg{fill:currentColor;stroke:currentColor} .v4 .v4-quote-n[hidden]{display:none} .v4 .v4-quote-tool{background:none;border:0;padding:var(--s1);cursor:pointer; color:var(--text4);font-family:var(--font-m);font-size:var(--t-2xs);line-height:1} .v4 .v4-quote-tool:hover{color:var(--green-h)} /* Reach without redrawing: the 4.6.3 lesson. min-height would fatten these controls; an invisible band under them only grows what a thumb can hit. */ .v4 .v4-quote-save,.v4 .v4-quote-tool{position:relative} .v4 .v4-quote-save::before,.v4 .v4-quote-tool::before{content:'';position:absolute; left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px} /* ── v4.7.1 — the eight states ───────────────────────────────────────────── Four across, like the collections grid it sits closest to in kind: a small set of fixed, named things you pick one of. Each card carries its own line of writing, so these are taller than a collection card and the covers sit at the foot rather than leading. */ .v4 .v4-states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)} .v4 .v4-state{display:block;text-decoration:none;color:inherit;padding:var(--s4); background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg)} .v4 .v4-state:hover{border-color:var(--green)} .v4 .v4-state-n{display:block;font-family:var(--font-d);font-size:var(--t-lg); line-height:var(--lh-tight);margin-bottom:2px} .v4 .v4-state:hover .v4-state-n{color:var(--green-h)} .v4 .v4-state-d{display:block;margin-top:var(--s2);font-size:var(--t-sm); color:var(--text3);line-height:var(--lh-body)} .v4 .v4-state-fan{display:flex;margin-top:var(--s3)} .v4 .v4-state-fan .v4-cover{width:30px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.12)} .v4 .v4-state-fan .v4-cover+.v4-cover{margin-left:-10px} /* ── v4.7.2 — bookshops ──────────────────────────────────────────────────── Three across: a shop card is a logo, a name, a place and a line, which needs more width than a book cover and less than a collection. The mark is the stand-in when a shop has no logo — two letters on a hue derived from the name, so a shop keeps its colour between the list and its own page. */ .v4 .v4-shops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} .v4 .v4-shop{display:flex;gap:var(--s3);align-items:flex-start;text-decoration:none;color:inherit; padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg)} .v4 .v4-shop:hover{border-color:var(--green)} .v4 .v4-shop-b{display:block;min-width:0} .v4 .v4-shop-b b{display:block;font-size:var(--t-md);line-height:var(--lh-tight)} .v4 .v4-shop:hover .v4-shop-b b{color:var(--green-h)} .v4 .v4-shop-bio{display:block;margin:var(--s2) 0;font-size:var(--t-sm);color:var(--text3); line-height:var(--lh-body)} .v4 .v4-shop-logo{width:48px;height:48px;flex:none;object-fit:contain;border-radius:var(--rad-sm); background:var(--surface2)} .v4 .v4-shop-mark{width:48px;height:48px;flex:none;border-radius:var(--rad-sm);color:#fff; display:flex;align-items:center;justify-content:center;font-family:var(--font-d); font-size:var(--t-md);font-weight:var(--w-title);letter-spacing:.02em} .v4 .v4-shop-hero{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s4)} .v4 .v4-shop-logo.is-big,.v4 .v4-shop-mark.is-big{width:76px;height:76px;font-size:var(--t-xl)} /* ── v4.7.4 — blog ───────────────────────────────────────────────────────── A post in the list is a card with an optional lead image beside it. Two columns when there is an image, one when there is not, so a post without a cover does not sit in a column with a hole in it. */ .v4 .v4-post{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg); padding:var(--s4)} .v4 .v4-post.has-cover{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s4); align-items:start} .v4 .v4-post-img{display:block;overflow:hidden;border-radius:var(--rad-sm);background:var(--surface2)} .v4 .v4-post-img img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3} .v4 .v4-post-b{min-width:0} /* The article body is editor-written HTML, so it is styled by element rather than by class — there are no hooks to add to it. */ .v4 .v4-article{margin-top:var(--s5);max-width:var(--measure);font-size:var(--t-md); line-height:var(--lh-body);color:var(--text2)} .v4 .v4-article > *{margin:0 0 var(--s4)} .v4 .v4-article h2,.v4 .v4-article h3{font-family:var(--font-d);color:var(--text); line-height:var(--lh-snug);margin:var(--s6) 0 var(--s3)} .v4 .v4-article h2{font-size:var(--t-xl)} .v4 .v4-article h3{font-size:var(--t-lg)} .v4 .v4-article img{max-width:100%;height:auto;border-radius:var(--rad-sm);display:block} .v4 .v4-article blockquote{margin:var(--s5) 0;padding-left:var(--s4); border-left:2px solid var(--green);font-family:var(--font-d);font-size:var(--t-lg); line-height:var(--lh-snug);color:var(--text)} .v4 .v4-article ul,.v4 .v4-article ol{padding-left:var(--s5)} .v4 .v4-article li{margin-bottom:var(--s2)} .v4 .v4-article a{color:var(--green-h)} .v4 .v4-article code{font-family:var(--font-m);font-size:.92em;background:var(--surface2); padding:2px 5px;border-radius:var(--rad-sm)} .v4 .v4-article pre{background:var(--surface2);padding:var(--s4);border-radius:var(--rad-sm); overflow-x:auto} .v4 .v4-article hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0} /* ── v4.7.6 — a page for reading ─────────────────────────────────────────── The article page was a reading measure inside a full-width wrap, so the column sat hard against the left edge with half the screen empty. This centres the whole page — heading, body, attachments and comments — on one measure, which is what a page whose job is reading needs. */ .v4 .v4-read{max-width:var(--measure);margin-left:auto;margin-right:auto; padding-top:var(--s5);padding-bottom:var(--s8)} .v4 .v4-read-lead{width:100%;height:auto;border-radius:var(--rad-lg); margin:var(--s5) 0 0;display:block} .v4 .v4-read .v4-article{max-width:none} /* What the piece is about: the book, the writer, or both. This used to sit in a sidebar BELOW the comments, which is the last place anybody looks. It belongs under the body and before the comments, and it shows the cover and the face rather than a bare name. */ .v4 .v4-attach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4); margin-top:var(--s6)} .v4 .v4-attach:has(> :only-child){grid-template-columns:minmax(0,1fr)} .v4 .v4-attach-i{display:flex;gap:var(--s4);align-items:center;text-decoration:none;color:inherit; padding:var(--s4);background:var(--surface);border:1px solid var(--line); border-radius:var(--rad-lg)} .v4 .v4-attach-i:hover{border-color:var(--green)} .v4 .v4-attach-i .v4-cover{width:56px;flex:none} .v4 .v4-attach-face{width:56px;height:56px;flex:none;border-radius:var(--rad-full); object-fit:cover;display:block} .v4 .v4-attach-t{display:block;min-width:0} .v4 .v4-attach-t b{display:block;font-size:var(--t-md);line-height:var(--lh-tight); margin:2px 0} .v4 .v4-attach-i:hover .v4-attach-t b{color:var(--green-h)} /* v4.7.7 — save a post. Sits beside the like in the same row, and reads as a different kind of thing on purpose: the heart is public approval, this is a private "come back to it". Same bookmark shape as the Quote Wall's save, so one glyph means one thing across the site. */ .v4 .v4-bm-f{display:inline;margin:0} .v4 .v4-bm{display:inline-flex;align-items:center;gap:var(--s1);background:none;border:0; padding:var(--s1);cursor:pointer;color:var(--text4);font-family:var(--font-m); font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase;line-height:1; position:relative} .v4 .v4-bm svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6} .v4 .v4-bm:hover{color:var(--green-h)} .v4 .v4-bm.is-on{color:var(--green)} .v4 .v4-bm.is-on svg{fill:currentColor} /* Reach, not size — 4.6.3. */ .v4 .v4-bm::before{content:'';position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:44px;height:44px} /* v4.0.1 — the owner's tools on their own author page. */ .v4 .v4-owner-acts{display:flex;flex-direction:column;gap:var(--s2)} .v4 .v4-field{display:block;margin-top:var(--s3)} .v4 .v4-field > span{display:block;font-family:var(--font-m);font-size:var(--t-2xs); letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:var(--s1)} /* v4.6.1 — these values used to differ from the .v4-field input rule ~700 lines below: cream not white, --rad-sm not --rad, --s2 padding not --s3. Because [type=text] adds specificity, this block won for text inputs and lost for every other type, so one form showed two kinds of field. They are now identical, which means the cascade no longer decides anything. The selector list stays because select and input[type=file] are sized nowhere else. */ .v4 .v4-field input[type=text],.v4 .v4-field textarea,.v4 .v4-field select, .v4 .v4-field input[type=file]{width:100%;box-sizing:border-box; border:1px solid var(--line2);border-radius:var(--rad);background:var(--surface); padding:var(--s3);font-family:var(--font-b);font-size:var(--t-md);color:var(--text)} .v4 .v4-field textarea{resize:vertical;line-height:var(--lh-snug)} .v4 .v4-field input:focus,.v4 .v4-field textarea:focus,.v4 .v4-field select:focus{ outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)} /* The follower figures row on /author-dashboard/followers. */ .v4 .v4-figs{display:flex;gap:var(--s6);flex-wrap:wrap} .v4 .v4-figs > div{display:flex;flex-direction:column;gap:2px} .v4 .v4-figs span{font-family:var(--font-d);font-size:var(--t-2xl);color:var(--green);line-height:1} .v4 .v4-figs em{font-style:normal;font-family:var(--font-m);font-size:var(--t-2xs); letter-spacing:.1em;color:var(--text4)} .v4 .v4-follow-list{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:0} .v4 .v4-follow-i{display:inline-flex;align-items:center;gap:var(--s2); text-decoration:none;color:var(--text2);font-size:var(--t-sm);min-width:0} .v4 .v4-follow-i .v4-face{margin-left:0;border:none} .v4 .v4-follow-i:hover{color:var(--green)} .v4 .v4-follow-i:hover .v4-face{box-shadow:0 0 0 2px var(--green)} .v4 .v4-bc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s4)} /* beta.9 — 74px packed 7 covers across the wrap and none of them was legible. At 92px it fits 6 and the cover art starts doing its job. */ .v4 .v4-bc-grid.is-mini{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--s3)} /* v4.1.0 — the title leads. It was 13px/500 against an author at 12px/400: one pixel and one weight step apart, so a grid of cards read as an undifferentiated block of text. */ /* v4.1.1 — clamped. "Whispers from the Mist of Tripura Hills: True Hauntings and Supernatural Tales from Tripura" ran five lines next to "Arachnid" at one, so a row of cards sat at five different heights and read as a mess. Two lines for a title, one for an author, ellipsis after. The information stays; the raggedness does not. */ .v4 .v4-bc-title{font-size:var(--t-sm);font-weight:var(--w-name);line-height:var(--lh-snug); margin:var(--s2) 0 0;color:var(--text);overflow-wrap:anywhere;letter-spacing:-.005em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .v4 .v4-bc-author{font-size:var(--t-xs);font-weight:var(--w-body);color:var(--text3);margin:3px 0 0; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} /* The verified mark. Sized to the byline rather than the body so it reads as part of the name, and given a little optical lift because a check glyph sits low in most faces. */ /* 4.5.7 — renamed from .v4-verified to .v4-vmark. This rule and the pill rule further down both claimed .v4-verified, and the later one won for both, so the bare mark was inheriting a flex box and a gap it had no use for. */ .v4 .v4-vmark{display:inline-flex;align-items:center;margin-left:4px; vertical-align:-1px;line-height:0} .v4 .v4-vmark .v4-vdisc{width:11px;height:11px} /* The rating row on a card. Only rendered where the sample size earns it, so most cards have nothing here and the row costs nothing when absent. */ .v4 .v4-bc-rating{display:flex;align-items:center;gap:var(--s2);margin-top:4px} /* beta.9 — 44px was narrower than the text beside it was tall, so the row read as a list with a stamp rather than as a book. 64px is still a row, not a card. */ .v4 .v4-bc-row-cover{width:64px;flex-shrink:0} /* ══════════════════════════════════════════════════════════════════════════ THE WEEK BAR — the host prompt that opens the Commons ══════════════════════════════════════════════════════════════════════════ */ .v4 .v4-week{background:var(--text);color:var(--bg2);border-radius:var(--rad-lg);padding:var(--s5)} /* v4.6.2 — the dark panel keeps the original value. --text4 was darkened for the cream ground where it failed at 2.55:1; on this near-black panel that same original value is already 6.23:1, and darkening it here would take it to 3.39:1 and break the one place it worked. */ .v4 .v4-week .v4-meta{color:var(--text4-dark)} .v4 .v4-week h2{font-family:var(--font-d);font-weight:var(--w-display);font-size:var(--t-2xl);line-height:var(--lh-tight);color:var(--bg);margin:var(--s2) 0 var(--s3)} .v4 .v4-week p{margin:0 0 var(--s4);color:#C8CFC2;font-size:var(--t-base);max-width:56ch} /* beta.7 — .v4-btn-face is gone with the face it held: the author's photo moved to the byline, so nothing renders that class any more and leaving the rules behind would be dead CSS shadowing nothing. is-on outlived it and is still on the book page's Following link, so it is promoted here rather than dropped with its old parent. */ .v4 .v4-btn.is-on{border-color:var(--green);color:var(--green)} /* beta.7 — online sellers, inside the Where to find it panel and under the indie shops. A top border only when there are stockists above to divide from, which is what :not(:first-child) is doing. */ .v4 .v4-sellers{margin-top:var(--s4)} .v4 .v4-sellers:not(:first-child){border-top:1px solid var(--line);padding-top:var(--s4)} .v4 .v4-sellers .v4-btn{margin-top:var(--s2)} /* beta.7 — a checkbox row that also carries a link somewhere. The anchor is a sibling of the label, never a child: a link inside a label that toggles a checkbox is one click doing two things. */ .v4 .v4-check-wrap{display:flex;flex-direction:column;gap:var(--s2)} .v4 .v4-check-link{align-self:flex-start;font-family:var(--font-m); font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase; color:var(--green);text-decoration:none;padding-left:calc(var(--s5) + var(--s2))} .v4 .v4-check-link:hover{text-decoration:underline} .v4 .v4-week-acts{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center} /* "No answers yet" is a plain line, not a button — it sits on the dark week bar so it needs the light text the rest of that block uses. */ .v4 .v4-week-acts .v4-meta{color:var(--text4-dark)} .v4 .v4-week .v4-btn{background:var(--bg2);color:var(--text)} .v4 .v4-week .v4-btn.is-ghost{background:transparent;color:var(--bg2);border-color:var(--text3)} /* ══════════════════════════════════════════════════════════════════════════ THE DIGEST — not a stream. Follow bursts collapse to one line and quiet days are absorbed. A raw chronological feed at this volume renders eight near-identical follow rows and reads like a bot log. ══════════════════════════════════════════════════════════════════════════ */ .v4 .v4-digest{border-left:2px solid var(--line);padding-left:var(--s5);margin-left:var(--s1)} .v4 .v4-digest-item{position:relative;padding:var(--s3) 0} .v4 .v4-digest-item::before{content:"";position:absolute;left:calc(-1 * var(--s5) - 5px);top:22px;width:9px;height:9px;border-radius:var(--rad-full);background:var(--line2)} .v4 .v4-digest-item.is-hot::before{background:var(--rust)} .v4 .v4-digest-item p{margin:var(--s1) 0 0;font-size:var(--t-base);color:var(--text2)} .v4 .v4-digest-item p b{font-weight:500;color:var(--text)} /* A notification inside the digest. The whole message is the link, and the timestamp sits under it rather than beside it so a long message does not squeeze the time into a column of its own. */ .v4 .v4-notif-link{color:var(--text2);text-decoration:none} .v4 .v4-notif-link:hover{color:var(--green);text-decoration:underline} .v4 .v4-notif-when{display:block;margin-top:2px;font-family:var(--font-m); font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text3)} /* ========================================================================== LIVE SEARCH A real form around a real input: with the script blocked it submits to /search and still works. The dropdown is the only enhancement. ========================================================================== */ .v4 .v4-search{position:relative;display:flex;gap:var(--s2);margin-top:var(--s5)} .v4 .v4-search input[type=search]{flex:1;min-width:0;padding:var(--s3) var(--s4); border:1px solid var(--line2);border-radius:var(--rad);background:var(--surface); font-family:var(--font-b);font-size:var(--t-md);color:var(--text)} .v4 .v4-search input[type=search]:focus{outline:none;border-color:var(--green); box-shadow:0 0 0 3px var(--green-tint)} .v4 .v4-search-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40; background:var(--surface);border:1px solid var(--line2);border-radius:var(--rad); box-shadow:0 8px 28px rgba(0,0,0,.12);overflow:hidden;max-height:60vh;overflow-y:auto} .v4 .v4-search-results.is-open{display:block} /* beta.7 — a thumbnail beside each hit. The row becomes a two-column flex (thumb, text stack) rather than a single text column. A 2:3 cover and a round face both occupy the same 30px box, so mixed lists stay aligned. */ .v4 .v4-search-img{width:30px;height:45px;flex-shrink:0;object-fit:cover; border-radius:var(--rad-sm,4px);background:var(--surface2)} .v4 .v4-search-img.is-round{height:30px;border-radius:var(--rad-full); margin-top:7px;margin-bottom:8px} .v4 .v4-search-img.is-empty{display:flex;align-items:center;justify-content:center; font-family:var(--font-m);font-size:var(--t-2xs);font-weight:700;color:var(--text4)} .v4 .v4-search-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .v4 .v4-search-txt .v4-search-t,.v4 .v4-search-txt .v4-search-a{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v4 .v4-search-hit{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4); text-decoration:none;border-bottom:1px solid var(--line)} .v4 .v4-search-hit:last-child{border-bottom:none} .v4 .v4-search-hit:hover{background:var(--surface2)} .v4 .v4-search-t{font-size:var(--t-sm);font-weight:500;color:var(--text)} .v4 .v4-search-a{font-size:var(--t-xs);color:var(--text3)} .v4 .v4-search-empty{padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--text4)} /* ========================================================================== BOOK HERO, DETAILS, LIGHTBOX ========================================================================== */ /* Four areas rather than a cover beside one tall column. Desktop keeps the arrangement it has always had — everything to the right of the cover — but expressing it as areas is what lets the phone reflow without touching the markup. align-content:start stops the three right-hand rows stretching to the height of the cover. */ .v4 .v4-book-hero{display:grid;grid-template-columns:168px minmax(0,1fr); grid-template-areas:"cover head" "cover acts"; grid-template-rows:auto 1fr; gap:var(--s3) var(--s5);align-items:start;align-content:start} .v4 .v4-bh-cover{grid-area:cover} .v4 .v4-bh-head{grid-area:head;min-width:0} /* beta.8 — .v4-bh-meta is gone: the award moved in beside the rating and the grid area it held would only ever have been empty. flex-wrap lets the sample line and the award chip drop under the stars in a narrow column rather than being squeezed onto one line. */ .v4 .v4-bh-rating{display:flex;align-items:center;gap:var(--s2) var(--s3); flex-wrap:wrap;margin-top:var(--s3)} .v4 .v4-bh-acts{grid-area:acts;display:flex;gap:var(--s3);flex-wrap:wrap; align-items:center;margin-top:var(--s2)} .v4 .v4-cover-link{display:block;text-decoration:none} .v4 .v4-cover-link:hover .v4-cover{box-shadow:0 4px 18px rgba(0,0,0,.18)} /* Show more, without script. The hidden tail is inside the paragraph so the text reflows as one block when opened, rather than appearing as a second detached paragraph. The summary sits after the content so it reads as a control beneath the text. */ .v4 .v4-more{display:block} .v4 .v4-more .v4-more-rest{display:none} .v4 .v4-more[open] .v4-more-rest{display:inline} .v4 .v4-more>summary{cursor:pointer;list-style:none;margin-top:var(--s2); font-size:var(--t-sm);color:var(--green-h)} .v4 .v4-more>summary::-webkit-details-marker{display:none} .v4 .v4-more>summary:hover{text-decoration:underline} .v4 .v4-more[open]>summary{visibility:hidden;height:0;margin:0} .v4 .v4-detailwrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s2) 0} .v4 .v4-detailwrap>summary{cursor:pointer;list-style:none;display:flex;gap:var(--s3);align-items:baseline; flex-wrap:wrap;padding:var(--s2) 0} .v4 .v4-detailwrap>summary::-webkit-details-marker{display:none} .v4 .v4-detailwrap>summary::after{content:"+";margin-left:auto;color:var(--text4);font-family:var(--font-m)} .v4 .v4-detailwrap[open]>summary::after{content:"\2212"} .v4 .v4-detail-teaser{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .v4 .v4-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 var(--s5);margin-top:var(--s2)} .v4 .v4-detail{display:flex;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);min-width:0} .v4 .v4-detail dt{margin:0;flex:0 0 88px;font-family:var(--font-m);font-size:var(--t-2xs); letter-spacing:.05em;text-transform:uppercase;color:var(--text4);padding-top:2px} .v4 .v4-detail dd{margin:0;flex:1;min-width:0;font-size:var(--t-sm);color:var(--text2);overflow-wrap:anywhere} /* Lightbox with no script. :target opens it, the whole overlay is the close link. Only rendered when there is a real image — a generated cover has nothing to enlarge. */ /* v4.9.1 — 400, was 200. The tab bar is 350, so an enlarged cover was a full-screen dark overlay with five lit tabs sitting on top of it, and the overlay is itself the close link, so the strip they occupied could not be tapped to dismiss it. Above the bar, the picture is the whole screen. */ .v4 .v4-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center; background:rgba(18,25,15,.88);z-index:400;padding:var(--s5)} .v4 .v4-lightbox:target{display:flex} .v4 .v4-lightbox img{max-width:min(92vw,520px);max-height:90vh;border-radius:var(--rad); box-shadow:0 10px 50px rgba(0,0,0,.5)} /* ========================================================================== FIGURES — the only numbers on a profile Points, streaks and rank are deliberately absent. These three are counts of things a person did, not a score they earned. ========================================================================== */ .v4 .v4-figures{display:flex;gap:var(--s5);flex-wrap:wrap} .v4 .v4-figures div{min-width:0} .v4 .v4-figures span{display:block;font-family:var(--font-d);font-size:var(--t-2xl);line-height:1.1;color:var(--text)} .v4 .v4-figures em{font-style:normal;font-family:var(--font-m);font-size:var(--t-2xs); letter-spacing:.06em;color:var(--text4)} /* ========================================================================== RATINGS AND AWARDS Stars are a bookstore idiom, so they are small, muted, and never appear without a name attached. Awards are editorial signal and carry more weight here than any score does — a win is amber, everything else is quiet. ========================================================================== */ /* Two layers: grey stars beneath, amber clipped to a percentage above. This is what makes a half star possible — reviews.rating is 1-10, so 7 is three and a half, and rounding it to whole stars loses the thing the scale exists for. */ /* Stars are inline SVG, sized in px and filled by class. They were text glyphs clipped by percentage until alpha.16; the geometry now comes from the path, so a half star is exactly half regardless of what font is available. An svg with no width and no fill expands to its container and paints black, which is what happened when the markup changed and these rules did not. */ .v4 .v4-stars{display:inline-block;vertical-align:-2px;width:66px;height:13px;flex-shrink:0} /* beta.4 — the book hero passes 'lg'. 130px is a visible step up from 110 at the top of a page without competing with the h1 beside it. */ .v4 .v4-stars.is-lg{width:130px;height:26px;vertical-align:-5px} .v4 .v4-star-off{fill:var(--star-off)} .v4 .v4-star-on{fill:var(--star)} /* The picker. Ten invisible half-width labels laid over one SVG star strip. The previous version clipped a text glyph to .5em per half, which assumes a star character is exactly one em wide. It is not, and it varies by fallback font — that is what produced ragged halves and an apparent sixth star. Geometry now comes from the SVG, and fill is driven by which radio is checked through sibling selectors, so there is still no script. */ .v4 .v4-rate{position:relative;display:inline-block;line-height:0} .v4 .v4-rate input{position:absolute;opacity:0;width:0;height:0} .v4 .v4-rate-stars{position:relative;display:inline-block;height:22px} .v4 .v4-rate-stars .v4-stars{width:110px;height:22px;display:block} .v4 .v4-rate-stars .v4-star-off{fill:var(--line2)} .v4 .v4-rate-stars .v4-star-on{fill:var(--star);opacity:0} .v4 .v4-rate-half{position:absolute;top:0;height:100%;width:11px;cursor:pointer;z-index:2} .v4 .v4-rate-half:nth-of-type(1){left:0px} .v4 .v4-rate-half:nth-of-type(2){left:11px} .v4 .v4-rate-half:nth-of-type(3){left:22px} .v4 .v4-rate-half:nth-of-type(4){left:33px} .v4 .v4-rate-half:nth-of-type(5){left:44px} .v4 .v4-rate-half:nth-of-type(6){left:55px} .v4 .v4-rate-half:nth-of-type(7){left:66px} .v4 .v4-rate-half:nth-of-type(8){left:77px} .v4 .v4-rate-half:nth-of-type(9){left:88px} .v4 .v4-rate-half:nth-of-type(10){left:99px} .v4 .v4-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .v4 .v4-rate input#v4r1:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 90% 0 0)} .v4 .v4-rate input#v4r2:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 80% 0 0)} .v4 .v4-rate input#v4r3:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 70% 0 0)} .v4 .v4-rate input#v4r4:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 60% 0 0)} .v4 .v4-rate input#v4r5:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 50% 0 0)} .v4 .v4-rate input#v4r6:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 40% 0 0)} .v4 .v4-rate input#v4r7:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 30% 0 0)} .v4 .v4-rate input#v4r8:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 20% 0 0)} .v4 .v4-rate input#v4r9:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 10% 0 0)} .v4 .v4-rate input#v4r10:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 0% 0 0)} .v4 .v4-rate input:focus-visible ~ .v4-rate-stars{outline:2px solid var(--green);outline-offset:3px} .v4 .v4-award{display:flex;gap:var(--s2);align-items:baseline;padding:var(--s2) 0;border-bottom:1px solid var(--line)} .v4 .v4-award:last-child{border-bottom:none} .v4 .v4-award-res{font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.06em; color:var(--text4);white-space:nowrap;flex-shrink:0;min-width:74px} .v4 .v4-award.is-win .v4-award-res{color:var(--amber);font-weight:500} .v4 .v4-award-name{font-size:var(--t-sm);color:var(--text2);line-height:var(--lh-snug);min-width:0} .v4 .v4-award-name i{font-style:normal;color:var(--text4)} .v4 .v4-award-strip{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3); border-radius:var(--rad-full);background:rgba(122,92,30,.10);color:var(--amber); font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.06em} /* ══════════════════════════════════════════════════════════════════════════ COMPOSE — saying something in a room, not filling in a form Collapsed it is one line that sits in the same rhythm as a thought: avatar, then text. It opens on focus-within, which is pure CSS and needs no script. Native selects are the least designed element available, so the options are radio pills that reuse the tag shape already on the page. ══════════════════════════════════════════════════════════════════════════ */ .v4 .v4-compose{border:1px solid var(--line);border-radius:var(--rad-lg);background:var(--surface); padding:var(--s3) var(--s4);transition:border-color .18s ease,box-shadow .18s ease} .v4 .v4-compose:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)} .v4 .v4-compose-head{display:flex;gap:var(--s3);align-items:flex-start} /* 4.5.1 — width:100% added. flex:1 sizes this only inside .v4-compose-head; as a direct child of .v4-compose it was inert and the textarea fell back to its default cols. Harmless in the flex case, where flex-basis:0% wins. */ .v4 .v4-compose textarea{flex:1;min-width:0;width:100%;box-sizing:border-box; border:none;background:transparent;resize:none; padding:var(--s2) 0;font-family:var(--font-b);font-size:var(--t-md);line-height:var(--lh-snug); color:var(--text);height:40px;transition:height .18s ease} .v4 .v4-compose textarea::placeholder{color:var(--text4)} .v4 .v4-compose textarea:focus{outline:none} .v4 .v4-compose:focus-within textarea{height:104px} /* The controls stay out of the way until there is something to control. */ .v4 .v4-compose-foot{max-height:0;opacity:0;overflow:hidden;margin-top:0; transition:max-height .2s ease,opacity .2s ease,margin-top .2s ease} .v4 .v4-compose:focus-within .v4-compose-foot{max-height:260px;opacity:1;margin-top:var(--s3)} .v4 .v4-compose-bar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap} .v4 .v4-compose-bar .v4-btn{margin-left:auto} .v4 .v4-pills{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center} /* An author row. A writer is a person, so the row leads with a face rather than a cover, and the whole row is the link. */ .v4 .v4-arow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4); align-items:center;padding:var(--s4) 0;text-decoration:none;color:inherit; border-top:1px solid var(--line)} .v4 .v4-arow:hover .v4-bc-title{color:var(--green)} .v4 .v4-arow-now{display:block;margin-top:4px;font-size:var(--t-xs);color:var(--text2)} .v4 .v4-arow-now em{font-style:normal} /* Columns, because production has 128 writers and one column of them is a very long page. auto-fill against a 300px minimum gives three columns on a wide desktop, two on a laptop or landscape tablet, one on a phone — without a media query, and without a fixed count that would strand a single card in a row of three. The border-top on every row rather than on siblings is what makes the columns line up: a sibling selector would skip whichever row happens to start each column. */ .v4 .v4-arow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); column-gap:var(--s6)} /* A filter row: label at the side, controls beside it. Three stacked eyebrow-over-chips groups read as six rows of equal weight with nothing saying which label owns which chips; pulling the label out makes the grouping structural. Collapses to stacked below 760. */ /* v4.10.0 — the poll compose box and the in-post poll. .v4-pollbox is a
: opening it IS choosing to make a poll, so there is no radio to keep in sync with a reveal and nothing to fail if script or :has() is unavailable. The server reads the same fact — two or more filled answers — so the control and the payload cannot disagree. .v4-poll.is-inpost drops the card chrome: inside a post it is part of the post, not a second panel sitting on one. */ .v4 .v4-pollbox{margin-top:var(--s3)} .v4 .v4-pollbox>summary{list-style:none;display:inline-block;cursor:pointer} .v4 .v4-pollbox>summary::-webkit-details-marker{display:none} .v4 .v4-polloptions{display:grid;gap:var(--s2);margin-bottom:var(--s2)} /* v4.11.0 — .v4-reportbox. Same disclosure shape as .v4-pollbox above and for the same reason: the reason select has to live somewhere, and a
needs no script and no query parameter. Sits in the .v4-acts row beside Like and Reply, so it borrows their rhythm rather than announcing itself — a report control that catches the eye invites reports nobody meant to file. */ .v4 .v4-reportbox{display:inline-block} .v4 .v4-reportbox>summary{list-style:none;display:inline-block;cursor:pointer} .v4 .v4-reportbox>summary::-webkit-details-marker{display:none} .v4 .v4-reportbox[open]{display:block;width:100%;margin-top:var(--s2)} .v4 .v4-reportbox form{display:grid;gap:var(--s2);margin-top:var(--s2);max-width:320px} /* v4.10.1 — the collapsed change-your-answer control, and the read-only option rows a signed-out reader sees. .is-static borrows the option row's shape but has no input: it shows WHAT is on offer without pretending to be something you can pick. */ .v4 .v4-poll-change{margin-top:var(--s3)} .v4 .v4-poll-change>summary{list-style:none;display:inline-block;cursor:pointer} .v4 .v4-poll-change>summary::-webkit-details-marker{display:none} .v4 .v4-poll-opt.is-static{cursor:default;opacity:.85} .v4 .v4-poll-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line2); flex:none;display:inline-block} .v4 .v4-poll.is-inpost{background:none;border:0;border-left:2px solid var(--line); border-radius:0;padding:var(--s1) 0 var(--s1) var(--s3);margin:var(--s3) 0 0} /* v4.9.6 — facets that share a line. The label sits beside its own chips rather than above them, and the groups wrap as units, so "Show" never ends up on one line with "Sort"'s chips underneath it. */ .v4 .v4-facetrow{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6); align-items:center;padding:var(--s3) 0} .v4 .v4-facetgrp{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap} .v4 .v4-facetgrp .v4-facet-label{padding-top:0} .v4 .v4-facet{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3); align-items:start;padding:var(--s3) 0} /* v4.10.5 — the filter block on /books. Not a .v4-panel: a border, a fill and a radius all announce a separate object, and this is a row of controls attached to the list under it. */ .v4 .v4-filters{margin-top:var(--s4)} .v4 .v4-morefilters>summary{list-style:none;display:block;cursor:pointer;padding:var(--s2) 0} .v4 .v4-morefilters>summary::-webkit-details-marker{display:none} .v4 .v4-morefilters[open]>summary{padding-bottom:0} .v4 .v4-facet + .v4-facet{border-top:1px solid var(--line)} .v4 .v4-facet-label{font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.08em; text-transform:uppercase;color:var(--text3);padding-top:7px} /* The bar between the filters and the grid: count on the left, order on the right. Separating narrowing from arranging, and giving the grid room to start — it previously butted straight up against the last chip row. */ .v4 .v4-listbar{display:flex;align-items:center;justify-content:space-between; gap:var(--s3);flex-wrap:wrap;margin:var(--s5) 0 var(--s5)} /* A chip is a pill that submits. Same shape as the radio pills so the shelf control and the compose options read as one family. */ /* v4.10.5 — 13px, and tighter. The chips are a filter, not body copy, and on a phone eight state names at 14px pushed the first book cover 823px down the page. The control itself shrinks; the reach does not -- the ::before band below stays 44px, which is exactly what the 4.6.3 pattern is for. */ .v4 .v4-chip{font-family:var(--font-b);font-size:13px;padding:3px 10px; border-radius:var(--rad-full);border:1px solid var(--line2);color:var(--text3); background:transparent;cursor:pointer;white-space:nowrap;transition:all .14s} /* v4.10.5 — the count beside a chip label. It was inline opacity:.6 in five places, which on cream resolves to 2.40:1 -- under the 4.5 AA floor, and it had been that way at full size too. NO opacity below 1 passes against this text colour, so the hierarchy is carried by SIZE instead, and the colour is inherited so the selected chip's white count stays white. Same lesson as --text4 in 4.10.2: de-emphasise by size, never by transparency. */ .v4 .v4-chip-n{font-size:11px;color:inherit;opacity:1;margin-left:1px} .v4 .v4-chip:hover{border-color:var(--green);color:var(--green-h)} .v4 .v4-chip.is-on{background:var(--green);border-color:var(--green);color:#fff;font-weight:500} .v4 .v4-pill{position:relative;display:inline-flex} .v4 .v4-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .v4 .v4-pill span{display:inline-block;font-family:var(--font-b);font-size:var(--t-sm); padding:var(--s1) var(--s3);border-radius:var(--rad-full);border:1px solid var(--line2); color:var(--text3);background:transparent;white-space:nowrap} .v4 .v4-pill input:checked + span{background:var(--green-tint);border-color:var(--green); color:var(--green-h);font-weight:500} .v4 .v4-pill input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px} /* Only surfaces when the host actually switches to asking a question. :has() is unsupported on very old browsers, where the hint simply stays hidden — the control still works. */ .v4 .v4-reply{margin-top:var(--s2)} .v4 .v4-reply>summary{cursor:pointer;font-size:var(--t-sm);color:var(--green-h);list-style:none; display:inline-block;padding:var(--s1) 0} .v4 .v4-reply>summary::-webkit-details-marker{display:none} .v4 .v4-reply>summary:hover{text-decoration:underline} .v4 .v4-reply[open]>summary{color:var(--text4)} .v4 .v4-replies{margin:var(--s3) 0 0 var(--s4);padding-left:var(--s4);border-left:2px solid var(--line)} .v4 .v4-replies .v4-thought{padding:var(--s2) 0} /* v4.4.0 — the acts row under a thought: like, comment, and edit when it is yours. Sits outside .v4-replies, so it is flush with the thought rather than inside the indented comment column. Wraps rather than overflowing on a narrow phone, and an open form is forced onto a full line of its own so it never shares one with the heart. */ /* 4.5.2 — EQUAL HEIGHTS, not centred guesses. Signed out, the like and the cue are both direct children of this row and line up; signed in, the like is a