/* ============================================================ Outside Edu — site styles (headings: Newsreader, body: Inter) ------------------------------------------------------------ Palette and type live in :root; everything else builds on them. Fonts (Newsreader for headings, Inter for body) are loaded from Google Fonts in each page's ; the stacks below fall back to system fonts when offline. ============================================================ */ :root{ --paper:#f6f3ec; /* page background (warm off-white) */ --paper-2:#ede8dc; /* alternating band */ --card:#fffdf8; /* card surface */ --ink:#1e2a22; /* body text (green-black) */ --ink-2:#4b5a50; /* secondary text */ --ink-3:#6f7c74; /* meta text */ --line:#dcd6c8; /* hairlines */ --forest:#2d5a3c; /* primary green: links, accents */ --forest-2:#1c3a27; /* header, dark bands */ --forest-3:#12281a; /* footer */ --moss:#e3ead9; /* light green band */ --leaf:#8fbf6a; /* bright green accent */ --amber:#e9a83b; /* call-to-action buttons */ --amber-2:#d3922a; /* button hover */ --amber-text:#9a6410; /* amber for small text on light backgrounds (AA contrast) */ --amber-3:#fbe7bd; /* pale amber tint */ --sky:#d6e7ef; --clay:#c0603f; --radius:16px; --radius-sm:10px; --shadow:0 1px 2px rgba(30,42,34,.05),0 12px 32px rgba(30,42,34,.08); --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --max:1120px; } /* ---------- base ---------- */ *{box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} body.no-scroll{overflow:hidden} img,svg{max-width:100%;display:block} a{color:var(--forest);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0 0 .5em;letter-spacing:-.005em;text-wrap:balance;font-optical-sizing:auto} h1{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:700;line-height:1.04} h1 em,h2 em{font-style:italic;font-weight:500;color:var(--amber-text)} .band-dark h1 em,.band-dark h2 em{color:var(--amber)} h2{font-size:clamp(1.75rem,3.5vw,2.7rem)} h3{font-size:1.4rem} h4{font-size:1.05rem} p{margin:0 0 1em} ul,ol{margin:0 0 1em;padding-left:1.25em} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .wrap-narrow{max-width:760px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-text);margin:0 0 1em} .band-dark .eyebrow{color:var(--amber)} .lede{font-size:1.2rem;color:var(--ink-2);max-width:58ch} .muted{color:var(--ink-2)} .meta{color:var(--ink-3);font-size:.85rem} .small{font-size:.9rem} .center{text-align:center} .center .lede{margin-left:auto;margin-right:auto} .section{padding:72px 0} .section-tight{padding:48px 0} .band-moss{background:var(--moss)} .band-paper2{background:var(--paper-2)} .band-dark{background:var(--forest-2);color:#edf0e6} .band-dark h2,.band-dark h3{color:#fff} .band-dark a{color:var(--amber)} .band-dark a.btn-primary{color:var(--ink)} .band-dark .muted{color:#c9d3c4} .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px} .section-head h2{margin:0} .section-head .more{font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} /* ---------- header ---------- */ .site-header{background:var(--forest-2);color:#f3efe4;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)} .nav-row{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px} .brand{display:inline-flex;align-items:center;gap:10px;color:inherit;font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:-.01em} .brand:hover{text-decoration:none} .brand b{font-weight:700;color:var(--amber)} .brand .mark{width:30px;height:30px;flex:none} .nav{display:flex;align-items:center;gap:26px} .nav a{color:#e7ecdf;font-weight:500;font-size:.95rem} .nav a:hover{color:#fff;text-decoration:none} .nav a.btn{color:var(--ink)} .nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:8px 12px;font:inherit;font-size:.9rem;cursor:pointer} .template-note{background:var(--amber-3);color:#5a3a06;font-size:.82rem;text-align:center;padding:7px 16px;border-bottom:1px solid #eed49a} .template-note b{font-weight:700} /* ---------- buttons, pills, tags ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:600;font-size:.98rem;line-height:1;border:1.5px solid transparent;cursor:pointer;font-family:var(--sans);transition:background .15s,transform .05s,border-color .15s;white-space:nowrap} .btn:hover{text-decoration:none} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--amber);color:var(--ink)} .btn-primary:hover{background:var(--amber-2)} .btn-dark{background:var(--forest-2);color:#fff} .btn-dark:hover{background:var(--forest)} .btn-ghost{background:transparent;border-color:var(--forest);color:var(--forest)} .btn-ghost:hover{background:var(--forest);color:#fff} .band-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff} .band-dark .btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-sm{padding:10px 16px;font-size:.88rem} .btn-lg{padding:16px 28px;font-size:1.05rem} .btn-block{width:100%} .pill{display:inline-block;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.88rem;font-weight:500} .pill:hover{border-color:var(--forest);text-decoration:none;color:var(--forest)} .pill.is-active{background:var(--forest-2);border-color:var(--forest-2);color:#fff} .pills{display:flex;flex-wrap:wrap;gap:10px} .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);background:var(--moss);padding:4px 9px;border-radius:6px} .tag-amber{color:#5a3a06;background:var(--amber-3)} .tag-lock{color:#fff;background:var(--ink-2)} /* ---------- hero ---------- */ .hero{padding:72px 0 56px;background: radial-gradient(900px 420px at 85% -10%,rgba(233,168,59,.16),transparent 60%), radial-gradient(700px 400px at -10% 100%,rgba(143,191,106,.18),transparent 60%),var(--paper)} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"head photo" "body photo";column-gap:56px;align-items:center} .hero-head{grid-area:head;align-self:end} .hero-body{grid-area:body;align-self:start} .hero-photo{grid-area:photo} .hero .lede{margin-bottom:26px} .quick-links{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0} .stats{display:flex;gap:40px;margin:40px 0 0;padding-top:28px;border-top:1px solid var(--line)} .stat-n{font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1;color:var(--forest-2)} .stat-l{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px} /* ---------- placeholder art (no image files needed) ---------- */ .thumb{position:relative;overflow:hidden;border-radius:var(--radius-sm);aspect-ratio:16/10; background:linear-gradient(180deg,var(--t-sky,var(--sky)) 0%,#f4efe1 72%)} .thumb::before{content:"";position:absolute;width:22%;aspect-ratio:1;border-radius:50%;background:var(--t-sun,var(--amber));top:15%;left:62%} .thumb::after{content:"";position:absolute;left:-25%;right:-25%;bottom:-48%;height:82%;border-radius:50% 50% 0 0;background:var(--t-hill,var(--forest))} .thumb .thumb-hill2{position:absolute;left:-10%;width:80%;bottom:-34%;height:60%;border-radius:50% 50% 0 0;background:var(--t-hill2,var(--leaf));z-index:1;opacity:.95} .thumb-b{--t-sky:#f7e6d0;--t-hill:#5f7f4a;--t-hill2:#a9c98a} .thumb-c{--t-sky:#e8ecf0;--t-sun:#f1d28e;--t-hill:#3d6b52;--t-hill2:#8fb08c} .thumb-d{--t-sky:#d9e9f2;--t-hill:#6b4f3a;--t-hill2:#b08a5a} .thumb-e{--t-sky:#fbe7bd;--t-sun:#e07a3f;--t-hill:#2d5a3c;--t-hill2:#7a9d5a} .thumb-f{--t-sky:#cfd9dc;--t-sun:#f3f0e6;--t-hill:#29473a;--t-hill2:#6c8a6a} .thumb-g{--t-sky:#e6e2f2;--t-hill:#4d6b8a;--t-hill2:#8fb0c7} .thumb-h{--t-sky:#dfeee5;--t-hill:#3f6f3f;--t-hill2:#9cc27b} .photo-ph{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;box-shadow:var(--shadow); background:linear-gradient(180deg,#dbe7ee 0%,#f4efe1 65%)} .photo-ph::before{content:"";position:absolute;width:26%;aspect-ratio:1;border-radius:50%;background:var(--amber);top:12%;left:58%} .photo-ph::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-50%;height:85%;border-radius:50% 50% 0 0;background:var(--forest)} .photo-ph .ph-hill2{position:absolute;left:-15%;width:90%;bottom:-38%;height:64%;border-radius:50% 50% 0 0;background:var(--leaf);z-index:1} .photo-ph .ph-label{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;background:rgba(255,253,248,.92);border-radius:10px;padding:12px 14px;font-size:.85rem;color:var(--ink-2);text-align:center;line-height:1.4} .photo-ph.landscape{aspect-ratio:16/10} .photo-ph.square{aspect-ratio:1} /* ---------- cards & grids ---------- */ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)} .card h3{margin-top:14px} .card p:last-child{margin-bottom:0} .card-flat{box-shadow:none} .card-num{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--amber-text);line-height:1} .post{display:flex;flex-direction:column;gap:12px} .post .thumb{margin-bottom:4px} .post h3{font-size:1.15rem;margin:0} .post h3 a{color:var(--ink)} .post h3 a:hover{color:var(--forest)} .post .meta{display:flex;align-items:center;gap:10px} .feature{display:grid;grid-template-columns:1fr 1fr;gap:24px} .feature .card{display:flex;flex-direction:column;gap:6px;padding:32px} .feature .card .btn{align-self:flex-start;margin-top:12px} .checks{list-style:none;padding:0;margin:0 0 1.2em} .checks li{position:relative;padding-left:32px;margin-bottom:12px} .checks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--leaf)} .checks li::after{content:"";position:absolute;left:7px;top:7px;width:5px;height:9px;border:solid var(--forest-2);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)} .band-dark .checks li::before{background:var(--amber)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step} .step{background:var(--card);border-radius:var(--radius);padding:30px 28px;border:1px solid rgba(45,90,60,.12)} .step .card-num{margin-bottom:12px} .quote{font-family:var(--serif);font-size:1.15rem;line-height:1.5;font-style:italic;color:var(--ink);margin:0 0 18px} .quote-by{font-size:.88rem;color:var(--ink-2);font-weight:600} .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split-narrow{grid-template-columns:.8fr 1.2fr} /* ---------- lead magnet / kit ---------- */ .kit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .kit-cover{position:relative;margin:0 auto;width:min(320px,80%);aspect-ratio:3/4;border-radius:12px;background:linear-gradient(160deg,var(--forest-2),var(--forest) 60%,#3f7a52);box-shadow:0 30px 60px rgba(18,40,26,.28);transform:rotate(-4deg);padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:space-between} .kit-cover .kc-brand{font-family:var(--serif);font-size:.95rem;opacity:.85} .kit-cover .kc-title{font-family:var(--serif);font-size:1.9rem;font-weight:700;line-height:1.1} .kit-cover .kc-sub{font-size:.82rem;opacity:.85;margin-top:8px} .kit-cover .kc-sun{position:absolute;right:26px;top:26px;width:54px;height:54px;border-radius:50%;background:var(--amber)} .kit-cover .kc-badge{position:absolute;left:-14px;bottom:36px;background:var(--amber);color:var(--ink);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:8px;transform:rotate(4deg)} /* ---------- forms ---------- */ .form-inline{display:flex;gap:10px;max-width:560px} .form-inline input{flex:1;min-width:0} input[type=text],input[type=email],textarea,select{width:100%;font:inherit;padding:13px 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)} textarea{border-radius:14px;min-height:120px;resize:vertical} input:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)} .form-note{font-size:.82rem;color:var(--ink-3);margin-top:10px} .form-stack{display:grid;gap:12px;max-width:520px} .form-stack label{font-size:.85rem;font-weight:600;color:var(--ink-2)} .form-success{background:var(--moss);border:1px solid #c8d8bb;padding:16px 18px;border-radius:12px;font-size:.95rem;color:var(--forest-2);max-width:560px} .band-dark .form-success{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff} .band-dark input{border-color:transparent} /* ---------- pricing ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch} .plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;display:flex;flex-direction:column} .plan.is-featured{border:2px solid var(--amber);box-shadow:var(--shadow);position:relative} .plan .ribbon{position:absolute;top:-13px;left:28px;background:var(--amber);color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:6px} .price{font-family:var(--serif);font-size:2.6rem;font-weight:700;line-height:1;margin:14px 0 4px;color:var(--forest-2)} .price small{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--ink-2)} .plan .checks{flex:1;margin-top:20px} .plan .btn{margin-top:auto} /* ---------- article prose ---------- */ .prose{max-width:70ch;font-size:1.08rem} .prose h2{font-size:1.7rem;margin-top:1.8em} .prose h3{font-size:1.25rem;margin-top:1.5em} .prose p,.prose li{line-height:1.7} .prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--amber);font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--ink-2)} .prose .callout{background:var(--moss);border-radius:var(--radius-sm);padding:22px 24px;margin:1.8em 0} .prose .callout h4{margin-top:0} .prose .callout p:last-child{margin-bottom:0} .article-head{padding:64px 0 32px} .article-head h1{font-size:clamp(2.1rem,4.2vw,3.2rem)} .article-head .meta{margin-bottom:18px} .gate-box{background:var(--forest-2);color:#edf0e6;border-radius:var(--radius);padding:32px;margin:2.2em 0;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center} .gate-box h3{color:#fff;margin:0 0 6px} .gate-box p{margin:0;color:#c9d3c4;font-size:.95rem} .author-box{display:flex;gap:20px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:2.5em 0} .avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(160deg,var(--leaf),var(--forest));flex:none;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:700;font-size:1.4rem} /* ---------- resources ---------- */ .res{display:flex;flex-direction:column;gap:10px} .res .res-type{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .res h3{font-size:1.1rem;margin:0} .res .btn{align-self:flex-start;margin-top:8px} .res.is-locked{opacity:.92;background:var(--paper-2)} /* ---------- FAQ ---------- */ .faq details{border-top:1px solid var(--line);padding:18px 0} .faq details:last-child{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--amber-text);line-height:1} .faq details[open] summary::after{content:"–"} .faq details p{margin:12px 0 0;color:var(--ink-2)} /* ---------- modal ---------- */ .modal{position:fixed;inset:0;background:rgba(18,40,26,.6);display:grid;place-items:center;z-index:100;padding:20px} .modal-card{position:relative;background:var(--card);border-radius:var(--radius);padding:36px;max-width:480px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35)} .modal-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink-3)} .modal-card h3{margin-bottom:8px} /* ---------- CTA band + footer ---------- */ .cta-band{background:linear-gradient(135deg,var(--forest-2),var(--forest));color:#fff;padding:64px 0} .cta-band h2{color:#fff;margin-bottom:8px} .cta-band .lede{color:#d6ddcf;margin-bottom:24px} .cta-band .form-inline{margin:0 auto} .cta-band input{border-color:transparent} .site-footer{background:var(--forest-3);color:#b9c4b5;padding:56px 0 28px;font-size:.92rem} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .site-footer h4{color:#fff;font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px} .site-footer ul{list-style:none;padding:0;margin:0} .site-footer li{margin-bottom:8px} .site-footer a{color:#d6ddcf} .site-footer .brand{color:#fff;margin-bottom:14px} .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:#8e9b8a} .footer-bottom p{margin:0} .footer-bottom a{color:#b9c4b5} /* ---------- responsive ---------- */ @media (max-width:960px){ .grid-4{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:860px){ .nav-toggle{display:inline-block} .nav{display:none;position:absolute;left:0;right:0;top:66px;background:var(--forest-2);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px;border-bottom:1px solid rgba(255,255,255,.1)} .nav.open{display:flex} .nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)} .nav a.btn{margin-top:12px;justify-content:center;border-bottom:0} .hero{padding:48px 0 40px} .hero-grid,.kit-grid,.split,.split-narrow,.feature,.grid-3,.steps,.plans{grid-template-columns:1fr} .hero-grid{grid-template-areas:"head" "photo" "body";row-gap:8px} .hero-head{align-self:auto} .hero-body{align-self:auto} .hero-photo{width:100%;max-width:340px;justify-self:center;margin:8px 0 4px} .stats{gap:28px;flex-wrap:wrap} .section{padding:56px 0} .section-head{flex-direction:column;align-items:flex-start;gap:8px} .gate-box{grid-template-columns:1fr} } @media (max-width:600px){ body{font-size:16px} .grid-2,.grid-4{grid-template-columns:1fr} .form-inline{flex-direction:column} .form-inline .btn{width:100%} .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column} .card{padding:22px} .kit-cover{transform:none;width:min(280px,90%)} } /* ---------- real photos & video row ---------- */ .photo{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--paper-2)} .photo.square{aspect-ratio:1} .photo.landscape{aspect-ratio:16/10} .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .video{display:flex;flex-direction:column;gap:10px;color:var(--ink)} .video:hover{text-decoration:none} .video:hover h3{color:var(--forest)} .video .frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;background:var(--forest-3);box-shadow:var(--shadow)} .video .frame img{width:100%;height:100%;object-fit:cover;display:block} .video .play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(28,58,39,.85);display:grid;place-items:center;transition:background .15s,transform .15s} .video .play::after{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff} .video:hover .play{background:var(--amber);transform:scale(1.06)} .video h3{font-size:1.05rem;margin:0} .video .meta{margin:0} .band-dark .video{color:#edf0e6} .band-dark .video h3{color:#fff} .band-dark .video:hover h3{color:var(--amber)} .yt-btn{display:inline-flex;align-items:center;gap:10px} .yt-btn svg{width:22px;height:22px} @media (max-width:860px){.video-grid{grid-template-columns:1fr}} /* ---------- portrait: Joe cut out in front of the brand's sun-and-hills scene ---------- */ .portrait{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:4/5} .portrait-scene{position:absolute;left:0;right:0;bottom:0;top:20%;border-radius:999px 999px 28px 28px;overflow:hidden; background:linear-gradient(180deg,#cfe3ee 0%,#ecefe3 58%,#f4efe1 100%);box-shadow:var(--shadow)} .portrait-scene .sun{position:absolute;left:50%;top:-8%;width:42%;aspect-ratio:1;border-radius:50%;background:var(--amber);transform:translateX(-50%); box-shadow:0 0 0 16px rgba(233,168,59,.16),0 0 0 36px rgba(233,168,59,.08)} .portrait-scene .hill-far{position:absolute;left:-35%;right:-25%;bottom:-40%;height:72%;border-radius:50% 50% 0 0;background:var(--leaf)} .portrait-scene .hill-near{position:absolute;left:-15%;right:-50%;bottom:-55%;height:78%;border-radius:50% 50% 0 0;background:var(--forest)} .portrait-clip{position:absolute;inset:0;overflow:hidden;border-radius:0 0 28px 28px} .portrait-img{position:absolute;bottom:0;left:50%;width:96%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 16px 22px rgba(18,40,26,.30))} .portrait-tag{position:absolute;left:-16px;bottom:28px;margin:0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px 11px;box-shadow:var(--shadow);transform:rotate(-2.5deg);max-width:66%} .portrait-tag strong{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.2} .portrait-tag span{display:block;font-size:.76rem;color:var(--ink-2);line-height:1.35;margin-top:3px} .portrait.round{aspect-ratio:1/1.08;max-width:380px} .portrait.round .portrait-scene{top:auto;height:92%;border-radius:50%} .portrait.round .portrait-clip{border-radius:0 0 50% 50%/0 0 40% 40%} .portrait.round .portrait-img{width:90%} .portrait.round .portrait-scene .sun{top:-2%;width:46%} .portrait.round .portrait-tag{left:auto;right:-10px;bottom:10px;transform:rotate(2deg)} @media (prefers-reduced-motion:no-preference){ .portrait-img{animation:portrait-rise 1s cubic-bezier(.2,.7,.2,1) both} .portrait-scene .sun{animation:portrait-sunrise 1.6s cubic-bezier(.2,.7,.2,1) both} .portrait-tag{animation:portrait-tag .7s .35s cubic-bezier(.2,.7,.2,1) both} @keyframes portrait-rise{from{transform:translate(-50%,26px)}to{transform:translate(-50%,0)}} @keyframes portrait-sunrise{from{transform:translate(-50%,40%)}to{transform:translate(-50%,0)}} @keyframes portrait-tag{from{transform:rotate(-2.5deg) translateY(10px);opacity:.001}to{transform:rotate(-2.5deg) translateY(0);opacity:1}} } @media (max-width:860px){.portrait{max-width:360px}.portrait.round{max-width:320px}} /* ---------- phone pass ---------- */ @media (max-width:600px){ .hero{padding:32px 0 40px} .lede{font-size:1.05rem} .eyebrow{font-size:.7rem;letter-spacing:.12em} .quick-links{gap:8px} .pill{font-size:.82rem;padding:8px 12px} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;padding-top:22px} .stat-n{font-size:1.5rem} .stat-l{font-size:.64rem;letter-spacing:.06em} .section{padding:48px 0} .section-tight{padding:36px 0} .portrait{max-width:300px} .portrait-scene{top:16%} .portrait-tag{left:-8px;bottom:18px;padding:8px 12px 9px;max-width:72%} .portrait-tag strong{font-size:.95rem} .portrait-tag span{font-size:.7rem} .portrait.round{max-width:260px} .quote{font-size:1.25rem!important} .steps .step,.card{padding:22px 20px} .card-num{font-size:1.8rem} .price{font-size:2.2rem} .kit-cover{padding:22px} .kit-cover .kc-title{font-size:1.6rem} .article-head{padding:40px 0 20px} .prose{font-size:1.02rem} .prose h2{font-size:1.45rem} .gate-box{padding:24px} .cta-band{padding:48px 0} .site-footer{padding:40px 0 24px} .wrap{padding:0 20px} } /* ---------- career timeline (about page) ---------- */ .timeline{display:grid;grid-template-columns:max-content 1fr;gap:16px 24px;margin:0 0 1.6em} .timeline dt{font-family:var(--serif);font-weight:700;color:var(--amber-text);font-size:1.05rem;line-height:1.7;white-space:nowrap} .timeline dd{margin:0} .prose .timeline dd{line-height:1.6} @media (max-width:600px){.timeline{grid-template-columns:1fr;gap:2px 0}.timeline dd{margin-bottom:16px}}