/* Shaun du Plessis: clean, image-led personal site in Akai-Pando colours.
   Tone is chosen in the admin (Settings): light, between (default) or dark. */
:root,
:root[data-tone="between"]{
  --bg:#e9e2db;        /* warm stone: in between light and dark */
  --card:#f6f2ee;      /* lifted surfaces */
  --ink:#2a1910;       /* red panda legs */
  --muted:#6a594e;
  --line:#d4c9bf;
  --rust:#c4501a;      /* Akai-Pando fur */
  --rust-text:#a5410f; /* rust that stays readable on the background */
  --rust-deep:#8f350b;
  --brown:#4a2b1b;
  --tan:#c9a07a;
  --land:#d5c9be;
  --band:#3a2318;      /* footer band */
  --band-ink:#f6eee8;
  --on-rust:#ffffff;
  color-scheme:light;
}
:root[data-tone="light"]{
  --bg:#ffffff; --card:#f6f3f1; --ink:#26170f; --muted:#76665c; --line:#ebe3dd; --rust:#cf5419; --rust-text:#b0450f; --rust-deep:#9a3a0f;
  --brown:#4a2b1b; --tan:#d8b18c; --land:#e7dfd8; --band:#3a2318; --band-ink:#f6eee8; color-scheme:light;
}
:root[data-tone="dark"]{
  --bg:#1a120d; --card:#251a13; --ink:#f4ece6; --muted:#b9a99e; --line:#3a2c22; --rust:#ec6c33; --rust-text:#f08a58; --rust-deep:#c4521c;
  --brown:#5b3624; --tan:#a9805c; --land:#33271e; --band:#2a1b13; --band-ink:#f4ece6; color-scheme:dark;
}
:root{ --font:"M PLUS 1","Hiragino Sans","Yu Gothic",system-ui,-apple-system,"Segoe UI",sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--rust); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto!important; transition:none!important; } }
h1,h2,h3{ text-wrap:balance; margin:0; }
.wrap{ max-width:1180px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); }
.jp{ font-weight:500; color:var(--muted); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; background:var(--card); padding:8px 12px; z-index:9; }

/* Nav */
.nav{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px; padding-block:22px; }
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; font-weight:800; font-size:19px; letter-spacing:-.01em; }
.brand .jp{ font-size:14px; color:var(--rust-text); font-weight:700; }
.nav ul{ display:flex; flex-wrap:wrap; gap:6px 24px; list-style:none; margin:0; padding:0; font-weight:500; font-size:15px; }
.nav ul a{ text-decoration:none; color:var(--muted); }
.nav ul a:hover{ color:var(--rust-text); }

/* Hero */
.hero{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:center; padding-block:40px 28px; }
.hero h1{ font-weight:800; font-size:clamp(42px,6.2vw,76px); line-height:1.02; letter-spacing:-.03em; }
.hello{ font-size:clamp(18px,2vw,22px); font-weight:700; color:var(--rust-text); margin:0 0 14px; }
.hello span:not(.hello-jp){ font-weight:400; color:var(--muted); font-size:.75em; margin-left:.5em; }
.lede{ font-size:19px; color:var(--muted); max-width:38ch; margin:20px 0 0; }
.map svg{ display:block; width:100%; height:auto; }
.map .land{ fill:var(--land); }
.map .visited{ fill:var(--rust); cursor:pointer; transition:fill .2s; }
.map .visited:hover,.map .visited.on{ fill:var(--rust-deep); }
.map .pin{ fill:var(--bg); stroke:var(--rust-deep); stroke-width:2.5; }
.map .pin-home{ fill:var(--rust-deep); stroke:var(--bg); }
.map text{ font-family:var(--font); font-size:15px; font-weight:700; fill:var(--ink); paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }

.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:20px; }
.stat{ padding:22px 20px; display:flex; flex-direction:column; gap:2px; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat b{ font-size:clamp(28px,3.4vw,40px); font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.stat span{ color:var(--muted); font-size:15px; line-height:1.4; }

/* Sections */
.section{ padding-block:84px 0; scroll-margin-top:12px; }
.sec-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:30px; }
.sec-head h2{ font-weight:800; font-size:clamp(30px,3.6vw,42px); letter-spacing:-.02em; line-height:1.1; }
.sec-head h2 .jp{ font-size:.55em; margin-left:.45em; letter-spacing:0; color:var(--rust-text); font-weight:700; }
.sec-head p{ margin:0; color:var(--muted); max-width:48ch; }

/* Photo slot: finished-looking until a real photo is added in the admin */
.photo{ position:relative; aspect-ratio:4/3; max-width:100%; border-radius:14px; overflow:hidden; background:var(--slot,var(--rust)); isolation:isolate; }
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo .glyph{ position:absolute; right:-.06em; bottom:-.2em; font-size:clamp(90px,12vw,150px); font-weight:800; line-height:1; color:rgba(255,255,255,.17); letter-spacing:-.04em; white-space:nowrap; pointer-events:none; }

/* Places */
.countries{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 22px; }
.country{ text-decoration:none; display:flex; flex-direction:column; gap:12px; }
.country.home{ grid-column:span 2; }
.country.home .photo{ aspect-ratio:auto; height:100%; min-height:220px; }
.country .photo{ transition:transform .25s; }
.country:hover .photo,.country.on .photo{ transform:translateY(-4px); }
.country h3{ font-size:20px; font-weight:800; line-height:1.2; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tag{ font-size:12px; font-weight:700; color:var(--on-rust); background:var(--rust); padding:1px 9px; border-radius:20px; }
.country p{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; }
.country p b{ color:var(--rust-text); font-weight:700; font-size:16px; }
.country .stories{ color:var(--rust-text); font-weight:700; }

/* Journal */
.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 24px; }
.post-card{ display:flex; flex-direction:column; gap:12px; text-decoration:none; }
.post-card .photo{ transition:transform .25s; }
.post-card:hover .photo{ transform:translateY(-4px); }
.meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:13px; color:var(--muted); font-weight:500; }
.chip{ font-size:12px; font-weight:700; color:var(--rust-text); border:1.5px solid var(--rust); padding:0 9px; border-radius:20px; }
.post-card h3{ font-size:21px; font-weight:800; line-height:1.3; }
.post-card p{ margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.empty{ border:2px dashed var(--line); border-radius:14px; padding:40px 24px; text-align:center; color:var(--muted); font-weight:700; }

/* About */
.about{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start; }
.about .photo{ aspect-ratio:4/5; --slot:var(--brown); }
.prose p{ margin:0 0 1.1em; max-width:62ch; }
.prose img{ border-radius:10px; }
.lead{ font-size:22px; font-weight:700; line-height:1.45; margin:0 0 1em; max-width:40ch; }
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px; margin:30px 0 0; padding:26px 0 0; border-top:1px solid var(--line); list-style:none; }
.facts li{ display:grid; gap:2px; }
.facts b{ font-size:15px; font-weight:800; }
.facts span{ font-size:15px; color:var(--muted); line-height:1.5; }

/* Apps */
.apps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 24px; }
.app{ display:flex; flex-direction:column; gap:12px; }
.app .photo{ aspect-ratio:16/10; background:var(--card); border:1px solid var(--line); }
.app .photo img{ object-position:top center; }
.app h3{ font-size:20px; font-weight:800; }
.app p{ margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.app .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:4px; }
.app .row small{ font-size:13px; color:var(--muted); font-weight:500; }
.go{ font-size:14px; font-weight:700; color:var(--rust-text); text-decoration:none; }
.go:hover{ text-decoration:underline; }
.app.next .photo{ background:transparent; border:2px dashed var(--line); display:grid; place-items:center; color:var(--muted); font-weight:700; text-align:center; padding:16px; }

/* Work */
.work{ display:grid; border-top:1px solid var(--line); }
.job{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px; padding-block:26px; border-bottom:1px solid var(--line); }
.job .when{ font-weight:700; color:var(--rust-text); font-variant-numeric:tabular-nums; }
.job h3{ font-size:20px; font-weight:800; }
.job .co{ margin:2px 0 8px; color:var(--muted); font-weight:500; }
.job p{ margin:0; max-width:66ch; }

/* Footer: Say hi with Akai-Pando */
.footer{ margin-top:110px; background:var(--band); color:var(--band-ink); }
.footer .wrap{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 48px; align-items:center; padding-block:56px 40px; }
.akai{ width:clamp(130px,18vw,210px); height:auto; transform:rotate(-6deg); filter:drop-shadow(0 10px 14px rgba(0,0,0,.35)); margin-top:-110px; }
.footer h2{ font-size:clamp(28px,3.5vw,42px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.footer h2 .jp{ display:block; font-size:.5em; color:var(--tan); font-weight:700; letter-spacing:0; margin-bottom:4px; }
.footer p{ margin:12px 0 0; opacity:.85; max-width:52ch; }
.links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:10px 16px 10px 12px; border-radius:12px; transition:background .2s; }
.link:hover{ background:var(--rust); border-color:var(--rust); }
.link svg{ width:22px; height:22px; flex:0 0 auto; }
.link b{ display:block; font-size:15px; line-height:1.2; }
.link small{ display:block; font-size:13px; opacity:.75; line-height:1.2; }
.footer-base{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; border-top:1px solid rgba(255,255,255,.14); padding-top:20px; margin-top:16px; font-size:14px; opacity:.75; }

/* Post page */
.post{ max-width:780px; margin:0 auto; padding-block:30px 0; }
.post .back{ font-weight:700; color:var(--rust-text); text-decoration:none; font-size:15px; }
.post h1{ font-size:clamp(34px,5vw,54px); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:14px 0 12px; }
.post .cover{ margin:28px 0; aspect-ratio:16/9; }
.post .prose{ font-size:18px; }
.post .prose p{ max-width:none; }
.post .prose h2{ font-size:26px; margin:1.4em 0 .5em; }
.gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:32px; }
.gallery figure{ margin:0; }
.gallery img{ width:100%; height:auto; border-radius:10px; display:block; }
.gallery figcaption{ font-size:14px; color:var(--muted); margin-top:6px; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:24px; }
  .countries{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .posts,.apps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about{ grid-template-columns:1fr; gap:32px; }
  .about .photo{ max-width:420px; aspect-ratio:4/3; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .posts,.apps,.gallery{ grid-template-columns:1fr; }
  .country h3{ font-size:17px; }
  .facts{ grid-template-columns:1fr; }
  .job{ grid-template-columns:1fr; gap:4px; }
  .section{ padding-block:64px 0; }
  .footer .wrap{ grid-template-columns:1fr; }
  .akai{ margin-top:-90px; }
}