/* ============================================================ THISTLE & CAIRN — site styles Light theme (A) + Dark theme (B), auto via prefers-color-scheme with manual override on . Purple = primary accent, green = secondary. Sentence case throughout. ============================================================ */ /* ---------- LIGHT (default) ---------- */ :root{ --bg:#f4f1ea; --surface:#ece4d4; --surface-2:#e4dbc8; --panel-bg:#222a20; /* inverse moss panel */ --panel-text:#eee7d8; --panel-soft:#bcae98; --panel-line:rgba(200,186,156,.16); --text:#252a20; --text-soft:#535949; --text-faint:#878b7b; --line:rgba(37,42,32,.13); --line-strong:rgba(37,42,32,.22); --accent:#6e5b91; /* thistle purple */ --accent-hover:#594879; --accent-soft:#8a77ac; --green:#4e7a48; /* secondary green */ --green-soft:#6f9a67; --stone:#8f7d62; --card:#ece4d4; --card-border:rgba(37,42,32,.09); --shadow:0 1px 2px rgba(37,42,32,.05), 0 10px 34px rgba(37,42,32,.06); --maxw:1180px; --gutter:clamp(22px, 5vw, 72px); --font-display:'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --font-body:'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; color-scheme:light; } /* ---------- DARK (manual) ---------- */ html[data-theme="dark"]{ --bg:#161b16; --surface:#1f271f; --surface-2:#2a342a; --panel-bg:#212a21; --panel-text:#efe8da; --panel-soft:#bcae98; --panel-line:rgba(200,186,156,.14); --text:#efe8da; --text-soft:#bdb19b; --text-faint:#8a8d7d; --line:rgba(200,186,156,.14); --line-strong:rgba(200,186,156,.24); --accent:#a78fc6; --accent-hover:#bca6d8; --accent-soft:#b9a5d6; --green:#88aa79; --green-soft:#a0bf91; --stone:#b6aa92; --card:#1f271f; --card-border:rgba(200,186,156,.11); --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 44px rgba(0,0,0,.4); color-scheme:dark; } /* ---------- DARK (auto, unless user forced light) ---------- */ @media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --bg:#161b16; --surface:#1f271f; --surface-2:#2a342a; --panel-bg:#212a21; --panel-text:#efe8da; --panel-soft:#bcae98; --panel-line:rgba(200,186,156,.14); --text:#efe8da; --text-soft:#bdb19b; --text-faint:#8a8d7d; --line:rgba(200,186,156,.14); --line-strong:rgba(200,186,156,.24); --accent:#a78fc6; --accent-hover:#bca6d8; --accent-soft:#b9a5d6; --green:#88aa79; --green-soft:#a0bf91; --stone:#b6aa92; --card:#1f271f; --card-border:rgba(200,186,156,.11); --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 44px rgba(0,0,0,.4); color-scheme:dark; } } /* ---------- base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .4s ease, color .4s ease; } h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05; letter-spacing:-.018em;text-wrap:balance} p{text-wrap:pretty} a{color:inherit;text-decoration:none} svg{display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .accent{color:var(--accent)} .green{color:var(--green)} /* eyebrow — sentence case, mono, restrained */ .eyebrow{ font-family:var(--font-mono); font-size:13px;letter-spacing:.01em;font-weight:500; color:var(--accent); } .eyebrow .tick{color:var(--text-faint)} /* mono micro-labels — sentence case now */ .label{ font-family:var(--font-mono);font-size:12.5px;letter-spacing:.01em; color:var(--stone);font-weight:500; } /* marks */ .mark{color:var(--accent)} .mark.stone{color:var(--stone)} .mark.green{color:var(--green)} /* image placeholder */ .ph{ position:relative;overflow:hidden;border-radius:3px; background-color:var(--surface-2); background-image:repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 2px, transparent 2px 12px); display:flex;align-items:flex-end; } .ph .tag{ font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em; color:var(--text-soft);background:color-mix(in srgb, var(--bg) 80%, transparent); padding:6px 10px;margin:12px;border-radius:2px;backdrop-filter:blur(2px); } /* uncertain-copy marker */ .todo{border-bottom:1px dotted currentColor;opacity:.9} /* buttons */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body); font-weight:600;font-size:15px;padding:13px 24px;border-radius:3px;cursor:pointer; border:1px solid transparent;transition:.16s;white-space:nowrap;line-height:1} .btn.fill{background:var(--accent);color:#fff} .btn.fill:hover{background:var(--accent-hover)} .btn.ghost{border-color:var(--line-strong);color:var(--text)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)} /* ============================================================ NAV ============================================================ */ .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav .row{display:flex;align-items:center;justify-content:space-between; max-width:1280px;margin:0 auto;padding:18px var(--gutter)} .brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display); font-weight:600;font-size:19px;letter-spacing:-.01em} .brand .thistle{width:18px;height:26px;color:var(--accent)} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{font-size:15px;color:var(--text-soft);transition:color .15s;white-space:nowrap} .nav-links a:hover{color:var(--accent)} .theme-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:3px;border:1px solid var(--line-strong);background:transparent;color:var(--text-soft); cursor:pointer;transition:.15s;margin-left:4px} .theme-toggle:hover{color:var(--accent);border-color:var(--accent)} .theme-toggle svg{width:18px;height:18px} .theme-toggle .moon{display:none} html[data-theme="dark"] .theme-toggle .sun{display:none} html[data-theme="dark"] .theme-toggle .moon{display:block} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .theme-toggle .sun{display:none} html:not([data-theme="light"]) .theme-toggle .moon{display:block} } /* ============================================================ HERO — centered ============================================================ */ .hero{text-align:center;padding:clamp(70px,11vw,128px) 0 clamp(56px,8vw,96px)} .hero .eyebrow{margin-bottom:26px} .hero h1{font-size:clamp(44px,7vw,82px);max-width:16ch;margin:0 auto 26px;color:var(--text)} .hero h1 em{font-style:normal;color:var(--accent)} .hero .lede{font-size:clamp(18px,2.2vw,21px);line-height:1.55;color:var(--text-soft); max-width:54ch;margin:0 auto 36px} .hero .cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap} /* ============================================================ ETHOS — the great & ============================================================ */ .ethos{position:relative;overflow:hidden;background:var(--surface); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .ethos .row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,72px); align-items:center;padding:clamp(48px,7vw,84px) 0} .ethos .amp{font-family:var(--font-display);font-weight:600;line-height:.74; font-size:clamp(150px,22vw,290px);color:var(--accent);opacity:.16; user-select:none;margin:-.1em 0} .ethos p{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3.4vw,36px); line-height:1.28;color:var(--text);max-width:24ch} .ethos p b{font-weight:500;color:var(--green)} @media (max-width:720px){ .ethos .row{grid-template-columns:1fr;gap:8px} .ethos .amp{font-size:130px} } /* ============================================================ SECTION HEADS ============================================================ */ .sec{padding:clamp(64px,9vw,108px) 0} .sec-head{margin-bottom:clamp(36px,5vw,54px)} .sec-head.center{text-align:center} .sec-head .eyebrow{display:block;margin-bottom:16px} .sec-head h2{font-size:clamp(32px,4.6vw,50px);max-width:20ch;color:var(--text)} .sec-head.center h2{margin:0 auto} /* ============================================================ PHILOSOPHY — cards with colored top border ============================================================ */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .pcard{background:var(--card);border:1px solid var(--card-border);border-radius:4px; border-top:3px solid var(--bdr);padding:clamp(28px,3vw,38px);box-shadow:var(--shadow)} .pcard.thistle{--bdr:var(--accent)} .pcard.cairn{--bdr:var(--stone)} .pcard.cross{--bdr:var(--green)} .pcard .mk{height:46px;margin-bottom:26px;display:flex;align-items:flex-end} .pcard.thistle .mk{color:var(--accent)} .pcard.cairn .mk{color:var(--stone)} .pcard.cross .mk{color:var(--green)} .pcard .mk .thistle{width:32px;height:46px} .pcard .mk .cairn{width:46px;height:40px} .pcard .mk .amp{font-family:var(--font-display);font-weight:600;font-size:44px;line-height:.8} .pcard h3{font-size:26px;margin-bottom:8px;color:var(--text)} .pcard .tags{font-family:var(--font-mono);font-size:12.5px;color:var(--stone);margin-bottom:18px} .pcard p{font-size:15.5px;color:var(--text-soft);line-height:1.62} @media (max-width:860px){.pillars{grid-template-columns:1fr;gap:14px}} /* ============================================================ THE WORK — feature + two service columns (responsive) ============================================================ */ .work-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;align-items:stretch} .wfeat{background:var(--panel-bg);color:var(--panel-text);border-radius:4px;overflow:hidden; display:flex;flex-direction:column;box-shadow:var(--shadow)} .wfeat .fig{height:clamp(170px,22vw,220px);background-color:#2c372c; background-image:repeating-linear-gradient(135deg,rgba(185,165,214,.16) 0 2px,transparent 2px 12px); display:flex;align-items:flex-end} .wfeat .fig .tag{font-family:var(--font-mono);font-size:11.5px;color:var(--panel-soft); background:rgba(20,25,20,.5);padding:6px 10px;margin:12px;border-radius:2px} .wfeat .body{padding:clamp(26px,3vw,34px);display:flex;flex-direction:column;flex:1} .wfeat .pill{align-self:flex-start;font-family:var(--font-mono);font-size:11.5px; color:var(--accent-soft);border:1px solid var(--accent);border-radius:99px; padding:5px 12px;margin-bottom:18px} .wfeat h3{font-size:clamp(26px,3vw,32px);color:#fff;margin-bottom:10px} .wfeat p{color:var(--panel-soft);font-size:15.5px;margin-bottom:auto;max-width:42ch} .wfeat .lk{margin-top:22px;align-self:flex-start;font-weight:600;color:var(--accent-soft); font-size:14.5px;border-bottom:1.5px solid var(--accent-soft);padding-bottom:2px} .wcol{background:var(--card);border:1px solid var(--card-border);border-radius:4px; padding:clamp(26px,3vw,34px);display:flex;flex-direction:column;box-shadow:var(--shadow)} .wcol .label{margin-bottom:22px;color:var(--green)} .wcol ul{list-style:none} .wcol li{padding:13px 0;border-top:1px solid var(--line);font-size:16.5px; display:flex;align-items:center;gap:12px;color:var(--text)} .wcol li:first-child{border-top:none} .wcol li .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none} @media (max-width:920px){ .work-grid{grid-template-columns:1fr 1fr} .wfeat{grid-column:1 / -1} } @media (max-width:560px){ .work-grid{grid-template-columns:1fr} } /* ============================================================ CONTACT ============================================================ */ /* Option A — two-column with form */ .contact-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px); background:var(--panel-bg);color:var(--panel-text);border-radius:5px; padding:clamp(40px,5vw,64px);box-shadow:var(--shadow);align-items:start} .contact-card .eyebrow{color:var(--accent-soft);margin-bottom:18px;display:block} .contact-card h2{font-size:clamp(30px,3.8vw,44px);color:#fff;margin-bottom:16px} .contact-card .intro{color:var(--panel-soft);font-size:17px;max-width:36ch;margin-bottom:30px} .contact-card .detail{margin-bottom:18px} .contact-card .detail .label{color:var(--green-soft);margin-bottom:4px;display:block} .contact-card .detail .val{font-size:18px;color:var(--panel-text)} form .field{margin-bottom:18px} form label{display:block;font-family:var(--font-mono);font-size:12.5px;color:var(--panel-soft); margin-bottom:8px} form input,form textarea{width:100%;background:rgba(255,255,255,.05); border:1px solid var(--panel-line);border-radius:3px;padding:13px 15px; font-family:var(--font-body);font-size:15.5px;color:var(--panel-text);transition:.15s} form input::placeholder,form textarea::placeholder{color:color-mix(in srgb,var(--panel-soft) 65%,transparent)} form input:focus,form textarea:focus{outline:none;border-color:var(--accent-soft); background:rgba(255,255,255,.08)} form textarea{resize:vertical;min-height:104px} form .btn.fill{width:100%;justify-content:center;margin-top:4px} form .formnote{font-family:var(--font-mono);font-size:11.5px;color:var(--panel-soft); opacity:.7;margin-top:12px;text-align:center} @media (max-width:720px){.contact-card{grid-template-columns:1fr;gap:34px}} /* Option B — centered "begin a conversation" */ .contact-center{text-align:center;padding:clamp(72px,9vw,112px) 0 clamp(48px,6vw,72px)} .contact-center .eyebrow{display:block;margin-bottom:22px} .contact-center h2{font-size:clamp(38px,5.5vw,62px);color:var(--text);margin-bottom:20px} .contact-center p{color:var(--text-soft);font-size:18px;max-width:44ch;margin:0 auto 34px} /* ============================================================ FOOTER ============================================================ */ .foot{border-top:1px solid var(--line);padding:42px 0 56px; display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} .foot .brand{font-size:17px} .foot .meta{color:var(--text-faint);font-size:14px} .foot .fnav{display:flex;gap:22px} .foot .fnav a{color:var(--text-soft);font-size:14px} .foot .fnav a:hover{color:var(--accent)} @media (max-width:560px){.foot{flex-direction:column;align-items:flex-start;gap:14px}}