/* The Wanderess Travels — public site */ :root{ /* Brief 05 §1. Page ground is off-white, not pure white; the alternate band is a cream you can actually see. The previous pair differed by ~2%, so the section rhythm existed in the markup but not on screen. */ --paper:#FDFCF9; --cream:#F4EEE1; --ink:#14213D; --ink-soft:#1D2B4A; --gold:#E6B95A; /* buttons, rules, and text on ink only */ --gold-deep:#86661B; /* brief says #8A6A1F, but that measures 4.36:1 on cream and 4.27:1 on the sand tint — both under AA. Darkened the minimum needed to clear 4.5:1. */ --sable:#7A6A55; --line:#E2DACA; --line-soft:#EFE8DA; --text:#22283A; --text-2:#5A6472; /* Category tints. Set now rather than retrofitted across the article roadmap later; each follows its category everywhere it appears. */ --sea:#3F6B4E; --sea-bg:#E3EDE7; /* Plan & Budget */ --slate:#3C5680; --slate-bg:#E4EAF2; /* Destinations & Itineraries */ --sand:#86661B; --sand-bg:#F7EBD2; /* Where to Stay */ /* Existing names kept so every component picks the new palette up. */ /* Legacy names now point at the brand ink, so nothing on the site shows the old var(--ink) blue any more. */ --blue:var(--ink); --blue-dark:#0B1428; --ind:var(--ink); --ind-dark:#0B1428; --ink-2:var(--text); --grey:var(--text-2); --grey-2:#5A6472; --surface:var(--cream); --surface-2:#F8F3E9; --offwhite:#FDFCF9; --white:#fff; --serif:"Playfair Display",Georgia,"Times New Roman",serif; --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --wrap:1140px; --radius:10px; --shadow:0 1px 3px rgba(20,33,61,.06),0 8px 24px rgba(20,33,61,.06); } *,*::before,*::after{box-sizing:border-box} body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.7; color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.22; margin:0 0 .5em;font-weight:700} h1{font-size:clamp(2.1rem,4.4vw,3.25rem)} h2{font-size:clamp(1.55rem,2.7vw,2.15rem)} h3{font-size:1.3rem} p{margin:0 0 1.15em} a{color:var(--blue);text-decoration:none} a:hover{color:var(--blue-dark);text-decoration:underline} img{max-width:100%;height:auto;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .narrow{max-width:760px} .eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--blue);margin:0 0 .7em} .lede{font-size:1.15rem;color:var(--grey)} .center{text-align:center} /* buttons */ .btn{display:inline-block;font-weight:600;font-size:.95rem;padding:.8rem 1.6rem; border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer; transition:.16s ease;text-decoration:none;font-family:var(--sans)} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--blue-dark);color:#fff} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--blue);color:var(--blue)} .btn-light{background:#fff;color:var(--blue)} .btn-sm{padding:.55rem 1.05rem;font-size:.85rem} /* header */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;justify-content:space-between; gap:24px;min-height:76px} .brand{font-family:var(--serif);font-size:1.32rem;font-weight:700;color:var(--ink); letter-spacing:-.01em;white-space:nowrap} .brand:hover{text-decoration:none;color:var(--blue)} .brand small{display:block;font-family:var(--sans);font-size:.63rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);margin-top:2px} .nav{display:flex;align-items:center;gap:30px} .nav a{color:var(--ink-2);font-size:.93rem;font-weight:500;padding:6px 0; border-bottom:2px solid transparent} .nav a:hover,.nav a.active{color:var(--blue);border-bottom-color:var(--blue); text-decoration:none} .nav-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer; color:var(--ink);padding:4px 8px} /* hero */ .hero{background:linear-gradient(160deg,#FDFCF9 0%,#F4EEE1 62%,#EFE4CE 100%); padding:84px 0 76px;border-bottom:1px solid var(--line)} .hero h1{max-width:16ch;margin-bottom:.4em} .hero h1 em{font-style:italic;color:var(--blue)} .hero .lede{max-width:56ch;margin-bottom:1.9em} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} .hero-img{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/2} .hero-img img{width:100%;height:100%;object-fit:cover} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} /* sections */ .section{padding:72px 0} .section-alt{background:var(--surface-2);border-block:1px solid var(--line)} .section-head{margin-bottom:40px} .section-head.center{text-align:center} .section-head.center .lede{margin-inline:auto;max-width:60ch} .section-head .row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px} /* cards */ .grid{display:grid;gap:30px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column;transition:.18s ease} .card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#DFD2B4} .card-img{aspect-ratio:16/10;background:linear-gradient(135deg,#F3EAD6,#E8DBBE); overflow:hidden} .card-img img{width:100%;height:100%;object-fit:cover} .card-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column} .card h3{font-size:1.18rem;margin-bottom:.45em} .card h3 a{color:var(--ink)} .card h3 a:hover{color:var(--blue);text-decoration:none} .card p{font-size:.94rem;color:var(--grey);margin-bottom:1em} .card-meta{margin-top:auto;font-size:.78rem;color:var(--grey-2); display:flex;gap:10px;align-items:center;flex-wrap:wrap} .tag{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ind);background:#F3EAD6; padding:.32rem .7rem;border-radius:99px} .tag:hover{text-decoration:none;background:#EADFC2} /* category cards */ .cat-card{display:block;padding:32px 28px;background:#fff;border:1px solid var(--line); border-radius:var(--radius);transition:.18s ease} .cat-card:hover{text-decoration:none;border-color:var(--blue);box-shadow:var(--shadow); transform:translateY(-3px)} .cat-card h3{margin-bottom:.35em} .cat-card p{color:var(--grey);font-size:.94rem;margin-bottom:1em} .cat-card .more{font-size:.85rem;font-weight:600;color:var(--blue)} /* tools */ .tool-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:30px 28px;display:flex;flex-direction:column;transition:.18s ease} .tool-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .tool-icon{font-size:1.9rem;margin-bottom:14px} .tool-card h3{font-size:1.15rem} .tool-card p{font-size:.93rem;color:var(--grey);flex:1} .price-tag{font-size:.75rem;font-weight:600;color:var(--grey-2); letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px} /* article */ .article-header{padding:56px 0 34px;text-align:center} .article-meta{font-size:.85rem;color:var(--grey-2);margin-top:1.2em} .article-meta span+span::before{content:"·";margin:0 .6em;color:var(--line)} .article-hero{max-width:1000px;margin:0 auto 48px;border-radius:14px;overflow:hidden} .prose{font-size:1.06rem} .prose h2{margin-top:2em;padding-top:.2em} .prose h3{margin-top:1.7em;font-size:1.2rem} .prose ul,.prose ol{padding-left:1.3em;margin-bottom:1.2em} .prose li{margin-bottom:.5em} .prose blockquote{margin:1.8em 0;padding:20px 26px;background:var(--surface-2); border-left:3px solid var(--blue);border-radius:0 8px 8px 0;color:var(--ink-2)} .prose blockquote p:last-child{margin-bottom:0} .prose table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.94rem} .prose th,.prose td{padding:.72rem .9rem;border-bottom:1px solid var(--line); text-align:left} .prose th{background:var(--surface-2);font-weight:600;color:var(--ink); font-size:.82rem;letter-spacing:.05em;text-transform:uppercase} .prose img{border-radius:10px;margin:1.8em 0} .prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0} .prose code{background:var(--surface);padding:.15em .4em;border-radius:4px; font-size:.9em} .table-scroll{overflow-x:auto} /* newsletter */ .newsletter{background:linear-gradient(160deg,var(--ind),var(--ind-dark)); color:#fff;padding:64px 0} .newsletter h2{color:#fff} .newsletter p{color:rgba(255,255,255,.88);max-width:52ch} .subscribe-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .subscribe-form input[type=email]{flex:1;min-width:250px;padding:.85rem 1.1rem; border:1.5px solid rgba(255,255,255,.25);border-radius:var(--radius);background:#fff; font-family:var(--sans);font-size:.95rem;color:var(--ink)} .subscribe-form input:focus{outline:2px solid var(--blue);outline-offset:1px} .hp{position:absolute;left:-9999px} /* forms */ .field{margin-bottom:20px} .field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink); margin-bottom:6px} .field input,.field textarea,.field select{width:100%;padding:.72rem .9rem; border:1.5px solid var(--line);border-radius:var(--radius);font-family:var(--sans); font-size:.96rem;color:var(--ink);background:#fff} .field input:focus,.field textarea:focus{outline:none;border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,71,131,.14)} .field textarea{min-height:170px;resize:vertical} .field .err{color:#C53030;font-size:.83rem;margin-top:5px} .notice{padding:16px 20px;border-radius:var(--radius);margin-bottom:24px;font-size:.94rem} .notice-ok{background:#F0FFF4;border:1px solid #9AE6B4;color:#22543D} .notice-error{background:#FFF5F5;border:1px solid #FEB2B2;color:#822727} /* footer */ .site-footer{background:linear-gradient(180deg,var(--cream),#EDE2CB); border-top:1px solid var(--line);padding:56px 0 34px;margin-top:0} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.15fr;gap:44px; margin-bottom:38px} .footer-grid h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.13em; text-transform:uppercase;color:var(--grey-2);margin-bottom:14px;font-weight:600} .footer-grid ul{list-style:none;padding:0;margin:0} .footer-grid li{margin-bottom:9px} .footer-grid a{color:var(--grey);font-size:.92rem} .footer-bottom{border-top:1px solid var(--line);padding-top:22px; font-size:.84rem;color:var(--grey-2);display:flex;justify-content:space-between; gap:16px;flex-wrap:wrap} /* pagination */ .pagination{display:flex;gap:8px;justify-content:center;margin-top:48px} .pagination a,.pagination span{padding:.55rem .95rem;border:1px solid var(--line); border-radius:8px;font-size:.9rem;color:var(--grey)} .pagination .on{background:var(--blue);color:#fff;border-color:var(--blue)} .cat-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px} .cat-filter a{padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:99px; font-size:.88rem;color:var(--grey);background:#fff} .cat-filter a.on,.cat-filter a:hover{background:var(--blue);color:#fff; border-color:var(--blue);text-decoration:none} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:36px} .grid-3{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ body{font-size:16px} .nav{position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column; align-items:stretch;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line); display:none;box-shadow:var(--shadow)} .nav.open{display:flex} .nav a{padding:12px 0;border-bottom:1px solid var(--surface)} .nav-toggle{display:block} .grid-3,.grid-2{grid-template-columns:1fr} .hero{padding:56px 0 52px} .section{padding:52px 0} .footer-grid{grid-template-columns:1fr;gap:28px} } /* ── rotating full-bleed homepage hero ── */ .hero-rot{position:relative;left:50%;transform:translateX(-50%);width:100vw; /* Tall enough to feel like an arrival, short enough that the next section shows above the fold and invites a scroll. */ min-height:70vh;min-height:70svh;display:flex;align-items:center; justify-content:center;overflow:hidden} .hero-rot__slides,.hero-rot__scrim{position:absolute;inset:0} .hero-rot__slide{position:absolute;inset:0;background-size:cover; background-repeat:no-repeat;opacity:0;transition:opacity .8s ease-in-out; animation:heroZoom 22s ease-out infinite alternate} .hero-rot__slide.is-active{opacity:1} @keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.07)}} .hero-rot__scrim{background: radial-gradient(ellipse 80% 60% at 50% 46%,rgba(9,23,48,.18) 0%,rgba(9,23,48,0) 70%), linear-gradient(to bottom,rgba(9,23,48,.30),rgba(9,23,48,.12) 42%,rgba(9,23,48,.52))} .hero-rot__inner{position:relative;z-index:2;text-align:center;max-width:980px; padding:0 24px;color:#fff} .hero-rot__eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.28em; text-transform:uppercase;font-size:.82rem;color:var(--gold);margin:0 0 22px; text-shadow:0 1px 10px rgba(0,0,0,.45)} .hero-rot__title{font-family:var(--serif);font-weight:700;color:#fff; font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.06;margin:0 0 22px; text-shadow:0 2px 26px rgba(0,0,0,.5); /* Balance the lines so a short last word cannot be left stranded alone. */ text-wrap:balance} .hero-rot__title em{font-style:italic;color:var(--gold)} .hero-rot__sub{font-family:var(--sans);font-weight:400; font-size:clamp(1.05rem,1.8vw,1.32rem);color:rgba(255,255,255,.94); margin:0 auto 34px;text-shadow:0 1px 14px rgba(0,0,0,.55); /* 44ch forced this onto two lines; the container already caps the width. */ max-width:none;text-wrap:balance} .hero-rot__btn{display:inline-block;background:var(--gold);color:#0e2a4d; font-family:var(--sans);font-weight:600;font-size:1.02rem;text-decoration:none; padding:16px 38px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.32); transition:transform .2s ease,background .2s ease} .hero-rot__btn:hover{background:#d4b466;color:#0e2a4d;text-decoration:none; transform:translateY(-2px)} .hero-rot__chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center; margin-top:26px} .hero-rot__chips a{text-decoration:none;color:#fff;font-size:.82rem;font-weight:500; border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:7px 16px; transition:background .15s} .hero-rot__chips a:hover{background:rgba(255,255,255,.16);color:#fff; text-decoration:none} .hero-rot__alt{display:inline-block;margin-left:16px;color:#fff;font-weight:500; font-size:.98rem;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px} .hero-rot__alt:hover{color:#fff;border-bottom-color:#fff;text-decoration:none} @media (max-width:640px){ .hero-rot{min-height:66vh;min-height:66svh} .hero-rot__eyebrow{font-size:.72rem;letter-spacing:.22em} .hero-rot__alt{display:block;margin:18px 0 0} } @media (prefers-reduced-motion:reduce){ .hero-rot__slide{animation:none;transition:opacity .01s} } /* discreet admin entrance in the footer */ .footer-signin{margin-left:16px;padding-left:16px;border-left:1px solid var(--line); color:var(--grey-2);font-size:.82rem} .footer-signin:hover{color:var(--blue)} /* ── blog landing page ── */ .bl-hero{position:relative;left:50%;transform:translateX(-50%);width:100vw; min-height:48vh;display:flex;align-items:center;justify-content:center;overflow:hidden} .bl-hero__img{position:absolute;inset:0; background:linear-gradient(135deg,#0e2a4d,#1f5598 60%,#3d78b8); background-size:cover;background-position:center;background-repeat:no-repeat} .bl-hero__ov{position:absolute;inset:0;background:linear-gradient(180deg, rgba(14,42,77,.58),rgba(14,42,77,.44) 45%,rgba(14,42,77,.66))} .bl-hero__in{position:relative;z-index:2;text-align:center;color:#fff; max-width:760px;padding:64px 24px} .bl-hero__in .eyebrow{color:#e6c877;letter-spacing:.2em;font-size:.72rem} .bl-hero h1{font-family:var(--serif);font-weight:700;color:#fff; font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;margin:0 0 14px; text-shadow:0 2px 22px rgba(0,0,0,.45)} .bl-hero .sub{font-size:1.1rem;color:rgba(255,255,255,.94);max-width:520px; margin:0 auto 26px;text-shadow:0 1px 12px rgba(0,0,0,.5)} .bl-hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap; margin-bottom:22px} .bl-btn{display:inline-block;text-decoration:none;font-weight:600; border-radius:999px;padding:14px 30px;font-size:.98rem; transition:transform .15s ease,background .15s ease} .bl-btn:hover{transform:translateY(-2px);text-decoration:none} .bl-btn--gold{background:var(--gold);color:#0e2a4d} .bl-btn--gold:hover{background:#d4b466;color:#0e2a4d} .bl-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)} .bl-btn--ghost:hover{color:#fff;background:rgba(255,255,255,.12)} .bl-btn--ind{background:var(--ink);color:#fff} .bl-btn--ind:hover{background:var(--blue-dark);color:#fff} .bl-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} .bl-chips a{text-decoration:none;color:#fff;font-size:.8rem;font-weight:500; border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 15px; transition:background .15s} .bl-chips a:hover{background:rgba(255,255,255,.16);text-decoration:none;color:#fff} .bl-browse{padding:66px 20px 40px;text-align:center} .bl-browse .lead{font-family:var(--serif);font-style:italic;color:var(--ink); font-size:1.15rem;margin:0 0 4px} .bl-browse h2{margin-bottom:10px} /* Brief 07: full-width rows, photo panel with a navy scrim on the left, paper body on the right. One per category; grows with the list. */ .bl-rows{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:16px;text-align:left} .bl-r{display:grid;grid-template-columns:300px 1fr;background:var(--paper);border:1px solid var(--line); border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;min-height:172px; transition:transform .18s ease,box-shadow .18s ease} .bl-r:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 28px rgba(20,33,61,.10)} .bl-r__ph{position:relative;overflow:hidden;background:var(--ink)} .bl-r__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0} .bl-r__scrim{position:absolute;inset:0; background:linear-gradient(105deg,rgba(14,25,48,.86) 0%,rgba(17,30,58,.62) 55%,rgba(20,33,61,.24) 100%)} .bl-r__ph--flat .bl-r__scrim{background:linear-gradient(105deg,rgba(14,25,48,.35),rgba(20,33,61,0))} .bl-r__lab{position:absolute;left:20px;bottom:18px;right:16px;color:#fff} .bl-r__rule{display:block;width:30px;height:2px;background:var(--gold);margin-bottom:9px} .bl-r__cat{display:block;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)} .bl-r__line{display:block;font-family:var(--serif);font-size:21px;margin-top:5px;font-weight:600;line-height:1.2;color:#fff} .bl-r__bd{padding:24px 28px;display:flex;flex-direction:column;justify-content:center} .bl-r__bd h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:0 0 8px;line-height:1.3} .bl-r__bd p{margin:0;font-size:14.4px;line-height:1.62;color:var(--text-2);max-width:56ch} .bl-r__ft{margin-top:14px;display:flex;align-items:center;gap:14px} .bl-r__count{font-size:12px;color:var(--sable);letter-spacing:.03em} .bl-r__go{font-size:13px;font-weight:600;color:var(--gold-deep)} .bl-tool{background:var(--ink);color:#fff;text-align:center;padding:58px 20px} .bl-tool h2{color:#fff;margin-bottom:10px} .bl-tool p{color:rgba(255,255,255,.92);max-width:560px;margin:0 auto 8px; font-size:1.05rem} .bl-tool .wit{color:#e6c877;font-style:italic;max-width:560px;margin:0 auto 24px; font-size:.95rem} .bl-foot{background:linear-gradient(180deg,#fdf6e3,#f4e6c9);text-align:center; padding:58px 20px} .bl-foot .brand{font-family:var(--serif);font-style:italic;font-size:1.5rem; color:var(--ink);margin:0 0 20px} @media (max-width:760px){ .bl-hero{min-height:42vh} } /* Paging jumps to #guides; offset the anchor so the sticky header does not sit on top of the heading when it lands. */ #guides{scroll-margin-top:96px} @media (max-width:820px){ .bl-r{grid-template-columns:1fr} .bl-r__ph{height:170px} .bl-r__bd{padding:20px 20px 22px} } /* ── travel tools page + inline hotel check ── */ .tt-hero{text-align:center;padding:72px 24px 8px;max-width:760px;margin:0 auto} .tt-hero .ey{font-weight:600;letter-spacing:.2em;text-transform:uppercase; font-size:.72rem;color:var(--gold);margin:0 0 12px} .tt-hero h1{font-family:var(--serif);font-weight:700;line-height:1.1; font-size:clamp(2rem,4.6vw,3.1rem);margin:0 0 14px} .tt-hero h1 em{font-style:italic;color:var(--ink)} .tt-hero .sub{color:var(--grey);font-size:1.08rem;max-width:600px;margin:0 auto} .tt-hero .note{color:var(--ink);font-weight:500;font-size:.92rem;margin-top:22px} .hlc{--ind:#14213D;--gold:#c6a353;--sol:#f2c43a;--cream:#fdfaf3;--ink:#1f2d3d; max-width:760px;margin:34px auto 0;background:var(--cream); border:1px solid #ecdcb0;border-radius:16px;overflow:hidden;color:var(--ink)} .hlc__head{background:var(--ind);color:#fff;padding:28px 30px 26px} .hlc__ey{display:inline-block;color:var(--sol);font-weight:600;font-size:.72rem; letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5rem} .hlc__head h2{font-family:var(--serif);color:#fff;font-size:clamp(1.7rem,3.6vw,2.1rem); margin:0 0 8px} .hlc__head p{color:rgba(255,255,255,.9);margin:0;font-size:.97rem} .hlc__body{padding:30px} .hlc__qs{list-style:none;margin:0;padding:0;counter-reset:q} .hlc__q{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid #efe3c6} .hlc__q:last-child{border-bottom:0} .hlc__qlabel{display:block;font-weight:500;margin-bottom:12px;line-height:1.5} .hlc__opts{display:flex;gap:8px;flex-wrap:wrap} .hlc__opt{background:#fff;border:1.5px solid #e4d8b8;border-radius:999px; padding:9px 16px;font-family:var(--sans);font-size:.88rem;color:var(--ink); cursor:pointer;transition:.14s} .hlc__opt:hover{border-color:var(--ind)} .hlc__opt[aria-pressed="true"]{background:var(--ind);border-color:var(--ind);color:#fff} .hlc__cost{background:#fff;border:1px solid #efe3c6;border-radius:12px; padding:22px;margin:26px 0 22px} .hlc__step{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-deep)} .hlc__cost h3{font-family:var(--serif);font-size:1.15rem;margin:6px 0 4px} .hlc__cost>div>p{color:var(--grey);font-size:.9rem;margin:0 0 16px} .hlc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .hlc__grid label{display:flex;flex-direction:column;gap:6px;font-size:.82rem; font-weight:500;color:var(--grey)} .hlc__grid input{padding:.6rem .7rem;border:1.5px solid #e4d8b8;border-radius:8px; font-family:var(--sans);font-size:.95rem;background:#fff;color:var(--ink)} .hlc__grid input:focus{outline:none;border-color:var(--ind)} .hlc__go{width:100%;background:var(--ind);color:#fff;border:0;border-radius:999px; padding:15px;font-family:var(--sans);font-weight:600;font-size:1rem;cursor:pointer; transition:.15s} .hlc__go:hover{background:var(--blue-dark)} .hlc__result{margin-top:26px;padding-top:24px;border-top:1px solid #efe3c6} .hlc__bar{height:8px;background:#eee3c8;border-radius:999px;overflow:hidden; margin-bottom:16px} .hlc__bar span{display:block;height:100%;width:0;border-radius:999px; transition:width .5s ease} .hlc__scoretop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px} .hlc__num{font-family:var(--serif);font-size:2rem;font-weight:700} .hlc__num span{font-size:1rem;color:var(--grey-2);font-family:var(--sans); margin-left:4px} .hlc__verdict{font-weight:600;font-size:.9rem;padding:.35rem .9rem;border-radius:999px} .hlc__msg{font-size:1rem;margin:0 0 10px} .hlc__costout{background:#fff;border:1px solid #efe3c6;border-radius:10px; padding:14px 16px;font-size:.95rem;margin:0 0 20px} .hlc__cta{background:#fff;border:1px solid #efe3c6;border-radius:12px;padding:22px} .hlc__ctaline{font-size:.94rem;color:var(--grey);margin:0 0 16px} .hlc__btn{display:inline-block;border-radius:999px;padding:12px 24px;font-weight:600; font-size:.92rem;text-decoration:none;cursor:pointer;border:1.5px solid transparent; font-family:var(--sans);margin:0 8px 8px 0} .hlc__btn--gold{background:var(--gold);color:#0e2a4d} .hlc__btn--gold:hover{background:#d4b466;color:#0e2a4d;text-decoration:none} .hlc__btn--ghost{background:transparent;color:var(--ind);border-color:#d9c9a2} .hlc__btn--ghost:hover{border-color:var(--ind)} .hlc__reset{display:block;margin:18px auto 0;background:none;border:0; color:var(--grey-2);font-family:var(--sans);font-size:.85rem;cursor:pointer; text-decoration:underline} @media (max-width:640px){.hlc__grid{grid-template-columns:1fr}.hlc__body{padding:22px}} /* checklist modal */ .hlc-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center; justify-content:center;padding:20px} .hlc-modal[hidden]{display:none} .hlc-modal__ov{position:absolute;inset:0;background:rgba(14,42,77,.6)} .hlc-modal__card{position:relative;background:#fff;border-radius:16px;padding:34px; max-width:440px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3)} .hlc-modal__x{position:absolute;top:12px;right:16px;background:none;border:0; font-size:1.6rem;line-height:1;color:var(--grey-2);cursor:pointer} .hlc-modal__ey{display:inline-block;color:var(--gold-deep);font-weight:600;font-size:.7rem; letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem} .hlc-modal__card h3{font-family:var(--serif);font-size:1.35rem;margin:0 0 10px} .hlc-modal__card p{color:var(--grey);font-size:.94rem;margin:0 0 18px} .hlc-modal__card input[type=email]{width:100%;padding:.8rem 1rem;border:1.5px solid var(--line); border-radius:10px;font-family:var(--sans);font-size:.96rem;margin-bottom:12px} .hlc-modal__submit{width:100%;background:var(--ink);color:#fff;border:0;border-radius:999px; padding:13px;font-family:var(--sans);font-weight:600;font-size:.96rem;cursor:pointer} .hlc-modal__submit:hover{background:var(--blue-dark)} .hlc-modal__fine{font-size:.78rem;color:var(--grey-2);margin:14px 0 0} .hlc-modal__check{font-size:2.4rem;color:#4f8a4f;margin-bottom:8px} /* ── credibility strip under the hero ── */ .credstrip{background:var(--surface-2);border-bottom:1px solid var(--line)} .credstrip__in{display:flex;align-items:center;gap:26px;min-height:140px; padding:22px 0;flex-wrap:wrap} .credstrip__photo{flex:0 0 88px;width:88px;height:88px;border-radius:50%; overflow:hidden;background:var(--surface);box-shadow:0 2px 10px rgba(26,32,44,.12)} .credstrip__photo img{width:100%;height:100%;object-fit:cover} .credstrip__body{flex:1 1 320px;min-width:0} .credstrip__line{font-size:1rem;color:var(--ink-2);margin:0 0 12px;max-width:62ch} .credstrip__stats{display:flex;gap:28px;flex-wrap:wrap;margin:0;padding:0; list-style:none} .credstrip__stats b{font-family:var(--serif);font-size:1.45rem;color:var(--blue); display:block;line-height:1.1} .credstrip__stats span{font-size:.82rem;color:var(--grey-2)} .credstrip__cta{flex:0 0 auto;font-weight:600;font-size:.92rem;white-space:nowrap} @media (max-width:720px){ .credstrip__in{gap:18px;min-height:0} .credstrip__photo{flex-basis:64px;width:64px;height:64px} .credstrip__stats{gap:20px} .credstrip__stats b{font-size:1.2rem} } /* ── author block at the end of an article ── */ .authorbox{display:flex;gap:22px;align-items:flex-start;background:var(--surface-2); border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin:56px 0 8px} .authorbox__photo{flex:0 0 76px;width:76px;height:76px;border-radius:50%; overflow:hidden;background:var(--surface)} .authorbox__photo img{width:100%;height:100%;object-fit:cover} .authorbox__body{flex:1 1 auto;min-width:0} .authorbox__name{font-family:var(--serif);font-size:1.12rem;color:var(--ink); margin:0 0 6px} .authorbox__bio{font-size:.95rem;color:var(--grey);margin:0 0 12px} .authorbox__meta{font-size:.8rem;color:var(--grey-2);margin:0 0 10px} .authorbox__meta span+span::before{content:"·";margin:0 .55em;color:var(--line)} .authorbox__cta{font-weight:600;font-size:.9rem} @media (max-width:640px){ .authorbox{flex-direction:column;gap:16px;padding:22px} .authorbox__photo{flex-basis:64px;width:64px;height:64px} } /* ── about page ── */ .ab-hero{position:relative;left:50%;transform:translateX(-50%);width:100vw; min-height:54vh;display:flex;align-items:center;justify-content:center; overflow:hidden} .ab-hero__img{position:absolute;inset:0;background-size:cover; background-position:center;background-repeat:no-repeat; background-color:#0e2a4d} .ab-hero__ov{position:absolute;inset:0;background:linear-gradient(180deg, rgba(14,42,77,.62),rgba(14,42,77,.48) 45%,rgba(14,42,77,.7))} .ab-hero__in{position:relative;z-index:2;text-align:center;color:#fff; max-width:760px;padding:64px 24px} .ab-hero__in .ey{color:var(--gold);font-weight:600;letter-spacing:.2em; text-transform:uppercase;font-size:.72rem;margin:0 0 12px} .ab-hero h1{font-family:var(--serif);color:#fff;font-weight:700; font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1;margin:0 0 14px; text-wrap:balance;text-shadow:0 2px 22px rgba(0,0,0,.45)} .ab-hero p{color:rgba(255,255,255,.94);font-size:1.05rem;max-width:56ch; margin:0 auto 26px;text-shadow:0 1px 12px rgba(0,0,0,.5)} .ab-founder{padding:72px 0} .ab-founder .grid{display:grid;grid-template-columns:minmax(0,420px) 1fr; gap:48px;align-items:start} .ab-portrait{border-radius:16px;background-size:cover;background-repeat:no-repeat; aspect-ratio:4/5;box-shadow:0 12px 34px rgba(18,71,131,.14)} .ab-founder .ey{color:var(--gold-deep);font-weight:600;letter-spacing:.2em; text-transform:uppercase;font-size:.72rem;margin:0 0 12px} .ab-beliefs{background:var(--ind);color:#fff;padding:72px 0;text-align:center} .ab-beliefs h2{color:#fff} .ab-beliefs .ey{color:#e6c877;font-weight:600;letter-spacing:.2em; text-transform:uppercase;font-size:.72rem;margin:0 0 12px} .ab-beliefs .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px; margin-top:38px;text-align:left} .ab-belief{background:#fff;border:1px solid var(--line);border-radius:14px; padding:28px 26px} .ab-belief h3{font-family:var(--serif);font-size:1.18rem;margin:0 0 10px} .ab-belief p{color:var(--grey);font-size:.94rem;margin:0} .ab-gallery{padding:72px 0;text-align:center;background:var(--cream)} .ab-gallery .ey{color:var(--gold-deep);font-weight:600;letter-spacing:.2em; text-transform:uppercase;font-size:.72rem;margin:0 0 12px} .ab-gallery .sub{color:var(--grey);margin:0 auto;max-width:56ch} .ab-gallery .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px; margin-top:38px} .ab-card{position:relative;border-radius:14px;overflow:hidden;min-height:290px; background-size:cover;background-repeat:no-repeat;display:flex; align-items:flex-end;text-align:left} .ab-card::after{content:"";position:absolute;inset:0;background:linear-gradient( 180deg,rgba(14,42,77,0) 35%,rgba(14,42,77,.82))} .ab-card p{position:relative;z-index:2;color:#fff;font-size:.92rem;margin:0; padding:22px;text-shadow:0 1px 10px rgba(0,0,0,.5)} .ab-help{background:var(--offwhite);padding:72px 0;text-align:center} .ab-help .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px; margin-top:38px;text-align:left} .ab-helpcard{background:#fff;border:1px solid #ECDCB0;border-radius:14px; padding:28px 26px;display:flex;flex-direction:column; box-shadow:0 6px 18px rgba(18,71,131,.06)} .ab-helpcard .tag{display:inline-block;align-self:flex-start;font-size:.66rem; font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold); margin-bottom:12px} .ab-helpcard h3{color:var(--ind)} .ab-helpcard h3{font-family:var(--serif);font-size:1.16rem;margin:0 0 10px} .ab-helpcard p{color:var(--grey);font-size:.93rem;margin:0 0 auto} .ab-helpcard a{color:var(--ind);font-weight:600;font-size:.9rem;margin-top:18px} .ab-helpcard a:hover{color:var(--ind-dark)} .ab-cta{padding:76px 0;text-align:center;color:#fff; background:linear-gradient(160deg,var(--ind),var(--ind-dark))} .ab-cta h2{color:#fff} .ab-cta p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto 26px} .ab-cta .social{font-size:.9rem;color:rgba(255,255,255,.72);margin-top:22px} .ab-cta .social a{color:#e6c877} @media (max-width:900px){ .ab-founder .grid{grid-template-columns:1fr;gap:30px} .ab-portrait{max-width:360px} .ab-beliefs .grid,.ab-gallery .grid,.ab-help .grid{grid-template-columns:1fr} } /* ══ Brief 05 §2–§9 ══════════════════════════════════════════════════ */ /* §2 spacing and type. Less air around larger text reads as fuller, not more crowded — the previous combination was the main source of emptiness. */ :root{--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace} .sec{padding:58px 0} .sec.paper{background:var(--paper)} .sec.cream{background:var(--cream)} .sec h2{font-size:34px;line-height:1.14;margin:0 0 10px} .sec .sub{font-size:17px;color:var(--text-2);margin:0 0 28px; /* No width cap: the sub-lines are short enough to sit on one line at desktop width. Balance only matters once a narrow screen forces a wrap. */ max-width:none;text-wrap:balance} /* §7 numbered section rules. Numbers are emitted in reading order, so they renumber themselves if sections move. */ .rule{display:flex;align-items:center;gap:14px;margin-bottom:12px} .rule .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em; color:var(--gold-deep)} .rule .l{flex:1;height:1px;background:var(--line)} .rule .t{font-family:var(--mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--text-2)} /* category tints — one per category, used wherever that category appears */ .tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;padding:4px 10px;border-radius:999px} .t-sand{background:var(--sand-bg);color:var(--sand)} .t-sea{background:var(--sea-bg);color:var(--sea)} .t-slate{background:var(--slate-bg);color:var(--slate)} a.tag:hover{text-decoration:none;filter:brightness(.97)} /* §3 category cards with covers */ .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .cat{background:#fff;border:1px solid var(--line);border-radius:12px; overflow:hidden;display:block;transition:.16s ease} .cat:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow)} .cat .img{height:150px;background-size:cover;background-position:center; background-repeat:no-repeat} .cat .img.flat{background:linear-gradient(140deg,var(--slate-bg),#D8E1EE)} .cat .img.flat.t-sand-bg{background:linear-gradient(140deg,var(--sand-bg),#EFDFBE)} .cat .img.flat.t-sea-bg{background:linear-gradient(140deg,var(--sea-bg),#D3E3D9)} .cat .bd{padding:18px 22px 22px} .cat h3{font-size:20px;margin:10px 0 7px;color:var(--ink)} .cat p{font-size:14.5px;color:var(--text-2);margin:0 0 12px} .cat .more{font-size:13.5px;font-weight:600;color:var(--ind)} /* §4 the single ink band */ .ink{background:var(--ink);color:#fff;text-align:center;padding:66px 0} .ink h2{color:#fff;margin-bottom:12px} .ink > .wrap > p{color:rgba(255,255,255,.86);max-width:56ch;margin:0 auto 24px; font-size:17px} .ink .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--gold);margin:0 0 12px} .mini{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:22px} .mini span{font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.66)} /* §5 pull quote */ .quote{background:var(--cream);text-align:center;padding:56px 40px; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .quote .bar{width:56px;height:1px;background:var(--line);margin:0 auto 22px} .quote p{font-family:var(--serif);font-style:italic;font-size:27px; line-height:1.35;color:var(--ink);margin:0 auto; /* Wide enough for two lines rather than three. Balanced so the pair are even and no short word is left stranded. */ max-width:42ch;text-wrap:balance} .quote .who{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--text-2);margin-top:20px} /* §6 featured guide layout */ .guides{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;align-items:start} .guides .side{display:grid;gap:24px;align-content:start} .gcard{background:#fff;border:1px solid var(--line);border-radius:12px; overflow:hidden;display:block;transition:.16s ease} .gcard:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow)} .gcard .img{background-size:cover;background-position:center;height:270px; background-color:var(--slate-bg)} .gcard .bd{padding:20px 24px 24px} .gcard h3{font-size:25px;margin:10px 0 8px;color:var(--ink);line-height:1.2} .gcard p{font-size:15px;color:var(--text-2);margin:0 0 12px} .gcard .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--text-2)} .gcard.small{display:grid;grid-template-columns:132px 1fr;align-items:stretch} .gcard.small .img{height:100%;min-height:118px} .gcard.small .bd{padding:16px 18px} .gcard.small h3{font-size:17px;margin:8px 0 6px;line-height:1.3} .gcard.small p{display:none} /* §8 shop cards */ .shop{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .prod{background:#fff;border:1px solid var(--line);border-radius:12px; padding:24px 26px;position:relative} .prod h3{font-size:20px;margin:0 0 8px;color:var(--ink)} .prod p{font-size:14.5px;color:var(--text-2);margin:0 0 18px} .prod .badge{position:absolute;top:-11px;left:24px;background:var(--gold); color:#20180A;font-size:10.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:5px 12px;border-radius:999px} .prow{display:flex;align-items:baseline;justify-content:space-between;gap:12px; flex-wrap:wrap} .price{font-family:var(--serif);font-size:27px;font-weight:700;color:var(--ink)} .stars{font-size:12.5px;color:var(--sable);margin-left:10px} .btn-ink{display:inline-block;background:var(--ink);color:#fff;font-size:14px; padding:11px 20px;border-radius:999px;font-weight:600} .btn-ink:hover{background:var(--ink-soft);color:#fff;text-decoration:none} /* §9 credibility strip, matched to the mockup */ .credstrip{background:var(--cream);border-bottom:1px solid var(--line);border-top:0} .credstrip__in{min-height:0;padding:30px 0;gap:24px} .credstrip__photo{flex:0 0 92px;width:92px;height:92px; box-shadow:0 0 0 4px #fff,0 2px 12px rgba(20,33,61,.12)} .credstrip__line{font-size:16px;color:var(--text);margin:0 0 14px;max-width:60ch} .credstrip__stats{font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;gap:8px 26px;color:var(--text-2)} .credstrip__stats li{display:flex;gap:7px;align-items:baseline} .credstrip__stats b{display:inline;font-family:var(--mono);font-size:11px; font-weight:500;color:var(--gold-deep)} .credstrip__stats span{font-size:11px;color:var(--text-2)} .credstrip__cta{font-size:13.5px;color:var(--ind)} /* newsletter band picks up the ink treatment */ .newsletter{background:var(--ink);padding:56px 0} .newsletter h2{font-size:28px} @media (max-width:900px){ .cats{grid-template-columns:1fr} .guides{grid-template-columns:1fr} .shop{grid-template-columns:1fr} } @media (max-width:640px){ .sec{padding:44px 0} .sec h2{font-size:27px} .quote{padding:42px 24px} .quote p{font-size:21px} .gcard .img{height:200px} .gcard.small{grid-template-columns:104px 1fr} .gcard.small h3{font-size:15.5px} .gcard h3{font-size:20px} .credstrip__in{flex-direction:column;align-items:flex-start;text-align:left} .credstrip__photo{flex-basis:72px;width:72px;height:72px} .mini{gap:14px} } /* §2 card body copy */ .card p{font-size:14.5px} .card h3{font-size:20px} /* Real inside the fixed-height frames: the frame reserves the space so nothing shifts, the image lazy-loads, and object-fit keeps the crop. */ .cat .img,.gcard .img{overflow:hidden;background-color:var(--slate-bg)} .cat .img img,.gcard .img img{width:100%;height:100%;object-fit:cover;display:block} /* ── Article components (Circly export kit) ────────────────────────────────── Circly ships these classes with its own