/* ========================================================================== Chloe — design system Hybrid direction: Atelier palette/voice site-wide, Studio structure for Work/Lab, Garden's orbit + "currently" moments as personality accents. Token names are deliberately CSS-custom-property based so this maps cleanly to WordPress theme.json / global styles later. ========================================================================== */ :root{ /* colour — white-forward, one restrained accent instead of three competing warm tones */ --c-bg: #FFFFFF; --c-bg-alt: #F8F6F3; /* whisper of warmth for alternating sections, not a colour block */ --c-surface: #FFFFFF; --c-blush: #F2E3DE; /* used only in thumbnail/placeholder gradients */ --c-rose: #DCB8AE; --c-mauve: #C7B7AC; /* decorative only — thumbnail gradients */ --c-taupe: #7A6F62; /* used as legible text (meta, "on hold" status) — passes AA on white, but fails on the dark footer */ --c-taupe-dark:#9A8E80; /* lightened variant for taupe text on the dark ink footer — 5.28:1, was 3.45:1 */ --c-ink: #201C19; --c-ink-soft: #736A60; --c-rule: #E9E4DC; --c-wine: #A62A48; /* the one accent — a true raspberry-red, no brown undertone */ --c-wine-deep: #841F39; /* hover/pressed state for the accent */ --c-wine-tint: #FBEAEE; /* pale wash for tag/badge backgrounds only */ /* type — loaded via Google Fonts link in ; see fonts.googleapis.com request */ --f-display: "Bricolage Grotesque", "Public Sans", -apple-system, "Segoe UI", sans-serif; --f-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* scale */ --step-0: clamp(2.8rem, 7.2vw, 5.6rem); --step-1: clamp(2.4rem, 5.6vw, 4.4rem); --step-2: clamp(1.9rem, 4vw, 2.9rem); --step-3: clamp(1.4rem, 2.4vw, 1.8rem); /* shape */ --radius-sm: 4px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* elevation — one consistent pair of card shadows instead of a different value per component */ --shadow-card: 0 6px 16px rgba(54,37,48,.07); --shadow-card-hover: 0 18px 34px rgba(54,37,48,.14); --nav-h: 76px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--c-bg); color:var(--c-ink); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} button{font-family:inherit;} h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;} p{margin:0;} .container{max-width:1160px;margin:0 auto;padding:0 32px;} @media (max-width:640px){ .container{padding:0 22px;} } .eyebrow{ font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--c-wine);font-weight:600;font-family:var(--f-body); } .italic{font-style:italic;} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* focus */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--c-wine);outline-offset:3px;border-radius:2px; } /* buttons */ .btn{ display:inline-flex;align-items:center;gap:8px; font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:600; padding:16px 32px;border-radius:var(--radius-pill); border:1px solid var(--c-ink);cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .btn-primary{background:var(--c-wine);border-color:var(--c-wine);color:#fff;} .btn-primary:hover{background:var(--c-wine-deep);border-color:var(--c-wine-deep);transform:translateY(-1px);} .btn-ghost{background:transparent;color:var(--c-ink);border-color:var(--c-rule);} .btn-ghost:hover{border-color:var(--c-wine);color:var(--c-wine);transform:translateY(-1px);} /* ========================================================================== Header / primary nav ========================================================================== */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.92);backdrop-filter:blur(8px); border-bottom:1px solid var(--c-rule); height:var(--nav-h); } .site-header .container{ height:100%;display:flex;align-items:center;justify-content:space-between; } .wordmark{ font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--c-ink); } .primary-nav{display:flex;align-items:center;gap:30px;} .primary-nav ul{display:flex;gap:26px;} .primary-nav ul a{ font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-soft); padding:6px 2px;border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease; } .primary-nav ul a:hover,.primary-nav ul a[aria-current="page"]{color:var(--c-wine);border-color:var(--c-wine);} .nav-toggle{ display:none;background:none;border:none;cursor:pointer;padding:14px 11px; flex-direction:column;gap:5px;justify-content:center; } .nav-toggle span{width:22px;height:2px;background:var(--c-ink);display:block;transition:transform .2s ease,opacity .2s ease;} @media (max-width:900px){ /* The header's backdrop-filter makes it the containing block for any position:fixed descendant, so the menu panel below sized itself against the 76px header instead of the viewport — it collapsed to nothing and the links spilled over the page with no background behind them. The blur is a desktop nicety; drop it here and the panel positions against the viewport as intended. */ .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;} .primary-nav{ position:fixed;inset:var(--nav-h) 0 0 0;background:var(--c-bg); flex-direction:column;align-items:flex-start;padding:36px 28px; overflow-y:auto;overscroll-behavior:contain; transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility .2s ease; } .primary-nav.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} .primary-nav ul{flex-direction:column;gap:4px;width:100%;} .primary-nav ul a{display:block;padding:14px 4px;font-size:15px;border-bottom:1px solid var(--c-rule);width:100%;} /* Full width reads as deliberate; left-aligned text in a pill does not. */ .primary-nav .btn{margin-top:22px;align-self:stretch;justify-content:center;} .nav-toggle{display:flex;} } body.nav-open{overflow:hidden;} /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:var(--c-ink);color:var(--c-bg);padding:64px 0 32px;margin-top:120px; } .footer-top{ display:flex;justify-content:space-between;align-items:flex-end;gap:32px; flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.16); } .footer-top h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);max-width:16ch;} .footer-links{display:flex;gap:48px;flex-wrap:wrap;} .footer-links h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-taupe-dark);margin-bottom:14px;} .footer-links ul{display:flex;flex-direction:column;gap:9px;} .footer-links a{font-size:13.5px;color:var(--c-bg);opacity:.85;} .footer-links a:hover{opacity:1;color:var(--c-blush);} .footer-bottom{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; padding-top:24px;font-size:11.5px;color:var(--c-taupe-dark);letter-spacing:.02em; } /* ========================================================================== Sections / rhythm ========================================================================== */ .section{padding:104px 0;} .section-alt{background:var(--c-bg-alt);} .section-head{max-width:640px;margin-bottom:48px;} .section-head h2{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);line-height:1.08;letter-spacing:-.02em;margin-top:10px;} .section-head p{margin-top:16px;color:var(--c-ink-soft);font-size:15px;line-height:1.7;} .section-foot{margin-top:44px;} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;} .reveal.is-visible{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} } /* ========================================================================== About — editorial portrait and story ========================================================================== */ .about-story-grid{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:clamp(32px,6vw,80px);align-items:center;max-width:1040px;} .about-portrait{position:relative;margin:0;} .about-portrait::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--c-rule);border-radius:var(--radius-md);pointer-events:none;} .about-portrait img{position:relative;display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 48%;border-radius:var(--radius-md);} .about-story-copy{max-width:640px;} .about-story-copy h2{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);line-height:1.08;letter-spacing:-.02em;margin-top:14px;} .about-story-copy p{margin-top:22px;font-size:16px;line-height:1.8;color:var(--c-ink-soft);} .about-story-copy p + p{margin-top:18px;} @media (max-width:720px){.about-story-grid{grid-template-columns:1fr;gap:38px;}.about-portrait{max-width:340px;margin-left:14px;}.about-portrait img{aspect-ratio:4/5;object-position:50% 44%;}} /* ========================================================================== Hero ========================================================================== */ .hero{ min-height:640px;padding:100px 0 90px; background:radial-gradient(circle at 73% 44%,#8B2B43 0 19%,transparent 19.2%),linear-gradient(112deg,#4A0919 0%,var(--c-wine) 64%,#7B1832 100%); color:#fff;position:relative;overflow:hidden; } .hero::before{ content:"";position:absolute;width:min(58vw,700px);aspect-ratio:1;right:clamp(-170px,-8vw,-50px);top:42px; border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 36px rgba(255,255,255,.035);pointer-events:none; } .hero::after{ content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(41,2,13,.16),transparent 54%,rgba(45,4,16,.22));pointer-events:none; } .hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;} .hero-text{position:relative;z-index:2;min-width:0;} .hero .eyebrow{margin-bottom:22px;display:block;color:rgba(255,255,255,.8);} .hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.3rem,4.6vw,4rem);line-height:1;letter-spacing:-.03em;max-width:15ch;color:#fff;} .accent-word{background:#fff;color:var(--c-wine);padding:0 .18em;border-radius:6px;display:inline-block;} .hero .lede{margin-top:26px;max-width:46ch;font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.85);} .hero .hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;} .hero .btn-primary{background:#fff;border-color:#fff;color:var(--c-wine);} .hero .btn-primary:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff;} .hero .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;} .hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12);} /* A feathered editorial cut-out rather than a photo card: the portrait dissolves into the hero. */ .hero-photo{position:absolute;z-index:1;right:0;bottom:-91px;width:min(43vw,500px);height:650px;pointer-events:none;} .hero-photo::before,.hero-photo::after{display:none;} .hero-photo-frame{position:relative;width:100%;height:100%;overflow:visible;background:none;border:none;border-radius:0;display:block;} .hero-photo-frame img{ width:100%;height:100%;object-fit:contain;object-position:50% 100%; filter:saturate(.84) contrast(1.04) drop-shadow(-18px 20px 28px rgba(41,2,13,.2)); } @media (max-width:820px){ .hero{min-height:0;padding:80px 0 64px;} .hero::before{width:430px;right:-110px;top:28px;} .hero .container{grid-template-columns:1fr;gap:0;} .hero-photo{position:relative;order:-1;right:auto;bottom:auto;width:min(310px,76vw);height:410px;margin:0 auto 18px;} .hero-photo-frame img{object-position:50% 100%;} } @media (max-width:640px){ .hero{padding:54px 0 64px;} .hero-photo{height:350px;margin-bottom:10px;} .hero .eyebrow{font-size:10px;letter-spacing:.11em;line-height:1.65;overflow-wrap:anywhere;} .hero h1{font-size:clamp(2.3rem,12vw,3.2rem);} .hero .hero-actions{margin-top:28px;} } /* ========================================================================== Intro strip (gradually-discovering-me paragraph) ========================================================================== */ .intro-strip{border-top:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule);} .intro-strip .container{padding:56px 32px;display:grid;grid-template-columns:.4fr 1fr;gap:32px;} .intro-strip .label{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--c-wine);} .intro-strip p{font-size:18px;line-height:1.65;max-width:56ch;} @media (max-width:760px){ .intro-strip .container{grid-template-columns:1fr;gap:14px;} } /* ========================================================================== Currently ticker — solid colour block, not just an outline ========================================================================== */ .currently{background:var(--c-wine);} .currently .eyebrow{color:rgba(255,255,255,.78);} .currently .section-head h2{color:#fff;} .currently .section-head p{color:rgba(255,255,255,.82);} .currently-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-md);overflow:hidden;} .currently-item{background:var(--c-wine);padding:26px 22px;} .currently-item .tag{ font-family:var(--f-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.75);display:block;margin-bottom:10px; } .currently-item strong{display:block;font-size:15.5px;line-height:1.4;font-weight:600;color:#fff;} @media (max-width:820px){ .currently-grid{grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .currently-grid{grid-template-columns:1fr;} } /* ========================================================================== Orbit — Explore My World ========================================================================== */ .orbit-section{text-align:center;} .orbit-wrap{ position:relative;width:min(420px,84vw);height:min(420px,84vw);margin:56px auto 0; } .orbit-ring{position:absolute;inset:0;border:1px dashed var(--c-rule);border-radius:50%;} .orbit-ring.inner{inset:15%;border-style:dotted;} .orbit-center{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:120px;height:120px;border-radius:50%;background:var(--c-wine);color:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; } .orbit-center span{font-family:var(--f-display);font-weight:700;font-size:26px;} .orbit-center small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;} .orbit-node{ position:absolute;transform:translate(-50%,-50%); background:var(--c-surface);border:1px solid var(--c-rule); border-radius:var(--radius-pill);padding:12px 20px; font-family:var(--f-display);font-weight:700;font-size:16px; box-shadow:0 6px 16px rgba(54,37,48,.08); transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; white-space:nowrap; } .orbit-node:hover,.orbit-node:focus-visible{ background:var(--c-wine);color:var(--c-bg);transform:translate(-50%,-50%) scale(1.08); box-shadow:0 10px 24px rgba(110,42,58,.28); } .orbit-node .sub{display:block;font-family:var(--f-body);font-style:normal;font-size:9.5px; text-transform:uppercase;letter-spacing:.08em;opacity:.65;margin-top:2px;text-align:center;} .orbit-caption{margin-top:36px;color:var(--c-ink-soft);font-size:13.5px;max-width:44ch;margin-inline:auto;} @media (max-width:520px){ .orbit-wrap{height:auto;position:static;display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:32px;} .orbit-ring{display:none;} .orbit-center{position:static;transform:none;width:96px;height:96px;} .orbit-node{position:static;transform:none;width:100%;max-width:280px;text-align:center;} .orbit-node:hover,.orbit-node:focus-visible{transform:none;} } /* ========================================================================== Project cards (Selected Projects) ========================================================================== */ .project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;} .project-card{ background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--radius-lg); padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);min-width:0; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--c-rose);} .project-card .status{ align-self:flex-start;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700; padding:5px 13px;border-radius:var(--radius-pill);border:1px solid var(--c-wine);background:var(--c-wine);color:#fff; } .project-card .status.on-hold{border-color:var(--c-taupe);background:var(--c-taupe);color:#fff;} .project-card .status.live{border-color:var(--c-ink);background:var(--c-ink);color:#fff;} .project-card .thumb{ height:200px;border-radius:var(--radius-sm);overflow:hidden; background:linear-gradient(155deg,var(--c-blush),var(--c-rose) 60%,var(--c-mauve)); } .project-card .thumb img{ width:100%;height:100%;object-fit:cover;object-position:top center;display:block; } .project-card h3{font-family:var(--f-display);font-weight:700;font-size:22px;} .project-card p{font-size:13.5px;line-height:1.65;color:var(--c-ink-soft);} .project-card .meta{font-size:11px;color:var(--c-ink-soft);letter-spacing:.03em;font-variant-numeric:tabular-nums;} .project-card .card-link{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-wine);font-weight:600;margin-top:auto;} .project-card .card-link:hover{text-decoration:underline;} /* ========================================================================== Journal preview cards ========================================================================== */ .journal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;} .journal-card{display:flex;flex-direction:column;gap:12px;min-width:0;} .journal-card .thumb{height:170px;border-radius:var(--radius-sm);overflow:hidden;} .journal-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;} .journal-card .cat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-wine);} .journal-card h3{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.3;} .journal-card h3 a{color:inherit;text-decoration:none;} .journal-card h3 a:hover{color:var(--c-wine);} .journal-card p{font-size:13px;color:var(--c-ink-soft);line-height:1.6;} .journal-card time{font-size:11px;color:var(--c-ink-soft);opacity:.7;} /* ========================================================================== Loving / recommendations strip ========================================================================== */ .loving-strip{display:flex;gap:20px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin;} .loving-item{ flex:0 0 200px;background:var(--c-surface);border:1px solid var(--c-rule); border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .loving-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--c-rose);} .loving-item .thumb{height:120px;border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;} .loving-item .thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .loving-item .cat{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-wine);} .loving-item h4{font-size:14px;margin-top:4px;font-weight:600;} .loving-item p{font-size:12px;color:var(--c-ink-soft);margin-top:4px;line-height:1.5;} .loving-item .shop-link,.obsession-callout .shop-link{ display:inline-flex;align-items:center;gap:6px;margin-top:10px; font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-wine);font-weight:600; } .loving-item .shop-link:hover,.obsession-callout .shop-link:hover{text-decoration:underline;} .loving-item .shop-link .affiliate-tag,.obsession-callout .shop-link .affiliate-tag{ font-size:10px;color:var(--c-ink-soft);opacity:.75;text-transform:none;letter-spacing:0;font-weight:400; } /* ========================================================================== Professional strip (Studio-influenced, structured — light, not a colour block) ========================================================================== */ .pro-strip{border-top:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule);overflow-x:hidden;} .pro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid var(--c-rule);} .pro-stat{padding:30px 36px;border-right:1px solid var(--c-rule);min-width:0;} .pro-stat:first-child{padding-left:0;} .pro-stat:last-child{padding-right:0;border-right:none;} .pro-stat{display:flex;flex-direction:column;} .pro-stat b{display:block;font-family:var(--f-display);font-weight:700;font-size:32px;font-variant-numeric:tabular-nums;color:var(--c-wine);margin-bottom:8px;} .pro-stat span{display:block;font-size:11.5px;line-height:1.5;letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink-soft);min-height:2.9em;} @media (max-width:820px){ .pro-grid{grid-template-columns:1fr 1fr;} .pro-stat{border-bottom:1px solid var(--c-rule);padding:24px 20px;} } /* ========================================================================== Contact CTA (homepage) ========================================================================== */ .contact-cta{text-align:center;background:var(--c-wine);} .contact-cta .eyebrow{color:rgba(255,255,255,.78);} .contact-cta h2{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);max-width:20ch;margin:14px auto 0;color:#fff;} .contact-cta p{max-width:48ch;margin:18px auto 0;color:rgba(255,255,255,.82);} .contact-cta .hero-actions{justify-content:center;margin-top:30px;} .contact-cta .btn-primary{background:#fff;border-color:#fff;color:var(--c-wine);} .contact-cta .btn-primary:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff;} /* ========================================================================== Generic page hero (for interior pages) ========================================================================== */ .page-hero{ padding:104px 0 84px;background:var(--c-wine);color:#fff;position:relative;overflow:hidden; } .page-hero::before{ content:"";position:absolute;right:-150px;top:-150px;width:400px;height:400px; border:1px solid rgba(255,255,255,.16);border-radius:50%;pointer-events:none; } .page-hero .container{position:relative;z-index:1;} .page-hero .eyebrow{color:rgba(255,255,255,.8);} .page-hero h1{font-family:var(--f-display);font-weight:800;font-size:var(--step-1);line-height:1.0;letter-spacing:-.025em;max-width:16ch;color:#fff;} .page-hero p{margin-top:20px;max-width:56ch;color:rgba(255,255,255,.85);font-size:16px;line-height:1.7;} .page-hero .hero-actions{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .page-hero .hero-actions .btn-primary{background:#fff;border-color:#fff;color:var(--c-wine);} .page-hero .hero-actions .btn-primary:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff;} .page-hero .pay-note{font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.75);} @media (max-width:640px){ .page-hero{padding:76px 0 56px;} .page-hero::before{display:none;} } /* ========================================================================== Article (single Journal post) ========================================================================== */ .article-header{padding:64px 0 40px;border-bottom:1px solid var(--c-rule);} .article-header .container{max-width:700px;} .article-header .back-link{ font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-soft); display:inline-flex;align-items:center;gap:6px;margin-bottom:28px; } .article-header .back-link:hover{color:var(--c-wine);} .article-header h1{ font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.08;letter-spacing:-.02em;margin-top:14px; } .article-header .dek{margin-top:16px;font-size:17px;color:var(--c-ink-soft);line-height:1.6;max-width:56ch;} .article-meta{display:flex;gap:14px;align-items:center;margin-top:20px;font-size:13px;color:var(--c-ink-soft);} .article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--c-ink-soft);} .article-body{padding:56px 0 40px;} .article-body .container{max-width:700px;} .article-body p{font-size:17px;line-height:1.8;color:var(--c-ink);margin-bottom:20px;} .article-body h2{ font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.01em; margin:52px 0 20px;line-height:1.2; } .article-body ul{margin:0 0 24px;padding-left:22px;} .article-body li{font-size:17px;line-height:1.75;color:var(--c-ink);margin-bottom:8px;} .article-body blockquote{ margin:40px 0;padding-left:22px;border-left:3px solid var(--c-wine); font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.4;letter-spacing:-.01em; } .article-image-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:36px 0;} .article-image-pair img{width:100%;height:220px;object-fit:cover;border-radius:12px;background:var(--c-bg-alt);display:block;} .article-image-pair figcaption{margin-top:8px;font-size:12px;color:var(--c-ink-soft);text-align:center;} .article-figure{margin:36px 0;} .article-figure img{display:block;width:100%;border:1px solid var(--c-rule);border-radius:var(--radius-sm);background:var(--c-bg-alt);} .article-figure figcaption{margin-top:10px;font-size:12px;line-height:1.55;color:var(--c-ink-soft);text-align:center;} @media (max-width:560px){ .article-image-pair{grid-template-columns:1fr;} } .article-placeholder{ border:1px dashed var(--c-rule);border-radius:var(--radius-md); padding:36px 24px;text-align:center;margin:36px 0;background:var(--c-bg-alt); } .article-placeholder span{ font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-soft);font-weight:600; } .article-footer{padding:20px 0 80px;} .article-footer .container{max-width:700px;border-top:1px solid var(--c-rule);padding-top:32px;} /* brand accordion (Work page) */ .brand-accordion{border-top:1px solid var(--c-rule);} .brand-item{border-bottom:1px solid var(--c-rule);} .brand-trigger{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:22px 4px;margin:0 -4px;width:calc(100% + 8px);background:none;border:none;cursor:pointer; text-align:left;font-family:inherit;border-radius:var(--radius-sm); transition:background .15s ease; } .brand-trigger:hover{background:var(--c-bg-alt);} .brand-trigger:hover .brand-name{color:var(--c-wine);} .brand-trigger .brand-label{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .brand-mark{height:28px;width:auto;max-width:100px;object-fit:contain;} .brand-trigger .brand-name{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--c-ink);transition:color .15s ease;} .brand-trigger .brand-focus{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-wine);} .brand-trigger .chevron{width:18px;height:18px;flex-shrink:0;transition:transform .2s ease;stroke:var(--c-ink-soft);} .brand-item.is-open .chevron{transform:rotate(180deg);} .brand-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;} .brand-item.is-open .brand-panel{max-height:220px;} .brand-panel-inner{padding:0 4px 24px;font-size:14px;line-height:1.7;color:var(--c-ink-soft);max-width:64ch;} .brand-link{ display:inline-flex;align-items:center;gap:4px;margin-top:12px; font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-wine);font-weight:600; } .brand-link:hover{text-decoration:underline;} /* coming-soon panel */ .soon-panel{ border:1px solid var(--c-rule);border-radius:var(--radius-md); background:var(--c-surface);padding:40px;margin-top:8px; } .soon-panel .eyebrow{margin-bottom:14px;} .soon-panel h3{font-family:var(--f-display);font-weight:700;font-size:24px;margin-bottom:14px;} .soon-outline{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;margin-top:24px;} .soon-outline li{font-size:13.5px;color:var(--c-ink-soft);padding:10px 0;border-bottom:1px dashed var(--c-rule);} @media (max-width:600px){ .soon-outline{grid-template-columns:1fr;} } /* filter pills (Journal / Recommendations) */ .filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;} .filter-pill{ font-size:12px;letter-spacing:.03em;text-transform:uppercase; padding:15px 20px;border-radius:var(--radius-pill);border:1px solid var(--c-rule); background:var(--c-surface);cursor:pointer;color:var(--c-ink-soft); transition:background .15s ease,color .15s ease,border-color .15s ease; } .filter-pill:hover{border-color:var(--c-wine);color:var(--c-wine);} .filter-pill.is-active{background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink);} .rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;} .rec-grid .loving-item{flex:none;min-width:0;} .content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .content-tile{ aspect-ratio:1;border-radius:var(--radius-sm);position:relative;overflow:hidden; display:flex;align-items:flex-end; } .content-tile span{ font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff; background:rgba(36,30,26,.45);padding:6px 10px;margin:10px;border-radius:var(--radius-pill); } @media (max-width:820px){ .content-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:560px){ .content-grid{grid-template-columns:1fr 1fr;} } .social-row{display:flex;gap:16px;flex-wrap:wrap;} .social-card{ flex:1;min-width:200px;background:var(--c-surface);border:1px solid var(--c-rule); border-radius:var(--radius-lg);padding:24px;text-align:center;box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .social-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--c-rose);} .social-card .platform{font-family:var(--f-display);font-weight:700;font-size:20px;} .social-card p{font-size:12.5px;color:var(--c-ink-soft);margin-top:8px;} .static-tag{ font-size:12px;letter-spacing:.03em; padding:9px 18px;border-radius:var(--radius-pill);border:1px solid var(--c-rule); background:var(--c-surface);color:var(--c-ink-soft); } /* contact form */ .contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;} .contact-form{display:flex;flex-direction:column;gap:18px;} .field label{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-soft);margin-bottom:8px;} .field input,.field select,.field textarea{ width:100%;border:1px solid var(--c-rule);border-radius:var(--radius-sm); padding:13px 14px;font-family:var(--f-body);font-size:14.5px;background:var(--c-surface);color:var(--c-ink); } .field textarea{resize:vertical;min-height:120px;} .form-note{font-size:12px;color:var(--c-ink-soft);opacity:.8;} .form-status{font-size:13.5px;padding:14px 16px;border-radius:var(--radius-sm);display:none;} .form-status.is-visible{display:block;} .form-status.ok{background:var(--c-wine-tint);color:var(--c-wine);border:1px solid var(--c-wine);} .quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;} .quote-card{ background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--radius-lg); padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);min-width:0; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--c-rose);} .quote-card p{font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.5;} .quote-card footer{font-size:12.5px;color:var(--c-ink-soft);} .obsession-callout{ background:var(--c-wine-tint);border:1px solid var(--c-wine);border-radius:var(--radius-lg); padding:22px 26px;display:flex;align-items:center;gap:20px; } .obsession-callout .thumb{width:64px;height:64px;border-radius:var(--radius-sm);flex-shrink:0;overflow:hidden;} .obsession-callout .thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .obsession-callout .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-wine);font-weight:700;display:block;margin-bottom:6px;} .obsession-callout h4{font-size:16px;font-weight:600;} .obsession-callout p{font-size:13px;color:var(--c-ink-soft);margin-top:4px;} @media (max-width:560px){ .obsession-callout{flex-direction:column;align-items:flex-start;} } .logo-strip{display:flex;flex-wrap:wrap;gap:16px;} .logo-card{ width:150px;padding:20px 14px;border:1px solid var(--c-rule);border-radius:var(--radius-lg); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center; box-shadow:var(--shadow-card);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .logo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--c-rose);} .logo-card .mark{ width:44px;height:44px;border-radius:50%;background:var(--c-bg-alt); display:flex;align-items:center;justify-content:center; font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--c-wine); } .logo-card img.mark{background:none;border-radius:0;width:auto;height:44px;max-width:100%;object-fit:contain;} .logo-card span{font-size:12px;color:var(--c-ink-soft);line-height:1.35;} .phrase-cloud{display:flex;flex-wrap:wrap;gap:10px;} .phrase-cloud li{ font-size:13px;color:var(--c-ink-soft);background:var(--c-bg-alt); padding:8px 15px;border-radius:var(--radius-pill); } .word-cloud{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;} .word-cloud span{font-family:var(--f-display);font-weight:700;line-height:1;} .word-cloud .w1{font-size:15px;font-weight:500;color:var(--c-ink-soft);} .word-cloud .w2{font-size:20px;color:var(--c-ink);} .word-cloud .w3{font-size:29px;color:var(--c-ink);} .word-cloud .w4{font-size:42px;color:var(--c-wine);} @media (max-width:640px){ .word-cloud .w4{font-size:32px;} .word-cloud .w3{font-size:23px;} } .contact-reasons{display:flex;flex-direction:column;gap:20px;} .contact-reasons li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--c-rule);} .contact-reasons b{font-family:var(--f-display);font-weight:700;font-size:17px;min-width:130px;color:var(--c-wine);} .contact-reasons span{font-size:13.5px;color:var(--c-ink-soft);line-height:1.6;} @media (max-width:820px){ .contact-layout{grid-template-columns:1fr;gap:40px;} .contact-reasons b{min-width:auto;} } /* ========================================================================== Build log pages (/lab//) — scoped under .build-log so the log's own components can't collide with site-wide styles. ========================================================================== */ .build-log .hero-stats{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;} .build-log .hero-stats div{display:flex;flex-direction:column;} .build-log .hero-stats b{font-family:var(--f-display);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;} .build-log .hero-stats span{margin-top:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);} .build-log .hero-asof{margin-top:18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);} .build-log section.block{padding:72px 0;} .build-log section.block.alt{background:var(--c-bg-alt);} .build-log .section-head{display:flex;flex-direction:column;gap:4px;margin-bottom:32px;max-width:none;} .build-log .section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;line-height:1.1;margin-top:0;} .build-log .lede{margin:12px 0 0;max-width:62ch;color:var(--c-ink-soft);font-size:16px;line-height:1.7;} .build-log .chapter-head{padding-top:72px;} .build-log .chapter-head + section.block{padding-top:40px;} .build-log .hours{display:grid;grid-template-columns:96px 1fr 88px;gap:8px 14px;align-items:center;font-variant-numeric:tabular-nums;max-width:760px;} .build-log .hours .d{font-size:13px;font-weight:600;color:var(--c-ink-soft);white-space:nowrap;} .build-log .hours .d.is-off{color:var(--c-taupe);font-weight:500;opacity:.7;} .build-log .hours .track{position:relative;height:22px;background:var(--c-wine-tint);border-radius:var(--radius-sm);} .build-log .hours .fill{position:absolute;inset:0 auto 0 0;background:var(--c-wine);border-radius:var(--radius-sm);} .build-log .hours .n{font-size:14px;font-weight:700;color:var(--c-ink);white-space:nowrap;} .build-log .hours .n small{display:block;font-size:11.5px;font-weight:500;color:var(--c-ink-soft);white-space:normal;} .build-log .hours > *{min-width:0;} .build-log .hours .axis{grid-column:2;display:flex;justify-content:space-between;font-size:11px;color:var(--c-taupe);} .build-log .caveat{margin:14px 0 0;font-size:14px;color:var(--c-ink-soft);max-width:62ch;} .build-log .log{display:flex;flex-direction:column;border-top:1px solid var(--c-rule);} .build-log .day{display:grid;grid-template-columns:200px 1fr;gap:0 40px;padding:36px 0;border-bottom:1px solid var(--c-rule);} .build-log .when{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;} .build-log .when .date{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;} .build-log .when .dow{display:block;margin-top:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-soft);} .build-log .when .stat{display:inline-block;margin-top:12px;padding:4px 12px;border-radius:var(--radius-pill);background:var(--c-wine-tint);color:var(--c-wine-deep);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;} .build-log .when .sessions{margin:10px 0 0;padding:0;list-style:none;font-size:12px;color:var(--c-taupe);line-height:1.6;font-variant-numeric:tabular-nums;} .build-log .what h3{margin:0 0 10px;font-size:24px;line-height:1.15;letter-spacing:-.015em;} .build-log .what h3 span{color:var(--c-ink-soft);font-weight:500;} .build-log .what ul{margin:0;padding-left:20px;max-width:64ch;list-style:disc;} .build-log .what li{margin-bottom:6px;} .build-log .what li::marker{color:var(--c-wine);} .build-log .what .aside{margin:14px 0 0;padding:14px 18px;border-radius:var(--radius-md);background:var(--c-wine-tint);color:var(--c-wine-deep);font-size:14.5px;max-width:64ch;} .build-log .day.is-off .what{align-self:center;color:var(--c-taupe);font-style:italic;} .build-log .day.is-off .when .date{color:var(--c-taupe);} .build-log code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.9em;padding:1px 5px;border-radius:var(--radius-sm);background:var(--c-bg-alt);} .build-log .alt code{background:#fff;} .build-log .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;} .build-log .card{padding:24px 24px 20px;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);} .build-log .card h3{margin:0 0 8px;font-size:20px;line-height:1.2;letter-spacing:-.01em;} .build-log .card p,.build-log .card li{font-size:15px;margin:0;} .build-log .card ul{margin:0;padding-left:18px;list-style:disc;} .build-log .card li{margin-bottom:5px;} .build-log .card li::marker{color:var(--c-wine);} .build-log .card.is-wine{background:var(--c-wine);color:#fff;box-shadow:none;} .build-log .card.is-wine h3{color:#fff;} .build-log .card.is-wine li::marker{color:rgba(255,255,255,.7);} .build-log .next{margin:0;padding:0;list-style:none;display:grid;gap:0;max-width:760px;} .build-log .next li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-rule);font-size:15px;} .build-log .next li:last-child{border-bottom:none;} .build-log .next b{font-family:var(--f-display);font-weight:700;} .build-log .next span{color:var(--c-ink-soft);} .build-log footer.note{padding:28px 0 0;margin-top:40px;font-size:13px;color:var(--c-taupe);border-top:1px solid var(--c-rule);} @media (max-width:720px){ .build-log section.block{padding:52px 0;} .build-log .day{grid-template-columns:1fr;gap:14px;padding:28px 0;} .build-log .when{position:static;} .build-log .hours{grid-template-columns:72px 1fr 80px;} .build-log .next li{grid-template-columns:1fr;gap:2px;} } /* ========================================================================== Wishlist — text-first cards so an item never needs a placeholder image ========================================================================== */ .wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;} .wish-card{ background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--radius-lg); padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-card);min-width:0; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .wish-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--c-rose);} .wish-card .status{ align-self:flex-start;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700; padding:5px 13px;border-radius:var(--radius-pill);border:1px solid var(--c-wine);background:var(--c-wine);color:#fff; } .wish-card .status.gifted{border-color:var(--c-ink);background:var(--c-ink);} .wish-card .cat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-wine);} .wish-card .cat-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;} .wish-card .price{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--c-ink);white-space:nowrap;} .wish-card h3{font-size:22px;line-height:1.2;} .wish-card h3 a{color:inherit;} .wish-card p{font-size:14px;line-height:1.65;color:var(--c-ink-soft);} .wish-card p a{color:var(--c-wine);} .wish-card .thumb{height:180px;border-radius:var(--radius-sm);overflow:hidden;background:var(--c-bg-alt);} .wish-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;} .wish-card .wish-note{margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--c-ink-soft);border-top:1px dashed var(--c-rule);} .wish-card .shop-link{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-wine);font-weight:600;} .wish-card .shop-link:hover{text-decoration:underline;} .wish-card .wish-progress{display:flex;flex-direction:column;gap:7px;margin-top:2px;} .wish-card .wish-progress .bar{height:8px;border-radius:var(--radius-pill);background:var(--c-bg-alt);border:1px solid var(--c-rule);overflow:hidden;} .wish-card .wish-progress .fill{display:block;height:100%;width:0;background:var(--c-wine);border-radius:var(--radius-pill);transition:width .7s cubic-bezier(.2,.7,.2,1);} .wish-card .wish-progress .row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--c-ink-soft);} .wish-card .wish-progress .raised b{color:var(--c-ink);font-weight:700;} .wish-card .wish-progress .pct{font-weight:700;color:var(--c-wine);} .wish-card .wish-progress.is-complete .fill{background:var(--c-ink);} .wish-card .wish-progress.is-complete .pct{color:var(--c-ink);} .wish-card .wish-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px;} .wish-card .wish-actions .btn{padding:12px 22px;font-size:12px;} .wish-card .wish-actions span{font-size:12px;color:var(--c-ink-soft);} .coffee-block{background:var(--c-wine);color:#fff;padding:72px 0;} .coffee-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;} .coffee-cup{font-size:72px;line-height:1;} .coffee-block .eyebrow{color:rgba(255,255,255,.8);} .coffee-block h2{font-family:var(--f-display);font-weight:800;font-size:var(--step-2);line-height:1.05;letter-spacing:-.02em;color:#fff;margin-top:10px;} .coffee-block p{margin-top:14px;max-width:52ch;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.85);} .coffee-cta{display:flex;flex-direction:column;align-items:center;gap:10px;} .coffee-cta .btn-primary{background:#fff;border-color:#fff;color:var(--c-wine);padding:20px 40px;font-size:14px;} .coffee-cta .btn-primary:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff;} .coffee-cta span{font-size:12.5px;color:rgba(255,255,255,.75);} @media (max-width:820px){ .coffee-inner{grid-template-columns:1fr;gap:24px;text-align:left;} .coffee-cup{font-size:52px;} .coffee-cta{align-items:flex-start;} .coffee-block{padding:56px 0;} } /* ========================================================================== The visitors' book — comments on the Life Island build log ========================================================================== */ .comment-list{display:flex;flex-direction:column;gap:18px;margin-bottom:40px;} .comment-empty{font-size:14.5px;color:var(--c-ink-soft);font-style:italic;} .comment{background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-card);} .comment-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap;} .comment-head b{font-family:var(--f-display);font-weight:700;font-size:15.5px;color:var(--c-ink);} .comment-head time{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-soft);} .comment p{font-size:14.5px;line-height:1.7;color:var(--c-ink-soft);margin-top:6px;overflow-wrap:anywhere;} .comment p:first-of-type{margin-top:0;} .comment-form{background:var(--c-bg-alt);border:1px solid var(--c-rule);border-radius:var(--radius-lg);padding:28px;max-width:680px;} .comment-form h3{font-family:var(--f-display);font-weight:700;font-size:19px;margin-bottom:18px;} .comment-form .cf-row{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;position:relative;} .comment-form label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--c-ink);} .comment-form .req{color:var(--c-wine);} .comment-form input[type="text"],.comment-form textarea{ width:100%;font:inherit;font-size:15px;color:var(--c-ink); background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--radius-sm); padding:12px 14px;transition:border-color .18s ease, box-shadow .18s ease; } .comment-form input[type="text"]:focus,.comment-form textarea:focus{ outline:none;border-color:var(--c-wine);box-shadow:0 0 0 3px rgba(166,42,72,.12); } .comment-form textarea{resize:vertical;min-height:110px;line-height:1.6;} .comment-form .cf-count{align-self:flex-end;font-size:11.5px;color:var(--c-ink-soft);} /* Honeypot: off-screen for bots, invisible and unreachable for people. */ .comment-form .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .comment-form .cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .comment-form .cf-note{font-size:12.5px;color:var(--c-ink-soft);} .comment-form .btn[disabled]{opacity:.6;cursor:default;transform:none;} .comment-status{margin-top:14px;font-size:14px;line-height:1.6;display:none;} .comment-status.is-visible{display:block;} .comment-status.ok{color:var(--c-wine);font-weight:600;} .comment-status.bad{color:#B3261E;} @media (max-width:640px){ .comment-form{padding:22px 18px;} .comment{padding:18px;} } /* ========================================================================== Phone-only corrections (≤640px). Nothing in this block applies on desktop — every rule is inside the media query on purpose. ========================================================================== */ @media (max-width:640px){ /* iOS Safari zooms the whole page in when you focus a field whose text is smaller than 16px, and does not zoom back out afterwards. Bumping to 16px on phones only; desktop keeps its tighter 14.5/15px fields. */ .field input,.field select,.field textarea, .comment-form input[type="text"],.comment-form textarea{font-size:16px;} /* Footer links were 13.5px text in a 16px-tall box with no padding, which is a small target for a thumb. Taller hit area, same look. */ .footer-links ul a{display:inline-block;padding:6px 0;} /* Same reasoning for the "Read more →" style links on cards. */ .card-link{display:inline-block;padding:4px 0;} }