/* ===== Miss Lili — The Love Notebook (keepsake-journal skin) ===== */ :root{ --ink:#38222c; --ink-soft:#6f5d55; --ink-faint:#8a7468; --paper:#F7EFE1; --paper-2:#FFFAF0; --paper-3:#f2e7d4; --plum:#4A2B3A; --plum-deep:#38222c; --coral:#C56A5C; --coral-deep:#a4483b; --gold:#C9A15A; --gold-soft:#e0c793; --line:#e2cfb6; --line-soft:#ecdcc6; --tape:rgba(201,161,90,.32); --shadow:0 8px 20px rgba(74,43,58,.08); --shadow-lg:0 20px 46px rgba(74,43,58,.15); --wrap:1220px; --measure:70ch; --serif:'Playfair Display',Georgia,serif; --sans:'Mulish',system-ui,sans-serif; --hand:'Caveat',cursive; --acc-love:#C56A5C; --acc-dating:#9C4A52; --acc-marriage:#7A3E52; --acc-life:#B0803B; --acc-musings:#6E5A6E; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;color:var(--ink); background-color:var(--paper); background-image:repeating-linear-gradient(var(--paper),var(--paper) 37px,rgba(74,43,58,.045) 38px); font-family:var(--sans);font-size:19px;line-height:1.72; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:var(--coral);text-decoration:none} a:hover{color:var(--coral-deep)} h1,h2,h3,h4{font-family:var(--serif);color:var(--plum-deep);line-height:1.1;margin:0;font-weight:600} p{margin:0 0 1.1em;text-wrap:pretty} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px} .kicker{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--coral)} .hand{font-family:var(--hand);line-height:1} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} /* ---- buttons (pill) ---- */ .btn{display:inline-flex;align-items:center;gap:.5em;background:var(--coral);color:#fff;font-family:var(--sans); font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:14px 26px;border-radius:24px; border:none;cursor:pointer;transition:background .18s,transform .18s;box-shadow:0 6px 16px rgba(197,106,92,.25)} .btn:hover{background:var(--coral-deep);color:#fff;transform:translateY(-1px)} .btn.plum{background:var(--plum)}.btn.plum:hover{background:var(--coral)} .btn.ghost{background:transparent;color:var(--plum);border:1.5px solid var(--gold);box-shadow:none} .btn.ghost:hover{background:var(--plum);color:#fff;border-color:var(--plum)} /* ---- masthead ---- */ .masthead{background:transparent;border-bottom:1.5px dashed var(--gold);padding:38px 0 0;position:relative} .mast-inner{text-align:center;position:relative} .mast-inner::before{content:"";position:absolute;top:-26px;left:50%;transform:translateX(-50%) rotate(-2.5deg); width:150px;height:28px;background:var(--tape);border:1px dashed rgba(74,43,58,.22)} .mast-tag{font-family:var(--hand);font-size:26px;color:var(--coral)} .wordmark{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(46px,7vw,76px);color:var(--plum);display:inline-block;margin:4px 0 2px;line-height:.98} .wordmark:hover{color:var(--coral)} .mast-sub{font-family:var(--hand);font-size:23px;color:var(--ink-faint)} .nav{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px;padding:20px 0 24px} .nav a{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum); padding:9px 18px;border:1px solid var(--gold);border-radius:22px;background:var(--paper-2);transition:.18s} .nav a:hover{background:var(--coral);color:#fff;border-color:var(--coral)} .nav a[aria-current]{background:var(--plum);color:#fff;border-color:var(--plum)} .nav-check{position:absolute;opacity:0;pointer-events:none} .nav-burger{display:none} /* ---- hero cover story ---- */ .hero{padding:50px 0 54px} .hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center} .hero-fig{position:relative;background:var(--paper-2);padding:14px 14px 18px;border-radius:4px;box-shadow:var(--shadow-lg);transform:rotate(-1.4deg)} .hero-fig img{width:100%;aspect-ratio:1.55/1;object-fit:cover;border-radius:2px} .hero-fig figcaption{font-family:var(--hand);font-size:22px;color:var(--ink-faint);text-align:center;margin-top:8px} .hero-body{min-width:0} .hero-title{font-family:var(--serif);font-style:italic;font-size:clamp(38px,4.4vw,58px);margin:12px 0 0;line-height:1.04} .hero-title a{color:var(--plum-deep)}.hero-title a:hover{color:var(--coral)} .hero-dek{font-size:20px;color:var(--ink-soft);margin:18px 0 0} .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink-faint);margin-top:18px} .meta .tag{color:var(--coral);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px} .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)} .byline-sig{font-family:var(--hand);font-size:26px;color:var(--coral);margin-top:8px} /* ---- section band ---- */ .band{padding:54px 0} .band-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px;border-bottom:1.5px dashed var(--gold);padding-bottom:16px} .band-head h2{font-family:var(--serif);font-style:italic;font-size:36px} .band-head .see{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)} /* ---- even-height journal cards ---- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .cards.two{grid-template-columns:repeat(2,1fr)} .card{display:flex;flex-direction:column;height:100%;background:var(--paper-2);border:1px solid var(--line-soft); border-radius:10px;overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s;min-width:0} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)} .card-fig{padding:10px 10px 0} .card-fig img{width:100%;aspect-ratio:1.6/1;object-fit:cover;border-radius:6px;transition:transform .4s} .card:hover .card-fig img{transform:scale(1.03)} .card-body{display:flex;flex-direction:column;gap:9px;flex:1;padding:16px 22px 24px} .card-title{font-family:var(--serif);font-size:25px;line-height:1.14;color:var(--plum-deep);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card:hover .card-title{color:var(--coral)} .card .kicker{font-family:var(--hand);font-size:20px;letter-spacing:0;text-transform:none;color:var(--coral)} .card-dek{font-size:15.5px;color:var(--ink-soft);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card-meta{margin-top:auto;padding-top:4px} /* feature card */ .feature{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)} .feature::before{content:"";position:absolute;top:-12px;left:56px;z-index:2;transform:rotate(-3deg);width:120px;height:26px;background:var(--tape);border:1px dashed rgba(74,43,58,.2)} .feature .card-fig{padding:0} .feature .card-fig img{aspect-ratio:auto;height:100%;min-height:330px;border-radius:0} .feature .card-body{justify-content:center;padding:40px 42px} .feature .card-title{font-family:var(--serif);font-style:italic;font-size:34px;-webkit-line-clamp:3} .feature .card .kicker,.feature .kicker{font-family:var(--hand);font-size:22px;color:var(--coral)} .feature .card-dek{font-size:17px;-webkit-line-clamp:4} /* ---- Miss Lili's little list (journal card) ---- */ .little{padding:54px 0} .little .little-grid{position:relative;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:14px; box-shadow:var(--shadow-lg);padding:48px 52px;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start} .little .little-grid::before{content:"";position:absolute;top:-16px;left:64px;transform:rotate(-3deg);width:140px;height:30px;background:var(--tape);border:1px dashed rgba(74,43,58,.2)} .little h2{font-family:var(--serif);font-style:italic;font-size:42px;color:var(--plum-deep);margin:6px 0 4px} .little .sub{color:var(--ink-soft);margin:0 0 26px;font-size:17px} .little ol{list-style:none;margin:0;padding:0;counter-reset:l;display:flex;flex-direction:column;gap:0} .little li{counter-increment:l;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline; border-bottom:1.5px dashed var(--line);padding:14px 0} .little li:last-child{border-bottom:none} .little li::before{content:counter(l) ".";font-family:var(--serif);font-style:italic;font-weight:600;font-size:30px;color:var(--coral);min-width:36px;line-height:1} .little .li-said{font-family:var(--sans);font-weight:600;font-size:19px;color:var(--plum-deep);line-height:1.3;display:block} .little .li-why{display:block;font-family:var(--sans);font-size:14.5px;color:var(--ink-soft);margin-top:3px} /* ---- quote of the day ---- */ .qcard{background:var(--plum);color:#f3e7d6;border-radius:14px;padding:38px 36px 28px;position:relative; box-shadow:var(--shadow-lg);cursor:pointer;overflow:hidden} .qcard::before{content:"";position:absolute;top:-13px;left:36px;transform:rotate(-3deg);width:120px;height:26px;background:var(--tape);border:1px dashed rgba(240,220,190,.3)} .qcard .qmark{position:absolute;top:14px;right:26px;font-family:var(--serif);font-size:100px;color:var(--gold);opacity:.35;line-height:1} .qcard .qk{position:relative;font-family:var(--hand);font-size:26px;color:var(--gold-soft);margin-bottom:8px} .qcard blockquote{position:relative;margin:0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:25px;line-height:1.36;color:#fff;min-height:132px;display:flex;align-items:center;transition:opacity .35s} .qcard .qfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:16px;border-top:1px solid rgba(201,161,90,.3);padding-top:14px} .qcard .qsig{font-family:var(--hand);font-size:23px;color:var(--gold-soft);white-space:nowrap} .qdots{display:flex;gap:7px;align-items:center} .qdots span{width:7px;height:7px;border-radius:50%;background:rgba(240,220,190,.35);transition:background .25s} .qdots span.on{background:var(--coral)} .qhint{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,220,190,.6);margin-left:6px} /* ---- woven supporters ---- */ .supporter{margin:34px 0} .supporter-inner{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:var(--paper-2); border:1px solid var(--line-soft);border-left:3px solid var(--gold);border-radius:10px;padding:20px 26px;box-shadow:var(--shadow)} .supporter .s-kick{font-family:var(--hand);font-size:24px;color:var(--coral)} .supporter .s-note{font-family:var(--sans);font-size:15px;color:var(--ink-soft);margin:2px 0 0} .sponsor{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none} .sponsor img{width:190px;height:78px;object-fit:contain;background:#2b1922;border-radius:6px;padding:10px 14px} .sponsor-blurb{font-family:var(--sans);font-size:13px;color:var(--ink-faint);max-width:210px;text-align:center;line-height:1.4} .supporter .s-row{display:flex;flex-wrap:wrap;gap:26px} .supporters-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px} /* ---- newsletter (inert) ---- */ .signoff{padding:52px 0 60px} .signoff-inner{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center; background:var(--paper-2);border:1px solid var(--line-soft);border-radius:14px;padding:42px 46px;box-shadow:var(--shadow)} .signoff h2{font-family:var(--serif);font-style:italic;font-size:34px} .nl-form{display:flex;gap:10px} .nl-form input{flex:1;background:var(--paper);border:1px solid var(--gold);border-radius:24px;padding:14px 18px;font-family:var(--sans);font-size:16px;color:var(--ink)} .nl-note{font-size:13px;color:var(--ink-faint);margin:10px 0 0} /* ---- footer ---- */ .foot{background:var(--plum-deep);color:#d9c6b7;padding:52px 0 40px;margin-top:20px; background-image:repeating-linear-gradient(#38222c,#38222c 37px,rgba(255,255,255,.03) 38px)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .foot .wm{font-family:var(--serif);font-style:italic;font-size:42px;color:#fff} .foot p{font-size:15px;color:#bfa998} .foot h4{color:var(--gold);font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .foot ul a{color:#e7d7c8;font-size:15px} .foot ul a:hover{color:var(--coral)} .foot-base{margin-top:36px;padding-top:20px;border-top:1.5px dashed rgba(201,161,90,.3);font-size:13px;color:#a8907f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* ================= ARTICLE ================= */ .post{padding-bottom:40px} .post-hero{position:relative;height:min(60vh,540px);min-height:400px;overflow:hidden;display:flex;align-items:flex-end} .post-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .post-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(56,34,44,.05) 0%,rgba(56,34,44,.18) 45%,rgba(56,34,44,.84) 100%)} .post-hero .ph-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 40px 46px;width:100%;color:#fff} .post-hero h1{font-family:var(--serif);font-style:italic;color:#fff;font-size:clamp(36px,5.2vw,64px);max-width:16ch;text-shadow:0 2px 24px rgba(40,20,28,.5)} .post-hero .post-dek{font-family:var(--serif);font-size:clamp(19px,2.3vw,26px);color:#f3e2d6;max-width:46ch;margin:14px 0 0;text-shadow:0 1px 12px rgba(40,20,28,.5)} .post-hero .meta{color:#e9d6c8;margin-top:18px} .post-hero .meta .tag{color:#ffc7ba} .post-hero .meta .dot{background:var(--gold)} .article-body{max-width:var(--measure);margin:0 auto;padding:48px 40px 10px;font-size:20px;line-height:1.8} .article-body>p,.article-body>h2,.article-body>h3,.article-body>ul,.article-body>ol,.article-body>hr{max-width:none} .article-body h2{font-family:var(--serif);font-style:italic;font-size:33px;margin:1.6em 0 .5em;color:var(--plum-deep)} .article-body h2 .secnum{font-family:var(--hand);font-style:normal;font-weight:700;font-size:26px;letter-spacing:0;color:var(--gold);display:block;margin-bottom:2px} .article-body h3{font-family:var(--serif);font-size:25px;margin:1.4em 0 .4em} .article-body p a,.article-body li a{color:var(--coral);text-decoration:underline;text-decoration-color:rgba(197,106,92,.4);text-underline-offset:3px} .article-body p a:hover{text-decoration-color:var(--coral)} .article-body ul{padding-left:1.2em} .article-body li{margin:.3em 0} .article-body>hr{border:none;text-align:center;margin:2em 0} .article-body>hr::before{content:"❦";color:var(--gold);font-size:26px} .lead{font-family:var(--serif);font-size:25px;line-height:1.5;color:var(--plum);margin-bottom:1em} .dropcap::first-letter{float:left;font-family:var(--serif);font-style:italic;font-weight:600;font-size:5em;line-height:.68;padding:.06em .1em 0 0;color:var(--coral)} .article-figure{margin:2.2em 0;max-width:none} .article-body .breakout{width:min(1040px,92vw);margin-left:calc(50% - min(520px,46vw))} .article-figure img{width:100%;border-radius:8px;box-shadow:var(--shadow-lg)} .article-figure figcaption,.chart figcaption,.map-figure figcaption{font-family:var(--hand);font-size:19px;color:var(--ink-faint);margin-top:8px;text-align:center} /* ===== palette components ===== */ .pullquote{margin:1.6em 0;border:none;padding:.2em 0 .2em 28px;border-left:4px solid var(--coral)} .pullquote p{font-family:var(--serif);font-style:italic;font-weight:600;font-size:30px;line-height:1.28;color:var(--plum-deep);margin:0} .blockquote{margin:1.6em 0;background:var(--paper-3);border-radius:10px;padding:24px 28px} .blockquote p{font-family:var(--serif);font-style:italic;font-size:23px;margin:0 0 .4em;color:var(--plum-deep)} .blockquote cite{font-family:var(--sans);font-style:normal;font-weight:700;font-size:14px;color:var(--ink-faint)} .callout{margin:2em 0;background:linear-gradient(#fff6ea,#fbecd8);border:1px solid var(--gold);border-radius:12px;padding:24px 26px;position:relative} .callout::before{content:"A note from Lili";position:absolute;top:-12px;left:22px;background:var(--coral);color:#fff;font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:20px} .callout p{margin:.4em 0 0;font-size:18px;color:var(--ink)} .callout p:first-of-type{margin-top:.5em} .note{background:var(--paper-2);border:1.5px dashed var(--gold);border-radius:10px;padding:15px 20px;font-size:16px;color:var(--ink-soft)} .statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:2em 0} .statblock{background:var(--plum);color:#f3e7d6;border-radius:12px;padding:24px 20px;text-align:center} .stat-num{display:block;font-family:var(--serif);font-weight:600;font-size:52px;line-height:1;color:var(--gold-soft)} .stat-label{display:block;font-family:var(--sans);font-size:13.5px;color:#e7d3c3;margin-top:8px} .versus{width:100%;border-collapse:collapse;margin:1.8em 0;font-family:var(--sans);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)} .versus th,.versus td{padding:14px 18px;text-align:left;font-size:16.5px;border-bottom:1px solid var(--line)} .versus thead th{background:var(--plum);color:#fff;font-size:14px;letter-spacing:.05em} .versus tbody th{background:var(--paper-2);color:var(--coral);font-weight:800;width:34%} .versus td{background:var(--paper-2)} .datatable{width:100%;border-collapse:collapse;margin:1.8em 0;font-family:var(--sans);font-size:16.5px} .datatable caption{font-family:var(--hand);font-size:22px;color:var(--coral);text-align:left;margin-bottom:8px} .datatable th,.datatable td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)} .datatable thead th{color:var(--plum-deep);font-weight:800;border-bottom:2px solid var(--gold)} .datatable tbody tr:nth-child(even){background:var(--paper-2)} .timeline{list-style:none;margin:1.8em 0;padding:0} .timeline li{display:grid;grid-template-columns:minmax(120px,240px) 1fr;gap:20px;padding:14px 0;border-bottom:1.5px dashed var(--line);align-items:baseline} .t-when{font-family:var(--sans);font-weight:800;font-size:15px;color:var(--coral);letter-spacing:.01em} .t-what{font-size:17px;color:var(--ink)} .chart{margin:2em 0} .chart svg{width:100%;height:auto;overflow:visible} .chart .bar-label{font-family:var(--sans);font-size:13px;fill:var(--ink-soft)} .chart .bar-val{font-family:var(--sans);font-weight:800;font-size:13px;fill:var(--plum-deep)} .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:2em 0} .gallery figure{margin:0} .gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px} .map-figure{margin:2em 0} .map-slot{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#efe3d1,#efe3d1 10px,#e9dcc7 10px,#e9dcc7 20px); border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:var(--sans);font-size:14px} .map-slot::after{content:"Map"} .profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:2em 0} .profile-card{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:22px;box-shadow:var(--shadow)} .profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:12px} .profile-card.no-photo{border-left:3px solid var(--coral)} .profile-card h3{font-size:22px} .profile-card .p-role{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--coral);text-transform:uppercase;margin:2px 0 10px} .profile-card p{font-size:15.5px;color:var(--ink-soft)} .profile-card .p-links a{font-family:var(--sans);font-weight:700;font-size:14px} .org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:2em 0} .org-card{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px} .org-card:hover{border-color:var(--gold)} .org-logo{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#2b1922} .org-card.no-logo .org-logo{display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--serif);font-size:22px} .org-name{font-family:var(--sans);font-weight:800;font-size:15px;color:var(--plum-deep)} .org-host{font-family:var(--sans);font-size:13px;color:var(--ink-faint)} .entity-ref{font-weight:700;white-space:nowrap} .related,.further-grid{margin:20px auto 0;max-width:var(--wrap);padding:0 40px} .related{border-top:1.5px dashed var(--gold);padding-top:30px} .related h2{font-family:var(--serif);font-style:italic;font-size:30px;margin-bottom:18px} .related-links,.further-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .related-links li a,.further-grid a{display:flex;flex-direction:column;gap:6px;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:10px;padding:18px 20px;height:100%;transition:box-shadow .2s,transform .2s} .related-links li a:hover,.further-grid a:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .related-links .rl-tag,.further-grid .rl-tag{font-family:var(--hand);font-size:19px;letter-spacing:0;text-transform:none;color:var(--coral)} .related-links .rl-title,.further-grid .rl-title{font-family:var(--serif);font-size:22px;color:var(--plum-deep);line-height:1.15} .endnote{max-width:var(--measure);margin:36px auto 0;padding:26px 40px;display:flex;gap:18px;align-items:center} .endnote .en-mark{font-size:34px;color:var(--gold);flex:none} .endnote p{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--ink-soft);margin:0} /* ================= CATEGORY / INDEX ================= */ .cat-hero{padding:56px 0 40px;text-align:center;border-bottom:1.5px dashed var(--gold);position:relative} .cat-hero .kicker{color:var(--cat-accent,var(--coral))} .cat-hero h1{font-family:var(--serif);font-style:italic;font-size:clamp(44px,6vw,66px);margin:8px 0 0} .cat-hero .cat-blurb{font-family:var(--serif);font-size:23px;color:var(--ink-soft);max-width:34ch;margin:14px auto 0} .cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0} .cat-list li{border-bottom:1.5px dashed var(--line)} .cat-row{display:grid;grid-template-columns:130px 1fr auto;gap:26px;align-items:center;padding:24px 0} .cat-row .cr-fig{width:130px;height:88px;border-radius:8px;overflow:hidden;background:var(--paper-2);padding:6px} .cat-row .cr-fig img{width:100%;height:100%;object-fit:cover;border-radius:4px} .cat-row .cr-title{font-family:var(--serif);font-size:28px;color:var(--plum-deep);line-height:1.1;display:block} .cat-row:hover .cr-title{color:var(--coral)} .cat-row .cr-dek{font-size:16px;color:var(--ink-soft);margin:6px 0 0;max-width:60ch;display:block} .cat-row .cr-read{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink-faint);white-space:nowrap} .hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin:44px 0} .hub-card{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:30px 30px 34px;box-shadow:var(--shadow);border-top:4px solid var(--hub-accent,var(--coral))} .hub-card h2{font-family:var(--serif);font-style:italic;font-size:32px} .hub-card .hc-no{font-family:var(--hand);font-size:22px;color:var(--hub-accent,var(--coral))} .hub-card p{font-size:16px;color:var(--ink-soft);margin:8px 0 16px} .hub-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .hub-card ul a{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--plum)} .hub-card ul a:hover{color:var(--coral)} .page{max-width:var(--measure);margin:0 auto;padding:56px 40px 40px} .page h1{font-family:var(--serif);font-style:italic;font-size:clamp(40px,5vw,58px);margin-bottom:.3em} .page .lead{margin-bottom:1em} .page h2{font-family:var(--serif);font-style:italic;font-size:30px;margin:1.4em 0 .4em} .page h2 .secnum{font-family:var(--hand);font-style:normal;font-size:24px;color:var(--gold);display:block} .contact-methods{list-style:none;margin:24px 0;padding:0;display:grid;gap:14px} .contact-methods li{display:flex;gap:16px;align-items:center;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:16px 20px} .contact-methods svg{width:26px;height:26px;color:var(--coral);flex:none} .notfound{text-align:center;padding:90px 40px} .notfound .big{font-family:var(--hand);font-size:120px;color:var(--gold);line-height:1} /* styleguide */ .sg-section{max-width:var(--wrap);margin:0 auto;padding:36px 40px} .sg-section>h2{font-family:var(--serif);font-style:italic;font-size:32px;border-bottom:1.5px dashed var(--gold);padding-bottom:10px;margin-bottom:24px} .sg-note{color:var(--ink-faint);font-size:14px;margin:-14px 0 22px} .sg-swatches{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px} .sw{width:120px;border-radius:10px;overflow:hidden;border:1px solid var(--line);font-family:var(--sans);font-size:12px} .sw .chip{height:70px}.sw .lab{padding:8px 10px;background:var(--paper-2)} .type-row{display:flex;align-items:baseline;gap:16px;border-bottom:1px dashed var(--line);padding:10px 0} .type-row span{font-family:var(--sans);font-size:12px;color:var(--ink-faint);width:110px;flex:none} /* ================= RESPONSIVE ================= */ @media(max-width:900px){ body{font-size:18px} .hero-grid,.little .little-grid,.signoff-inner,.foot-grid,.feature{grid-template-columns:1fr} .cards,.cards.two{grid-template-columns:repeat(2,1fr)} .hero-fig{transform:none} .feature .card-fig img{min-height:240px} .article-body .breakout{width:100%;margin-left:0} .little .little-grid{gap:36px;padding:40px 34px} } @media(max-width:640px){ .wrap,.article-body,.related,.further-grid,.post-hero .ph-inner,.page,.sg-section{padding-left:22px;padding-right:22px} .nav-burger{display:inline-flex;align-items:center;gap:9px;margin:6px auto 6px;padding:11px 22px;border:1px solid var(--gold);border-radius:24px;background:var(--paper-2);color:var(--plum);font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer} .nav-burger:hover{background:var(--coral);color:#fff;border-color:var(--coral)} .nav{display:none;flex-direction:column;align-items:stretch;gap:8px;width:100%;max-width:300px;margin:6px auto 4px;padding:4px 0 8px} .nav-check:checked~.nav{display:flex} .nav a{padding:12px 14px;font-size:12.5px;text-align:center;width:100%} .cards,.cards.two{grid-template-columns:1fr} .article-body{font-size:18px} .post-hero{height:auto;min-height:0;display:block} .post-hero img{position:relative;height:56vw;min-height:220px} .post-hero .scrim{display:none} .post-hero .ph-inner{color:var(--ink);padding:22px 22px 6px;background:transparent} .post-hero h1{color:var(--plum-deep);text-shadow:none;font-size:clamp(30px,8vw,42px)} .post-hero .post-dek{color:var(--ink-soft);text-shadow:none} .post-hero .meta{color:var(--ink-faint)} .post-hero .meta .tag{color:var(--coral)} .cat-row{grid-template-columns:1fr;gap:10px} .cat-row .cr-fig{width:100%;height:52vw;max-height:220px} .cat-row .cr-read{order:-1} .timeline li,.versus tbody tr{grid-template-columns:1fr} .pullquote p{font-size:24px} .lead{font-size:22px} .foot-base{flex-direction:column} .signoff-inner{padding:28px 22px} .little li .li-said{font-size:21px} .supporter-inner{grid-template-columns:1fr;text-align:center;justify-items:center} .sponsor img{width:220px} .mast-inner::before{width:120px} } /* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry. It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px in the SAME ROW. The operator's rule is that the dark ground is unified whatever the logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */ [class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent} /* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or bold; opacity is folded in, because it compounds down the tree and computed colour ignores it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size, weight, family and spacing are exactly as delivered. */ .sponsor-blurb.sponsor-blurb{color:rgb(125,105,94)!important;opacity:1!important} /* op-strip-4up: operator asked for four per row. auto-fill at minmax(200px,1fr) was fitting five across the back pages. Desktop only — Design's auto-fill still decides narrow screens. */ @media (min-width:900px){ .supporters-strip{grid-template-columns:repeat(4,1fr)} } /* op-bold-brands: operator asked for bold brand names. They were plain text at the head of each sentence with no element to select, so embolden_brand.py set them in the estate's own . sp-text-contrast above pins the blurb colour with !important on the blurb element; the emphasis takes the fuller ink so the name separates from its sentence. */ .sponsor .sponsor-blurb .sp-brand{font-weight:700;color:var(--ink)} /* op-close-the-gaps: with four columns the track is 268px but the tile sized itself to its widest child — a 190px plate and a 210px-capped sentence — so each tile sat in the middle of its column and the band read as huge gutters. Let the plate and the copy take the column they are given; the grid's own 22px gap is then the only gap. */ .supporters-strip .sponsor .sp-logo{display:block;width:100%} .supporters-strip .sponsor img{width:100%} .supporters-strip .sponsor .sponsor-blurb{max-width:none} /* ⚠️ width:100% ON THE IMAGE ALONE LEFT FOUR PLATES NARROWER THAN THE OTHER EIGHT. The mark sits in an