/*
  GC kit, version 1: the design system behind gianlucacaico.com, as one stylesheet.
  Use it anywhere:  <link rel="stylesheet" href="https://gianlucacaico.com/design-system/v1/gc.css">
  Optional script for segmented controls:  <script src="https://gianlucacaico.com/design-system/v1/gc.js" defer></script>
  Docs, tokens and a live playground: https://gianlucacaico.com/design-system/

  Theme it by overriding the roles in your own CSS, for example
  :root{ --accent:#0E97AA; --accent-deep:#0B7887; --accent-2:#FFA659; --round:.5; --glass-blur:28px; }
  Add data-surface="dark" to <html>, or to any section, for the dark palette.
  Class names match the site, so markup copied from gianlucacaico.com works here too.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Colours */
  --ink:#0A2540;
  --violet:#635BFF;
  --violet-deep:#4B44D6;
  --violet-wash:rgba(99,91,255,0.08);
  --coral:#EB5D76;
  --amber:#FFA659;
  --amber-deep:#D9822B;
  --cyan:#0E97AA;
  --paper:#FFFFFF;
  --panel:#F6F9FC;
  --text:#0A2540;
  --muted:#425466;
  --faint:#8792A2;
  --border:#E3E8EF;
  --muted-on-ink:#A6B4CC;
  --border-on-ink:#233A5C;
  --cyan-bright:#12B5CB;
  --tint-cyan:#3FD3E3;
  --tint-coral:#FF8AA0;
  --tint-amber:#FFB070;

  /* Card art */
  --art-fs:radial-gradient(55% 75% at 20% 25%, rgba(99,91,255,0.95), transparent 70%), radial-gradient(50% 70% at 85% 80%, rgba(18,181,203,0.8), transparent 70%), #0A2540;
  --art-health:radial-gradient(55% 75% at 25% 30%, rgba(235,93,118,0.95), transparent 70%), radial-gradient(50% 70% at 85% 75%, rgba(255,166,89,0.8), transparent 70%), #3B1330;
  --art-energy:radial-gradient(55% 75% at 75% 25%, rgba(255,166,89,0.95), transparent 70%), radial-gradient(50% 70% at 20% 85%, rgba(235,93,118,0.6), transparent 70%), #13233F;
  --art-sport:radial-gradient(55% 75% at 25% 70%, rgba(18,181,203,0.9), transparent 70%), radial-gradient(50% 70% at 80% 20%, rgba(99,91,255,0.75), transparent 70%), #0B3B4A;
  --art-saas:radial-gradient(55% 75% at 70% 30%, rgba(99,91,255,0.9), transparent 70%), radial-gradient(50% 70% at 20% 80%, rgba(235,93,118,0.7), transparent 70%), #1B1446;

  /* Type */
  --font:'Inter', system-ui, -apple-system, sans-serif;
  --track:-0.025em;
  --fs-display:clamp(2.1rem, 5vw, 3.6rem);
  --fs-h1:clamp(2.1rem, 4.6vw, 3.2rem);
  --fs-h2:1.6rem;
  --fs-h3:1.12rem;
  --fs-lede:1.15rem;
  --fs-body:1rem;
  --fs-meta:0.8rem;

  /* Shape: every radius scales with --round */
  --round:1;
  --r-pill:calc(999px * var(--round));
  --r-xl:calc(28px * var(--round));
  --r-lg:calc(20px * var(--round));
  --r-md:calc(16px * var(--round));
  --r-sm:calc(12px * var(--round));

  /* Motion */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:.18s;
  --dur-lens:.55s;

  /* Layout */
  --wide:1120px;
  --max:700px;

  /* Glass */
  --glass-blur:20px;

  /* Roles: what components use. Override these to theme the kit. */
  --accent:var(--violet);
  --accent-deep:var(--violet-deep);
  --accent-2:var(--coral);
}

/* Light surface (the default) */
:root, [data-surface="light"]{
  --surface:#FFFFFF;
  --prose:#1E3350;
  --strong:var(--ink);
  --on-strong:#FFFFFF;
  --on-strong-muted:var(--muted-on-ink);
  --accent-ink:var(--accent-deep);
  --glass-bg:linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.26));
  --glass-border:rgba(255,255,255,0.65);
  --glass-shadow:0 12px 32px rgba(10,37,64,0.12), 0 2px 6px rgba(10,37,64,0.06), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 1px rgba(255,255,255,0.35);
  --glass-sheen:1;
  --ghost-bg:rgba(255,255,255,0.55);
  --ghost-border:rgba(255,255,255,0.75);
  --ghost-shadow:inset 0 1px 0 #fff, 0 4px 14px rgba(10,37,64,0.08);
  --lift:0 18px 40px rgba(10,37,64,0.10);
}

/* Dark surface, as in the site's footer and statement band */
[data-surface="dark"]{
  --paper:var(--ink);
  --surface:color-mix(in srgb, #fff 5%, var(--ink));
  --panel:color-mix(in srgb, #fff 3%, var(--ink));
  --text:#FFFFFF;
  --prose:rgba(255,255,255,0.86);
  --muted:var(--muted-on-ink);
  --faint:color-mix(in srgb, var(--muted-on-ink) 75%, var(--ink));
  --border:var(--border-on-ink);
  --strong:color-mix(in srgb, #fff 8%, var(--ink));
  --accent-ink:color-mix(in srgb, var(--accent) 55%, #fff);
  --glass-bg:linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  --glass-border:rgba(255,255,255,0.22);
  --glass-shadow:0 12px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.3);
  --glass-sheen:0.35;
  --ghost-bg:rgba(255,255,255,0.08);
  --ghost-border:rgba(255,255,255,0.22);
  --ghost-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
  --lift:0 18px 40px rgba(0,0,0,0.35);
}

/* Derived from the roles, recalculated wherever the surface changes */
:root, [data-surface]{
  --accent-wash:color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 30%, var(--border));
  --art:radial-gradient(55% 75% at 20% 25%, color-mix(in srgb, var(--accent) 95%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 80%, color-mix(in srgb, var(--accent-2) 80%, transparent), transparent 70%), var(--ink);
}

/* ---------- Base ---------- */
*, *::before, *::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
[hidden]{display:none !important;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
[data-surface]{background:var(--paper); color:var(--text);}
h1, h2, h3{font-weight:700; letter-spacing:var(--track); margin:0;}
a{color:inherit;}
button, input, select, textarea{font-family:inherit;}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wide); margin:0 auto; padding:0 32px;}
.section{padding:88px 0; scroll-margin-top:100px;}
.section.bordered{border-top:1px solid var(--border);}
.section-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; margin-bottom:16px; flex-wrap:wrap;}
.section-head h2{font-size:var(--fs-h2);}
.section-head .count{font-size:0.85rem; color:var(--muted); font-weight:500;}
.section-intro{max-width:var(--max); color:var(--muted); font-size:1.02rem; margin:0 0 40px;}

/* ---------- Type ---------- */
.display{font-size:var(--fs-display); line-height:1.08; max-width:920px;}
.page-title{font-size:var(--fs-h1); line-height:1.1; max-width:780px;}
.eyebrow{font-size:0.85rem; font-weight:600; color:var(--accent-ink); margin:0 0 20px;}
.grad-word{background:linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lede{margin:28px 0 0; font-size:var(--fs-lede); color:var(--muted); max-width:620px;}
.meta{font-size:var(--fs-meta); font-weight:600; color:var(--faint);}
.cta-row{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Page header with colour mesh ---------- */
.page-head{position:relative; padding:96px 0 48px; overflow:hidden;}
.page-head > .wrap{position:relative; z-index:1;}
.mesh{
  position:absolute; inset:-20% -10% auto -10%; height:520px; z-index:0; pointer-events:none; filter:blur(50px);
  background:
    radial-gradient(46% 60% at 18% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(38% 50% at 78% 10%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%),
    radial-gradient(40% 55% at 60% 45%, rgba(255,166,89,0.18), transparent 70%);
}

/* ---------- Buttons ---------- */
.btn-pill, .btn-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:9px 20px; border-radius:var(--r-pill); cursor:pointer;
  font-size:0.88rem; font-weight:600; line-height:1.6; text-decoration:none;
  transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn-pill{background:var(--accent); color:#fff; border:1px solid transparent;}
.btn-pill:hover, .btn-pill:focus-visible{background:var(--accent-deep); transform:translateY(-1px);}
.btn-ghost{
  color:var(--text); background:var(--ghost-bg); border:1px solid var(--ghost-border); box-shadow:var(--ghost-shadow);
  -webkit-backdrop-filter:blur(calc(var(--glass-blur) * 0.7)) saturate(170%); backdrop-filter:blur(calc(var(--glass-blur) * 0.7)) saturate(170%);
}
.btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--accent);}
.back{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--r-pill); font-size:0.88rem; font-weight:600; color:var(--accent-ink); text-decoration:none;}
.crumbs{max-width:100%;}
.crumbs ol{display:flex; align-items:center; min-width:0; margin:0; padding:0; list-style:none;}
.crumbs li{flex:0 0 auto; white-space:nowrap;}
.crumbs li + li::before{content:'/'; margin:0 8px; color:var(--faint); font-weight:400;}
.crumbs a{display:inline-block; padding:8px 0; margin:-8px 0; color:var(--accent-ink); text-decoration:none;}
.crumbs a:hover, .crumbs a:focus-visible{text-decoration:underline; text-underline-offset:3px;}
.crumbs [aria-current]{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-weight:500;}

/* ---------- Liquid glass ---------- */
.glass{
  position:relative; isolation:isolate; border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%); backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.glass::before{content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:var(--glass-sheen);
  background:radial-gradient(120% 70% at 30% -20%, rgba(255,255,255,0.75), rgba(255,255,255,0) 55%);}
.glass::after{content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 0.5px rgba(10,37,64,0.06), inset 0 -10px 18px -14px color-mix(in srgb, var(--accent) 35%, transparent);}
.on-dark, .work-art, .post-art{
  --glass-bg:linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  --glass-border:rgba(255,255,255,0.22);
  --glass-shadow:0 12px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.3);
  --glass-sheen:0.35;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,0.94);}
  .glass.on-dark, [data-surface="dark"] .glass{background:rgba(10,37,64,0.92);}
}
.glass-panel{padding:20px 22px; border-radius:var(--r-xl);}

/* ---------- Segmented control (gc.js adds the sliding lens) ---------- */
.seg{position:relative; display:inline-flex; gap:2px; max-width:100%; padding:4px; border-radius:var(--r-pill); overflow-x:auto; scrollbar-width:none;}
.seg::-webkit-scrollbar{display:none;}
.seg button{position:relative; z-index:1; flex:0 0 auto; border:none; background:transparent; cursor:pointer; font-size:0.82rem; font-weight:600; color:var(--muted); padding:8px 14px; border-radius:var(--r-pill); white-space:nowrap; transition:color .2s, transform .2s;}
.seg button:hover{color:var(--text);}
.seg button:active{transform:scale(0.96);}
.seg button[aria-pressed="true"]{color:var(--ink);}
.seg:not(.has-lens) button[aria-pressed="true"]{background:rgba(255,255,255,0.88);}
.seg small{margin-left:4px; font-size:0.72rem; color:var(--faint);}
/* A control that scrolls sideways can't use the glass layers above: they would scroll away with the
   options and leave a hard edge. So it draws the same sheen and edges on itself, which stay put. */
.seg.glass::before, .seg.glass::after{display:none;}
.seg.glass{
  background:radial-gradient(120% 70% at 30% -20%, rgba(255,255,255,calc(0.75 * var(--glass-sheen))), rgba(255,255,255,0) 55%), var(--glass-bg);
  box-shadow:var(--glass-shadow), inset 0 0 0 0.5px rgba(10,37,64,0.06), inset 0 -10px 18px -14px color-mix(in srgb, var(--accent) 35%, transparent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .seg.glass{background:rgba(255,255,255,0.94);}
}
.lens{
  position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; opacity:0; border-radius:var(--r-pill); pointer-events:none;
  background:rgba(255,255,255,0.88); box-shadow:0 1px 2px rgba(10,37,64,0.10), 0 6px 16px rgba(10,37,64,0.10), inset 0 1px 0 #fff;
  transition:transform var(--dur-lens) var(--ease-spring), width var(--dur-lens) var(--ease-spring), opacity .2s;
}
.filter-status{font-size:0.8rem; color:var(--muted); margin:14px 0 0;}

/* ---------- Tags and chips ---------- */
.tags, .post-tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:16px 0 0; padding:0;}
.tags li{font-size:0.72rem; font-weight:600; color:var(--muted); background:var(--panel); border:1px solid var(--border); padding:3px 9px; border-radius:var(--r-pill);}
.post-tags li{font-size:0.75rem; font-weight:600; color:var(--accent-ink); background:var(--accent-wash); padding:4px 11px; border-radius:var(--r-pill);}
.post-tags.small{margin-top:12px;}
.post-tags .rt{color:var(--faint); background:transparent; padding-left:2px;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{display:inline-block; font-size:0.8rem; font-weight:600; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:6px 12px;}
.chip-g{display:inline-block; font-size:0.74rem; font-weight:700; color:var(--text); padding:6px 12px; border-radius:var(--r-pill);}
.soon{display:inline-block; vertical-align:middle; font-size:0.72rem; font-weight:700; letter-spacing:0; color:var(--accent-ink); background:var(--accent-wash); padding:3px 10px; border-radius:var(--r-pill);}
.spot-tag{display:inline-block; font-size:0.75rem; font-weight:700; color:#fff; background:linear-gradient(100deg, var(--accent), var(--accent-2)); padding:4px 12px; border-radius:var(--r-pill);}

/* ---------- Stat grid ---------- */
.record{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;}
.record dl{margin:0; padding:30px 26px; background:var(--panel); box-shadow:0 0 0 1px var(--border);}
.record dt{font-size:1.7rem; font-weight:800; color:var(--accent); letter-spacing:-0.02em; line-height:1.2;}
.record dd{margin:10px 0 0; font-size:0.92rem; color:var(--muted); line-height:1.5;}

/* ---------- Cards ---------- */
.work-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:20px;}
.work-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;}
.work-card:hover{transform:translateY(-3px); box-shadow:var(--lift);}
.work-art{position:relative; overflow:hidden; height:156px; background:var(--art); display:flex; align-items:flex-end; gap:8px; padding:16px 18px;}
.work-art .big{position:absolute; z-index:1; left:18px; top:16px; font-size:1.125rem; font-weight:700; letter-spacing:-0.02em; line-height:1.3; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,0.2);}
.work-art .chip-g, .post-art .chip-g{color:#fff;}
/* Work card art, as on gianlucacaico.com: the project's pictogram fills the right side at full height and
   runs off the edges, the client's name sits top left (.big, or .big.logo for a white logo used with permission),
   industry and year are plain text bottom left. */
.work-art .big.logo{top:16px; line-height:0;}
.work-art .big.logo img{display:block; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,0.2));}
.work-art .work-pic{position:absolute; top:0; right:0; height:100%; width:auto; pointer-events:none;}
.work-meta{position:relative; z-index:1; margin:0; font-size:0.78rem; font-weight:600; letter-spacing:0.01em; color:rgba(255,255,255,0.86); text-shadow:0 1px 8px rgba(0,0,0,0.25);}
.work-meta span + span::before{content:"\00B7"; margin:0 7px; opacity:0.7;}
.work-body{display:flex; flex-direction:column; flex:1; padding:20px 22px 22px;}
.work-body h3{font-size:var(--fs-h3);}
.work-outcome{margin:12px 0 0; padding-left:10px; border-left:2px solid var(--accent); font-weight:600; font-size:0.92rem; line-height:1.45;}
.work-body .sum{margin:12px 0 0; font-size:0.9rem; color:var(--muted);}
.work-cta{margin-top:auto; padding-top:18px; font-size:0.88rem; font-weight:700; color:var(--accent-ink); text-decoration:none;}
.work-cta:hover{text-decoration:underline;}

.next-post{display:block; padding:22px 24px; border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:inherit; background:var(--surface); transition:border-color .2s, transform .2s, box-shadow .2s;}
.next-post:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--lift);}
.np-k{display:block; font-size:0.78rem; font-weight:700; color:var(--accent-ink);}
.np-t{display:block; margin-top:6px; font-size:1.12rem; font-weight:700; line-height:1.35; letter-spacing:-0.01em;}
.np-m{display:block; margin-top:6px; font-size:0.84rem; color:var(--faint);}

.eng-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:12px; align-items:start;}
.eng{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); transition:border-color var(--dur-fast) ease;}
.eng:hover{border-color:var(--accent-line);}
.eng[open]{border-color:var(--accent);}
.eng summary{display:block; list-style:none; cursor:pointer; padding:16px 44px 16px 16px; position:relative;}
.eng summary::-webkit-details-marker{display:none;}
.eng summary::after{content:'+'; position:absolute; right:16px; top:12px; font-size:1.3rem; font-weight:500; line-height:1; color:var(--accent); transition:transform .2s ease;}
.eng[open] summary::after{transform:rotate(45deg);}
.eng-client{display:block; font-weight:700; font-size:1.02rem;}
.eng-meta{display:block; font-size:0.78rem; color:var(--faint); font-weight:500; margin-top:1px;}
.eng-title{display:block; font-size:0.88rem; color:var(--muted); margin-top:8px;}
.eng-outcome{display:block; margin-top:12px; padding-left:10px; border-left:2px solid var(--accent); font-size:0.88rem; font-weight:600; line-height:1.4;}
.eng-detail{margin:0; padding:0 16px 16px; font-size:0.88rem; color:var(--muted); line-height:1.55;}

.cred-group{border:1px solid var(--border); border-radius:var(--r-md); padding:22px 24px; background:var(--surface);}
.cred-group h3{font-size:0.95rem; margin-bottom:6px;}
.cred-group ul{list-style:none; margin:0; padding:0;}
.cred-group li{padding:12px 0; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:4px 16px; flex-wrap:wrap;}
.cred-group li:last-child{border-bottom:none; padding-bottom:0;}
.c-name{display:block; font-weight:600; font-size:0.93rem;}
.c-issuer{font-size:0.84rem; color:var(--muted);}
.c-when{font-size:0.8rem; color:var(--faint); font-weight:500; white-space:nowrap;}

/* Featured post: artwork on one side, the story on the other */
.post-feature{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease;}
.post-feature:hover{transform:translateY(-3px); box-shadow:var(--lift);}
.post-art{position:relative; min-height:260px; display:flex; align-items:flex-end; padding:16px; overflow:hidden; background:var(--art);}
.post-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.post-feature:hover .post-art img{transform:scale(1.03);}
.post-text{display:flex; flex-direction:column; justify-content:center; padding:32px;}
.post-meta{font-size:0.8rem; font-weight:600; color:var(--faint);}
.post-text h2{margin-top:10px; font-size:clamp(1.35rem, 2.6vw, 1.85rem); line-height:1.2;}
.post-text p{margin:12px 0 0; color:var(--muted);}
.read-more{margin-top:18px; font-size:0.9rem; font-weight:700; color:var(--accent-ink);}

/* Post banner: the post's artwork under its title */
.article-hero{margin:36px 0 12px; overflow:hidden; border-radius:var(--r-lg); background:var(--ink); box-shadow:0 24px 50px rgba(10,37,64,0.14);}
.article-hero img{display:block; width:100%; height:auto;}

/* ---------- Lists ---------- */
.writing article{padding:28px 0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:160px 1fr; gap:8px 24px;}
.writing article:first-of-type{border-top:1px solid var(--border);}
.writing time{font-size:0.85rem; color:var(--muted); font-weight:500;}
.writing h3{font-size:1.15rem; margin-bottom:8px;}
.writing h3 a{text-decoration:none; background-image:linear-gradient(var(--accent), var(--accent)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .25s ease;}
.writing h3 a:hover, .writing h3 a:focus-visible{background-size:100% 2px;}
.writing p{color:var(--muted); font-size:0.95rem; margin:0;}
.writing article.has-thumb{grid-template-columns:160px 1fr 208px; gap:8px 32px;}
.row-thumb{display:block; align-self:start; overflow:hidden; border-radius:var(--r-sm); border:1px solid var(--border); box-shadow:0 8px 20px rgba(10,37,64,0.08); transition:transform .25s ease, box-shadow .25s ease;}
.row-thumb img{display:block; width:100%; height:auto;}
.row-thumb:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(10,37,64,0.12);}

/* ---------- Avatars ---------- */
.av{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:48px; height:48px; border-radius:50%; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2));}
.av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%;}
.av img:not([src]){display:none;}
.av-xs{width:28px; height:28px; font-size:0.62rem;}
.av-md{width:52px; height:52px; font-size:0.9rem;}
.av-lg{width:76px; height:76px; font-size:1.1rem;}

/* ---------- Long-form writing ---------- */
.prose{max-width:680px;}
.prose p{margin:0 0 20px; font-size:1.06rem; line-height:1.75; color:var(--prose);}
.prose p.lead{font-size:1.2rem; color:var(--text);}
.prose h2{margin:52px 0 16px; font-size:1.5rem;}
.prose h3{margin:34px 0 10px; font-size:1.1rem;}
.prose strong{color:var(--text);}
.prose ul, .prose ol{margin:0 0 24px; padding-left:1.3em;}
.prose li{margin:0 0 10px; padding-left:4px; font-size:1.04rem; line-height:1.7; color:var(--prose);}
.prose li::marker{color:var(--accent); font-weight:700;}
.prose hr{border:none; border-top:1px solid var(--border); margin:44px 0;}
.pull{margin:8px 0 32px; padding:4px 0 4px 22px; border-left:3px solid var(--accent); font-size:clamp(1.2rem, 2.4vw, 1.45rem); font-weight:600; line-height:1.45; letter-spacing:-0.012em; color:var(--text);}
.prose .pull{color:var(--text);}
.source{margin-top:40px; padding-top:20px; border-top:1px solid var(--border); font-size:0.88rem; color:var(--muted);}

.stat-strip{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:16px; margin:4px 0 28px; padding:22px 24px; background:var(--strong); color:var(--on-strong); border-radius:var(--r-md);}
.stat-strip dt{font-size:1.5rem; font-weight:800; letter-spacing:-0.02em;}
.stat-strip dd{margin:2px 0 0; font-size:0.8rem; color:var(--on-strong-muted);}
.callout{margin:8px 0 32px; padding:24px 26px; border-radius:var(--r-md); color:var(--on-strong); background:radial-gradient(60% 90% at 15% 20%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%), var(--strong);}
.callout-stat{font-size:clamp(1.6rem, 4vw, 2.2rem); font-weight:800; letter-spacing:-0.02em;}
.callout p, .prose .callout p{margin:10px 0 0; color:rgba(255,255,255,0.86); font-size:1rem;}
.flow{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 28px;}
.flow span{font-size:0.9rem; font-weight:700; padding:10px 16px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--border);}
.flow span:last-child{background:var(--accent); border-color:var(--accent); color:#fff;}
.flow i{font-style:normal; color:var(--faint);}
.roles{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:0 0 28px;}
.roles div{padding:16px; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:var(--r-sm); background:var(--surface);}
.roles b{display:block; font-size:0.95rem;}
.roles span{display:block; margin-top:6px; font-size:0.9rem; line-height:1.5; color:var(--muted);}
.defs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 28px;}
.defs div{padding:14px 16px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--border);}
.defs dt{font-weight:700; font-size:0.92rem;}
.defs dd{margin:4px 0 0; font-size:0.9rem; color:var(--muted);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .record{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:760px){
  .wrap{padding:0 20px;}
  .section{padding:64px 0;}
  .page-head{padding:64px 0 36px;}
  .writing article, .writing article.has-thumb{grid-template-columns:1fr;}
  .row-thumb{order:-1; margin-bottom:10px;}
  .post-feature{grid-template-columns:1fr;}
  .post-art{min-height:170px;}
  .post-art.has-img{min-height:0; aspect-ratio:1200/630; padding:10px;}
  .post-text{padding:22px;}
  .article-hero{margin-top:28px; border-radius:var(--r-md);}
}
@media (max-width:640px){
  .roles, .defs{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .record{grid-template-columns:1fr;}
  .crumbs{padding:8px 14px; font-size:0.82rem;}
  .crumbs li + li::before{margin:0 6px;}
}