:root{
  --bg:#0F0F11; --panel:#161618; --panel-2:#1C1C1F;
  --line:#2C2C2E; --text:#F7F6F3; --muted:#A8A29B; --faint:#7A746D;
  --accent:#E67E00; --accent-ink:#140C02; --accent-dim:#D97706;
  --danger:#ff453a; --ok:#3ec98a; --text-soft:#E6E2DC;
  --ink:#0F0F11;                     /* text on orange and white bands */
  --radius:18px; --maxw:1140px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.08}
h1 em,h2 em,h3 em{color:var(--accent);font-style:normal}
.socialrow a svg{width:19px;height:19px;fill:currentColor}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block;border-radius:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
header.site{
  display:flex;align-items:center;gap:16px;padding:22px 0;
  border-bottom:1px solid var(--line);
}
header.site .brand{font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
header.site .brand span{color:var(--accent)}
header.site nav{margin-left:auto;display:flex;gap:22px;font-size:.95rem}
header.site nav a{color:var(--muted)}
header.site nav a:hover{color:var(--text);text-decoration:none}
.mobile-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px 12px;font-size:1.1rem}
@media (max-width:720px){
  header.site nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--panel);
    flex-direction:column;padding:16px 24px;border-bottom:1px solid var(--line);gap:14px;z-index:20}
  header.site nav.open{display:flex}
  .mobile-toggle{display:block;margin-left:auto}
}

/* ---------- Hero ---------- */
.hero{padding:72px 0 56px}
.hero h1{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;max-width:18ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin-top:18px;max-width:56ch;color:var(--muted);font-size:1.08rem}
.cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;align-items:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;
  font-weight:600;font-size:.95rem;border:1px solid var(--line);color:var(--text);
  background:var(--panel-2);cursor:pointer;
}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:var(--accent-ink);border-color:transparent;font-weight:700}

/* ---------- Sections ---------- */
section.block{padding:56px 0}
section.block h2{font-size:1.6rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
section.block .lede{color:var(--muted);max-width:60ch;margin-bottom:32px}

/* ---------- Cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
.card h3{font-size:1.1rem;font-weight:700}
.card p{color:var(--muted);font-size:.92rem;flex:1}
.card .meta{font-size:.78rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.card img{aspect-ratio:16/9;object-fit:cover;margin-bottom:4px}

/* ---------- Post page ---------- */
.post-hero{max-width:820px;margin:0 auto;padding:52px 24px 0}
.post-hero .cat{color:var(--accent);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.post-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin-top:10px;line-height:1.15}
.post-hero .meta{color:var(--faint);margin-top:14px;font-size:.9rem}
.post-body{max-width:760px;margin:0 auto;padding:36px 24px 60px;font-size:1.05rem}
.post-body h2{font-size:1.5rem;font-weight:800;margin:36px 0 14px}
.post-body h3{font-size:1.2rem;font-weight:700;margin:28px 0 10px}
.post-body p{margin-bottom:18px;color:var(--text-soft)}
.post-body ul,.post-body ol{margin:0 0 18px 22px}
.post-body li{margin-bottom:6px}
.post-body blockquote{border-left:3px solid var(--accent);padding-left:18px;color:var(--muted);margin:20px 0}
.post-body pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;overflow-x:auto;margin-bottom:18px}
.post-body code{background:var(--panel);border-radius:4px;padding:1px 6px;font-size:.9em}
.post-body img{margin:24px 0}

/* ---------- Forms (admin) ---------- */
.formgrid{display:flex;flex-direction:column;gap:16px;max-width:760px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:6px}
input,select,textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font:inherit;font-size:.95rem;padding:11px 13px;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
textarea{resize:vertical;min-height:260px;font-family:ui-monospace,Consolas,monospace;line-height:1.6}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.row2{grid-template-columns:1fr}}

/* ---------- Admin shell ---------- */
.admin-shell{display:flex;min-height:100vh}
.admin-nav{width:220px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:24px 16px}
.admin-nav .brand{font-weight:800;margin-bottom:24px;display:block}
.admin-nav a{display:block;padding:10px 12px;border-radius:10px;color:var(--muted);font-size:.92rem;margin-bottom:4px}
.admin-nav a:hover,.admin-nav a.active{background:var(--panel-2);color:var(--text);text-decoration:none}
.admin-main{flex:1;padding:32px 36px;max-width:960px}
.admin-main h1{font-size:1.5rem;font-weight:800;margin-bottom:6px}
.admin-table{width:100%;border-collapse:collapse;margin-top:20px}
.admin-table th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:10px 12px;border-bottom:1px solid var(--line)}
.admin-table td{padding:12px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:uppercase}
.badge.published{background:rgba(62,201,138,.15);color:var(--ok)}
.badge.draft{background:rgba(179,79,15,.2);color:var(--accent)}
.icon-btn{background:none;border:none;color:var(--faint);cursor:pointer;font-size:1rem;padding:4px 8px}
.icon-btn:hover{color:var(--danger)}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:20px;font-size:.9rem}
.flash.ok{background:rgba(62,201,138,.12);color:var(--ok);border:1px solid rgba(62,201,138,.3)}
.flash.err{background:rgba(255,69,58,.12);color:var(--danger);border:1px solid rgba(255,69,58,.3)}
.login-wrap{max-width:380px;margin:14vh auto;padding:0 24px}
.login-wrap .card{padding:32px 32px 36px}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);padding:36px 0;margin-top:40px;color:var(--faint);font-size:.88rem}
footer.site .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.site a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ==========================================================================
   Light theme
   Everything in this stylesheet reads from the tokens above, so flipping the
   tokens flips the whole site — portfolio, admin and services page alike.
   Set by /assets/js/theme.js before first paint; shares its storage key with
   the /apps/ utils suite so the choice carries across the whole domain.
   ========================================================================== */
html[data-theme="light"]{
  --bg:#FBFAF8; --panel:#FFFFFF; --panel-2:#F2EFEA;
  --line:#E2DDD5; --text:#14141A; --muted:#66625C; --faint:#8A857E;
  --accent:#C96A00; --accent-ink:#FFF7EE; --accent-dim:#A85600;
  --danger:#c62f24; --ok:#1f8c60; --text-soft:#24242C; --ink:#0F0F11;
}
html[data-theme="light"] img{box-shadow:0 1px 3px rgba(80,60,35,.10)}

/* Theme toggle in the header */
.theme-toggle{
  width:46px;height:26px;border-radius:99px;border:1px solid var(--line);
  background:var(--panel-2);position:relative;cursor:pointer;flex:none;padding:0;
  align-self:center;
}
.theme-toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--accent);transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
html[data-theme="light"] .theme-toggle::after{transform:translateX(20px);background:#1a1613}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ==========================================================================
   Services page
   Prefixed .svc- throughout so none of it can collide with the portfolio's
   own .hero / .card / .grid rules.
   ========================================================================== */
:root{
  --ill-sky-1:#3B1E0C; --ill-sky-2:#7A3A0E; --ill-sky-3:#B85A10;
  --ill-bg:#241A13; --ill-deep:#33241A; --ill-mid:#6E441D;
  --ill-sun:#FFB03B; --ill-accent:#ff7a1a; --ill-teal:#2E9B80;
  --ill-sil:#0E0B08; --ill-ground:#0E0B08; --ill-paper:#F2E6D6;
  --svc-scrim:linear-gradient(180deg,rgba(15,13,11,.12) 0%,rgba(15,13,11,.58) 48%,rgba(15,13,11,.94) 100%);
}
html[data-theme="light"]{
  --ill-sky-1:#FBE3BE; --ill-sky-2:#F6C98A; --ill-sky-3:#EFA95C;
  --ill-bg:#F7EADA; --ill-deep:#EFDCC2; --ill-mid:#D9A469;
  --ill-sun:#F2A13C; --ill-accent:#d96a0c; --ill-teal:#1F8C74;
  --ill-sil:#5C3317; --ill-ground:#B9793C; --ill-paper:#FFF8EE;
  --svc-scrim:linear-gradient(180deg,rgba(250,247,243,.05) 0%,rgba(250,247,243,.64) 44%,rgba(250,247,243,.96) 100%);
}

.svc-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;
  padding-bottom:clamp(36px,6vh,72px);overflow:hidden}
.svc-hero-art{position:absolute;inset:0;z-index:0}
.svc-hero-art svg,.svc-hero-art img{width:100%;height:100%;object-fit:cover;border-radius:0;
  transform:scale(1.06);animation:svcPan 26s ease-in-out infinite alternate}
@keyframes svcPan{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}}
.svc-hero-art::after{content:"";position:absolute;inset:0;background:var(--svc-scrim)}
.svc-aurora{position:absolute;z-index:1;width:min(760px,105vw);aspect-ratio:1;left:56%;top:-16%;
  background:radial-gradient(circle at 50% 50%,rgba(255,122,26,.34),rgba(255,122,26,0) 62%);
  filter:blur(10px);animation:svcFloat 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes svcFloat{from{transform:translate3d(-6%,0,0) scale(1)}to{transform:translate3d(6%,6%,0) scale(1.12)}}
.svc-hero .wrap{position:relative;z-index:2;width:100%}

/* ---------- Photography client feedback ---------- */
.photo-feedback .sec{margin-bottom:24px}
.feedback-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:24px 0}
.feedback-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.feedback-card blockquote{color:var(--text-soft);margin:12px 0 18px;white-space:normal}
.feedback-stars{color:var(--accent);letter-spacing:.12em;font-size:1rem}
.feedback-stars span{color:var(--faint)}
.feedback-byline{font-size:.9rem;color:var(--muted)}
.feedback-byline strong{color:var(--text)}
.feedback-admin-card{display:block}
@media(max-width:600px){.feedback-card{padding:18px}}

/* A photo hero stays dark in both themes. A dusk photograph is dark by
   nature; the light theme's cream scrim was turning it into fog. Instead the
   hero keeps light text on a dark scrim, darker on the left where the text
   sits, and fades into the page below. */
.svc-hero--photo{
  --text:#f5efe8; --muted:#dcd2c7; --line:rgba(255,255,255,.2); --accent:#ff8a2a;
  --panel:#17130f; --panel-2:rgba(23,19,15,.72);
  color:var(--text);
}
.svc-hero--photo .svc-hero-art::after{
  background:
    linear-gradient(90deg, rgba(15,13,11,.82) 0%, rgba(15,13,11,.55) 42%, rgba(15,13,11,.12) 78%, rgba(15,13,11,.05) 100%),
    linear-gradient(180deg, rgba(15,13,11,.25) 0%, rgba(15,13,11,0) 30%, rgba(15,13,11,0) 60%, rgba(15,13,11,.85) 100%);
}
html[data-theme="light"] .svc-hero--photo .svc-hero-art::after{
  background:
    linear-gradient(90deg, rgba(15,13,11,.78) 0%, rgba(15,13,11,.50) 42%, rgba(15,13,11,.10) 78%, rgba(15,13,11,.04) 100%),
    linear-gradient(180deg, rgba(15,13,11,.2) 0%, rgba(15,13,11,0) 35%, rgba(15,13,11,0) 70%, rgba(15,13,11,.55) 100%);
}
.svc-hero--photo .svc-aurora{opacity:.55}
.svc-hero--photo .btn:not(.primary){background:var(--panel-2);border-color:var(--line);color:var(--text)}
.svc-hero h1{font-size:clamp(2.1rem,6vw,3.6rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.05;max-width:16ch}
.svc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;color:var(--accent);
  font-weight:600;margin-bottom:18px}
.svc-eyebrow::before{content:"";width:24px;height:2px;background:var(--accent)}
.svc-rot{position:relative;display:inline-grid;vertical-align:bottom}
.svc-rot span{grid-area:1/1;color:var(--accent);opacity:0;transform:translateY(.22em);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.svc-rot span.on{opacity:1;transform:none}
.svc-lede{max-width:52ch;margin-top:22px;color:var(--muted);font-size:1.06rem}
.svc-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.svc-facts{display:flex;gap:24px;flex-wrap:wrap;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.svc-facts b{color:var(--text);font-weight:600}

.svc-head{max-width:62ch;margin-bottom:clamp(28px,5vw,52px)}
.svc-head h2{font-size:clamp(1.5rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.svc-head p{margin-top:14px;color:var(--muted)}
.svc-tamil{color:var(--accent);font-size:1.05rem;margin-top:6px}

.svc-band{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,52px);
  align-items:center;padding-block:clamp(28px,4vw,50px);border-top:1px solid var(--line)}
.svc-band:first-of-type{border-top:0}
.svc-shot{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  background:var(--panel-2)}
.svc-shot svg,.svc-shot img{width:100%;height:100%;object-fit:cover;border-radius:0;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.svc-band:hover .svc-shot svg,.svc-band:hover .svc-shot img{transform:scale(1.04)}
.svc-band.flip .svc-shot{order:2}
.svc-band h3{font-size:clamp(1.25rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.015em;margin-bottom:12px}
.svc-band p{color:var(--muted);max-width:48ch}
.svc-kicker{font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--accent);
  display:flex;align-items:center;gap:10px;margin-bottom:12px}
.svc-kicker::before{content:"";width:18px;height:2px;background:var(--accent)}
.svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.svc-chips li{font-size:.85rem;padding:6px 13px;border-radius:99px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--text)}
.svc-price{margin-top:18px;font-size:.9rem;color:var(--muted)}
.svc-price strong{color:var(--text);font-weight:600}
.svc-flag{margin-top:18px;padding:13px 15px 13px 17px;border-radius:12px;border:1px solid var(--line);
  border-left:3px solid var(--ok);background:var(--panel);font-size:.9rem;color:var(--muted)}
.svc-flag b{color:var(--ok);font-weight:600}
@media (max-width:840px){
  .svc-band{grid-template-columns:1fr}
  .svc-band.flip .svc-shot{order:0}
}

.svc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:svcstep}
.svc-step{padding:24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.svc-step::before{counter-increment:svcstep;content:counter(svcstep,decimal-leading-zero);
  font-weight:800;font-size:1.7rem;color:var(--accent);display:block;margin-bottom:10px}
.svc-step h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.svc-step p{color:var(--muted);font-size:.95rem}
@media (max-width:760px){.svc-steps{grid-template-columns:1fr}}

.svc-terms{background:var(--panel)}
.svc-acc{border-top:1px solid var(--line)}
.svc-acc:last-of-type{border-bottom:1px solid var(--line)}
.svc-acc summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-weight:700;font-size:clamp(1rem,2.2vw,1.2rem)}
.svc-acc summary::-webkit-details-marker{display:none}
.svc-acc summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.svc-acc[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.svc-acc summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.svc-acc-body{padding:0 0 24px;max-width:76ch;color:var(--muted);font-size:.95rem;
  animation:svcReveal .4s cubic-bezier(.2,.7,.2,1)}
@keyframes svcReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.svc-acc-body ul{margin:0;padding-left:20px}
.svc-acc-body li{margin-bottom:9px}
.svc-acc-body strong{color:var(--text)}

.svc-card-k{font-size:.8rem;color:var(--muted)}
.svc-card-v{font-size:1.05rem;font-weight:700}

.svc-rv{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.svc-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .svc-rv{opacity:1;transform:none;transition:none}
  .svc-hero-art svg,.svc-hero-art img,.svc-aurora{animation:none}
  .svc-rot span{transition:none}
}

/* Admin: let a textarea's rows attribute decide its height.
   The 260px floor above is right for the post editor, far too tall for a
   two-line intro field. */
textarea[rows]{min-height:0}

/* Admin: services editor */
.svc-admin-row{display:flex;align-items:center;gap:10px}
.svc-admin-row .tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.svc-thumb{width:92px;height:69px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.svc-noimg{width:92px;height:69px;border-radius:8px;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--faint);text-align:center;padding:6px}
details.svc-edit{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:12px}
details.svc-edit > summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none}
details.svc-edit > summary::-webkit-details-marker{display:none}
details.svc-edit .inner{padding:0 18px 20px}

/* ==========================================================================
   Portfolio — stats, project grid, experience timeline, education band
   Prefixed .pf- so none of it collides with the existing .card / .grid rules.
   ========================================================================== */

/* home hero */
.pf-stats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,54px);margin-top:34px;
  padding-top:24px;border-top:1px solid var(--line)}
.pf-stat strong{display:block;font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;
  letter-spacing:-.02em;color:var(--accent);line-height:1}
.pf-stat span{font-size:.85rem;color:var(--muted)}
.pf-socials{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:.9rem}
.pf-socials a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.pf-socials a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* filter tabs */
.pf-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pf-tab{font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;padding:8px 16px;
  border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--muted);
  transition:color .2s,border-color .2s,background-color .2s}
.pf-tab:hover{color:var(--text);border-color:var(--accent)}
.pf-tab.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pf-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pf-empty{color:var(--muted)}

/* project cards */
.pf-card{display:block;text-decoration:none;color:inherit}
.pf-shot{border-radius:12px;overflow:hidden;aspect-ratio:800/520;background:var(--panel-2);
  margin-bottom:16px}
.pf-shot img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pf-card:hover .pf-shot img{transform:scale(1.04)}
.pf-meta{display:flex;align-items:center;gap:10px;font-size:.78rem;margin-bottom:8px}
.pf-cat{color:var(--accent);font-weight:700;letter-spacing:.03em}
.pf-year{color:var(--faint)}
.pf-card h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.pf-card p{color:var(--muted);font-size:.93rem}

/* experience timeline */
.pf-timeline{list-style:none;margin:0;padding:0 0 0 26px;position:relative;max-width:760px}
.pf-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:var(--line)}
.pf-timeline > li{position:relative;padding-bottom:30px}
.pf-timeline > li::before{content:"";position:absolute;left:-26px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.pf-timeline > li:last-child{padding-bottom:0}
.pf-when{font-size:.8rem;color:var(--accent);font-weight:600;letter-spacing:.02em}
.pf-timeline h3{font-size:1.1rem;font-weight:700;margin:4px 0 2px}
.pf-where{color:var(--muted);font-size:.92rem;margin:0}
.pf-timeline > li ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:.92rem}
.pf-timeline > li ul li{margin-bottom:6px}

/* education */
.pf-edu-band{background:var(--panel)}
.pf-edu .pf-years{font-size:.8rem;font-weight:700;color:var(--accent)}
.pf-edu h3{font-size:1.05rem;font-weight:700;margin:6px 0 6px}
.pf-edu p{color:var(--muted);font-size:.92rem;margin:0}
.pf-edu .pf-note{margin-top:8px;font-size:.85rem;color:var(--faint)}

/* ==========================================================================
   Portfolio design language
   Editorial serif headings, an orange dot eyebrow, and full-bleed bands that
   invert the page — orange with black text, or white with black text. The
   bands are the backbone of the look, so they keep their colours in both
   themes rather than flipping with everything else.
   ========================================================================== */

/* eyebrow pill — ● LABEL */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:8px 16px;border-radius:99px;border:1px solid var(--line);
  color:var(--text);background:transparent;margin-bottom:20px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* full-bleed bands */
.band{
  background:var(--accent);color:var(--ink);
  padding:clamp(56px,8vw,104px) 0;
  --text:var(--ink); --muted:#3A2A12; --line:rgba(15,15,17,.22);
  --panel:#FFFFFF; --panel-2:rgba(255,255,255,.55);
}
.band-paper{
  background:#FFFFFF;color:var(--ink);
  padding:clamp(56px,8vw,104px) 0;
  --text:var(--ink); --muted:#5B5952; --line:#E6E2DB;
  --panel:#FFFFFF; --panel-2:#F4F2EE;
}
.band .eyebrow,.band-paper .eyebrow{border-color:var(--line);color:var(--ink)}
.band .eyebrow::before{background:var(--ink)}
.band a,.band-paper a{color:inherit}

/* ↳ links and buttons */
.arrow::before{content:"↳";margin-right:.5em;color:var(--accent);font-family:var(--sans)}
.btn{font-family:var(--sans);font-weight:600}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.band .btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}

/* section heading block */
.sec{margin-bottom:clamp(30px,5vw,54px);max-width:46ch}
.sec h2{font-size:clamp(2rem,5vw,3.2rem)}
.sec p{color:var(--muted);margin-top:14px;font-family:var(--sans)}

/* stat band */
.statband{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,5vw,56px)}
.statband .v{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;letter-spacing:-.02em}
.statband .k{font-family:var(--sans);font-weight:700;font-size:1rem;margin:18px 0 8px;
  padding-top:16px;border-top:1px solid var(--line)}
.statband p{font-family:var(--sans);font-size:.92rem;color:var(--muted)}
@media(max-width:760px){.statband{grid-template-columns:1fr}}

/* card strips — journey, engineering */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);align-items:stretch}
@media(max-width:900px){.strip{grid-template-columns:1fr}}
.tile{border-radius:var(--radius);padding:clamp(24px,3vw,34px);border:1px solid transparent}
.tile h3{font-size:1.35rem;margin-bottom:14px}
.tile p{font-family:var(--sans);font-size:.95rem;line-height:1.7;white-space:pre-line}
.tile ul{list-style:none;margin:18px 0 0;padding:0;font-family:var(--sans)}
.tile ul li{font-weight:600;font-size:.9rem;padding:12px 0;border-top:1px solid currentColor;opacity:.92}
.tile ul li:first-child{border-top-width:1px}
.tile .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:20px;
  font-size:1.1rem}
.tile--light{background:#FFFFFF;color:var(--ink)}
.tile--light .ico{background:var(--ink);color:var(--accent)}
.tile--light ul li{border-color:rgba(15,15,17,.14)}
.tile--dark{background:var(--panel);color:var(--text);border-color:var(--line)}
.tile--dark .ico{background:var(--panel-2);color:var(--accent)}
.tile--dark ul li{border-color:var(--line)}
.tile--accent{background:var(--accent);color:var(--ink)}
.tile--accent .ico{background:var(--ink);color:var(--accent)}
.tile--accent ul li{border-color:rgba(15,15,17,.22)}

/* world strip — staggered travel cards */
.world{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.world .wcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:block;color:inherit;text-decoration:none;transition:border-color .2s,transform .3s}
a.wcard:hover{border-color:var(--accent);transform:translateY(-3px);text-decoration:none}

.world .wcard:nth-child(even){margin-top:34px}
.world .wcard img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:0}
.world .wcap{padding:16px 18px 20px}
.world .wcap h3{font-size:1.05rem}
.world .wcap p{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-top:6px}
@media(max-width:900px){.world{grid-template-columns:repeat(2,1fr)}.world .wcard:nth-child(even){margin-top:0}}
/* the photography gallery is a plain grid — the stagger belongs to the small
   travel strip on About, not to nine tiles in a row */
.world.world--flat .wcard:nth-child(even){margin-top:0}
.world.world--flat .wcard img{aspect-ratio:4/5}

/* project cards in the portfolio grid */
.pf-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:var(--sans)}
.pf-head .t{font-family:var(--serif);font-size:1.1rem}
.pf-head .y{margin-left:auto;font-size:.75rem;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:3px 11px}

/* closing call to action */
.closer{padding:clamp(48px,7vw,90px) 0}
.closer .box{
  background:var(--panel);border:1px solid var(--line);border-radius:28px;
  padding:clamp(48px,8vw,110px) clamp(24px,5vw,60px);text-align:center;
}
.closer h2{font-size:clamp(2.1rem,6vw,4rem);margin:8px 0 28px}
.closer .mail{
  display:inline-block;font-family:var(--sans);font-size:clamp(1rem,2.2vw,1.35rem);
  color:var(--text);border-bottom:1px solid var(--line);padding-bottom:10px;
}
.closer .mail:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}

/* footer — centred, with the mark */
footer.site{border-top:1px solid var(--line);padding:46px 0 40px;text-align:center}
footer.site .mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin:0 auto 22px;
  background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--serif);font-size:1.2rem;color:var(--accent);
}
footer.site nav{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;font-family:var(--sans);font-size:.92rem}
footer.site nav a{color:var(--muted)}
footer.site nav a:hover{color:var(--text);text-decoration:none}
footer.site .fine{margin-top:20px;font-family:var(--sans);font-size:.82rem;color:var(--faint)}

/* header — active link in accent, serif mark */
header.site .brand{font-family:var(--serif);font-weight:600;font-size:1.3rem}
header.site nav a.on{color:var(--accent)}

/* social icon row */
.socialrow{display:flex;gap:12px;margin:26px 0;flex-wrap:wrap}
.socialrow a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  transition:background-color .2s,color .2s,transform .2s
}
.socialrow a:hover{background:var(--accent);color:var(--accent-ink);transform:translateY(-2px);text-decoration:none}

/* split hero — copy left, portrait right */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split h1{font-size:clamp(2.4rem,6.4vw,4.4rem)}
.split .lede{font-family:var(--sans);color:var(--muted);margin-top:22px;max-width:52ch}
.portrait{border-radius:var(--radius);overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:0}

/* ledger — the right-hand record list on About (experience, education) */
.ledger .row{padding:22px 0;border-bottom:1px solid var(--line)}
.ledger .row:first-child{padding-top:0}
.ledger .row:last-child{border-bottom:0}
.ledger h3{font-size:1.3rem;margin-bottom:8px}
.ledger .meta{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between;
  font-family:var(--sans);font-size:.88rem;color:var(--muted)}
.ledger .meta strong{color:var(--text);font-weight:600;font-size:.95rem}
.ledger .note{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-top:8px}
.ledger ul{margin:12px 0 0 18px;font-family:var(--sans);font-size:.9rem;color:var(--muted)}

/* Admin media library */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.media-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.media-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;display:block}
.media-doc{aspect-ratio:4/3;display:grid;place-items:center;background:var(--panel-2);
  color:var(--faint);font-weight:700;letter-spacing:.1em}
.media-item figcaption{padding:10px 12px 12px;position:relative}
.media-item input[readonly]{font-size:.72rem;padding:6px 8px;cursor:pointer;background:var(--panel-2)}
.media-item .hintline{display:block;font-size:.72rem;color:var(--faint);margin-top:6px}
.media-item form{position:absolute;top:10px;right:10px}

/* ==========================================================================
   Rich editor (EasyMDE) in the admin — themed to match the panel
   ========================================================================== */
.EasyMDEContainer .CodeMirror{
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:0 0 12px 12px;font-family:ui-monospace,Consolas,monospace;
  font-size:.95rem;line-height:1.7;min-height:420px;padding:10px 6px;
}
.EasyMDEContainer .CodeMirror-cursor{border-color:var(--accent)}
.EasyMDEContainer .CodeMirror-selected{background:rgba(230,126,0,.22)}
.EasyMDEContainer .editor-toolbar{
  background:var(--panel);border:1px solid var(--line);border-bottom:0;
  border-radius:12px 12px 0 0;opacity:1;
}
.EasyMDEContainer .editor-toolbar button{color:var(--muted)!important;border-radius:6px}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active{
  background:var(--panel-2);border-color:var(--line);color:var(--accent)!important;
}
.EasyMDEContainer .editor-toolbar i.separator{border-left-color:var(--line);border-right-color:transparent}
.EasyMDEContainer .editor-statusbar{color:var(--faint);font-size:.78rem;padding:6px 4px}
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side{
  background:var(--panel);color:var(--text);border-color:var(--line);padding:22px;
}
.EasyMDEContainer .editor-preview h1,.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview h3{font-family:var(--serif)}
.EasyMDEContainer .editor-preview a,.EasyMDEContainer .editor-preview-side a{color:var(--accent)}
.EasyMDEContainer .editor-preview img,.EasyMDEContainer .editor-preview-side img{max-width:100%;border-radius:10px}
.EasyMDEContainer .cm-s-easymde .cm-header{color:var(--text)}
.EasyMDEContainer .cm-s-easymde .cm-link,.EasyMDEContainer .cm-s-easymde .cm-url{color:var(--accent)}
.EasyMDEContainer .cm-s-easymde .cm-quote{color:var(--muted)}
.editor-toolbar.fullscreen,.CodeMirror-fullscreen{z-index:9999}

/* markdown extras the toolbar can now produce */
.post-body hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.post-body del{color:var(--faint)}