/* Chiron Learning: the design system for the public site.
   Concept: rubrication. Medieval scribes wrote headings, initials and
   marginal notes in red so a reader could find their way; here red marks
   only what helps you move (actions, notes in the margin, focus) and the
   rest is black ink on paper. One serif (Spectral) for reading and display,
   one sans (Archivo) for the interface. */

:root{
  --paper:#F7F7F4; --surface:#FFFFFF; --sunk:#EFEEE8;
  --ink:#171A17; --ink-2:#3E443B; --muted:#5D6458;
  --line:#DCDCD2; --line-2:#C3C4B7; --control:#8B8E7F;
  --rubric:#A32B22; --rubric-deep:#86231C; --rubric-wash:#F6E9E7; --on-rubric:#FFFFFF;
  --ok:#1E6B45;

  --serif:"Spectral","Iowan Old Style",Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* type scale: a perfect fourth from 17px */
  --t-xs:13px; --t-sm:15px; --t-md:17px; --t-lg:clamp(19px,1.6vw,22px);
  --t-xl:clamp(24px,2.4vw,30px); --t-2xl:clamp(30px,3.6vw,40px); --t-3xl:clamp(38px,5.8vw,64px);

  --page:1120px; --measure:64ch;
  --gutter:clamp(18px,4vw,40px);
  --space:clamp(56px,8vw,104px);
  --radius:3px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141613; --surface:#1B1E1A; --sunk:#20241E;
    --ink:#EDEEE8; --ink-2:#C9CDC2; --muted:#A0A698;
    --line:#2E322B; --line-2:#454A40; --control:#6E7566;
    --rubric:#E8776B; --rubric-deep:#F19387; --rubric-wash:#2E1815; --on-rubric:#1A0F0D;
    --ok:#5CC48F; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141613; --surface:#1B1E1A; --sunk:#20241E;
  --ink:#EDEEE8; --ink-2:#C9CDC2; --muted:#A0A698;
  --line:#2E322B; --line-2:#454A40; --control:#6E7566;
  --rubric:#E8776B; --rubric-deep:#F19387; --rubric-wash:#2E1815; --on-rubric:#1A0F0D;
  --ok:#5CC48F; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:var(--t-md);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.12;text-wrap:balance}
p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--rubric);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--rubric-deep)}
:focus-visible{outline:2px solid var(--rubric);outline-offset:3px;border-radius:2px}
::selection{background:var(--rubric-wash);color:var(--ink)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--surface);color:var(--ink);padding:10px 16px;border:1px solid var(--ink);font-family:var(--sans)}
.skip:focus{top:12px}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}

/* ---------------- header ---------------- */
.site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:22px;min-height:68px}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink);flex:none}
.brand b{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.015em}
.brand span{font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:20px;margin-left:auto}
.nav a{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rubric)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.tools{display:flex;align-items:center;gap:10px;flex:none}
.tools .login{font-family:var(--sans);font-size:var(--t-sm);color:var(--rubric);text-decoration:none;font-weight:600;white-space:nowrap}
.tools .login:hover{text-decoration:underline}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:34px;padding:0 9px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:none;color:var(--ink-2);font-family:var(--sans);font-size:var(--t-xs);font-weight:600;cursor:pointer;text-decoration:none}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip svg{width:16px;height:16px}
.menu-btn{display:none}
@media (max-width:1400px){
  .brand span{display:none}
}
@media (max-width:1040px){
  .site-head .wrap{gap:12px;flex-wrap:wrap}
  .menu-btn{display:inline-flex;gap:8px;padding:0 12px}
  .tools{margin-left:auto}
  .nav{order:5;width:100%;flex-direction:column;align-items:stretch;gap:0;margin:0 0 10px;display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:var(--t-md)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line);color:var(--rubric)}
  .tools .login{display:none}
  .nav .login-m{display:block;color:var(--rubric);font-weight:600}
}
@media (min-width:1041px){ .nav .login-m{display:none} }

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-family:var(--sans);font-size:var(--t-sm);font-weight:600;
  min-height:46px;padding:0 22px;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--rubric);color:var(--on-rubric)}
.btn-primary:hover{background:var(--rubric-deep);color:var(--on-rubric)}
.btn-line{border-color:var(--control);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink);background:var(--sunk);color:var(--ink)}
.btn-sm{min-height:38px;padding:0 15px;font-size:var(--t-xs)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--ink)}

/* ---------------- the page grid: a reading column with a margin for notes ---------------- */
.band{padding:var(--space) 0;border-top:1px solid var(--line)}
.band.plain{border-top:0}
.grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 48px}
.note{font-family:var(--serif);font-style:italic;font-size:var(--t-lg);color:var(--rubric);line-height:1.3;padding-top:.35em}
.note small{display:block;font-style:normal;font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);margin-top:8px;line-height:1.45}
.col{min-width:0}
.measure{max-width:var(--measure)}
h2{font-size:var(--t-2xl);letter-spacing:-.02em;margin-bottom:22px}
h3{font-family:var(--sans);font-size:var(--t-md);font-weight:600;letter-spacing:-.005em;line-height:1.3}
.prose p{color:var(--ink-2)}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:16px}
.prose strong{color:var(--ink);font-weight:600}
.lede{font-size:var(--t-lg);line-height:1.5;color:var(--ink-2);font-weight:300;max-width:56ch}
.small{font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);line-height:1.5}
.bullets li{position:relative;padding-left:22px;color:var(--ink-2)}
.bullets li+li{margin-top:8px}
.bullets li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:1px;background:var(--rubric)}
@media (max-width:860px){
  .grid{grid-template-columns:1fr}
  .note{font-size:var(--t-md);margin-bottom:14px;padding-top:0}
}

/* ---------------- home: opening ---------------- */
.opening{padding:clamp(40px,7vw,88px) 0 clamp(36px,5vw,64px)}
.opening .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,6vw,80px);align-items:end}
.headline{font-size:var(--t-3xl);font-weight:300;line-height:1.04;letter-spacing:-.035em;max-width:15.5ch}
.opening .lede{margin-top:26px}
.opening .actions{margin-top:34px}
.portrait{position:relative}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 30%;border-radius:var(--radius)}
.portrait figcaption{font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);margin-top:10px}
@media (max-width:860px){
  .opening .wrap{grid-template-columns:1fr}
  .portrait{max-width:300px}
  .portrait img{aspect-ratio:1}
}

/* The memorable thing: an interlinear gloss. A question asked in Spanish,
   answered in English, set the way a classicist reads a text with its
   translation underneath. It shows the method rather than describing it. */
.interlinear{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 48px;align-items:start}
.interlinear .note{padding-top:.5em}
.gloss{border-left:2px solid var(--rubric);padding:4px 0 4px clamp(18px,3vw,32px);display:grid;gap:22px;max-width:52ch}
.gloss p{font-size:var(--t-xl);line-height:1.32;font-weight:300;letter-spacing:-.01em}
.gloss .src{color:var(--ink-2);font-style:italic}
.gloss .tr{display:block;font-family:var(--sans);font-style:normal;font-size:var(--t-sm);color:var(--muted);margin-top:8px;letter-spacing:0}
.gloss .speaker{display:block;font-family:var(--sans);font-size:var(--t-xs);color:var(--rubric);margin-bottom:4px;font-style:normal;letter-spacing:.01em}
.gloss + .small{margin-top:16px;max-width:56ch}
@media (max-width:860px){ .interlinear{grid-template-columns:1fr} .interlinear .note{margin-bottom:14px} }

/* ---------------- offers ---------------- */
.offer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:30px 0 34px;border-top:2px solid var(--ink)}
.offer-main h3{font-family:var(--serif);font-size:var(--t-xl);font-weight:400;letter-spacing:-.015em}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-2);margin-bottom:10px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.status.request::before{background:transparent;border:1.5px solid var(--ink-2)}
.status.dev::before{background:transparent;border:1.5px dashed var(--muted)}
.status.off::before{background:var(--muted)}
.offer-main .bullets{margin-top:4px}
.offer-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.offer{padding:24px 0 28px;border-top:1px solid var(--line)}
.offer h3{font-family:var(--serif);font-size:var(--t-lg);font-weight:400}
.offer p{font-size:var(--t-sm);color:var(--ink-2);margin-top:8px}
.offer .textlink{display:inline-block;margin-top:12px}
.offer-note{align-self:stretch}
.offer-note p{font-family:var(--serif);font-style:italic;font-size:var(--t-lg);color:var(--ink);margin-top:0;line-height:1.35}
@media (max-width:860px){ .offer-row{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .offer-row{grid-template-columns:1fr} }
.offer-dev{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 28px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.offer-dev .status{margin:0}
.offer-dev > p:not(.status){font-size:var(--t-sm);color:var(--ink-2);max-width:60ch}
.offer-dev b{font-family:var(--serif);font-weight:400;font-size:var(--t-lg);color:var(--ink);margin-right:8px}
@media (max-width:700px){ .offer-dev{grid-template-columns:1fr} }
.offer-main .intro{color:var(--ink-2);margin-top:10px}
@media (max-width:860px){
  .offer-main{grid-template-columns:1fr}
}

/* ---------------- principles ---------------- */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,44px)}
.principles h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--t-lg);margin-bottom:10px}
.principles p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
@media (max-width:860px){ .principles{grid-template-columns:1fr} }

/* ---------------- record: degrees and figures ---------------- */
.record{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,64px)}
.degrees li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 18px;padding:14px 0;border-bottom:1px solid var(--line)}
.degrees li:first-child{border-top:1px solid var(--line)}
.degrees b{font-family:var(--sans);font-weight:600;font-size:var(--t-sm)}
.degrees span{grid-column:1;font-size:var(--t-sm);color:var(--muted)}
.degrees em{grid-column:2;grid-row:1/3;font-family:var(--sans);font-style:normal;font-size:var(--t-xs);color:var(--muted);text-align:right;white-space:nowrap;align-self:start;padding-top:2px}
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px 28px;padding-top:4px}
.figure dt{font-family:var(--serif);font-size:var(--t-2xl);font-weight:300;line-height:1;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.figure dt small{font-size:.5em;color:var(--muted)}
.figure dd{margin-top:8px;font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);line-height:1.35;max-width:22ch}
.record .figures{grid-template-columns:1fr;gap:0}
.record .figure{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.record .figure:first-child{border-top:1px solid var(--line)}
.record .figure dd{margin:0;max-width:none}
.figures-note{margin-top:16px}
@media (max-width:860px){ .record{grid-template-columns:1fr} }


/* ---------------- steps: a real sequence, so it is numbered ---------------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.steps li{counter-increment:step;border-top:1px solid var(--ink);padding-top:16px}
.steps li::before{content:counter(step);display:block;font-family:var(--serif);font-size:var(--t-2xl);font-weight:300;color:var(--rubric);line-height:1;margin-bottom:14px}
.steps h3{margin-bottom:6px}
.steps p{font-size:var(--t-sm);color:var(--ink-2)}
@media (max-width:860px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ---------------- closing invitation ---------------- */
.closing{background:var(--sunk);padding:var(--space) 0;border-top:1px solid var(--line)}
.closing h2{font-size:var(--t-3xl);font-weight:300;letter-spacing:-.03em;max-width:16ch}
.closing .lede{margin-top:18px}
.closing .actions{margin-top:30px}

/* ---------------- inner pages ---------------- */
.page-head{padding:clamp(40px,7vw,88px) 0 clamp(28px,4vw,48px)}
.page-head .crumb{font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);margin-bottom:22px}
.page-head .crumb a{color:var(--muted)}
.page-head h1{font-size:var(--t-3xl);font-weight:300;letter-spacing:-.035em;line-height:1.05;max-width:18ch}
.page-head .lede{margin-top:22px}
.page-head .status{margin-top:22px}
.page-head .actions{margin-top:30px}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.topics > div{padding:20px 0;border-top:1px solid var(--line)}
.topics h3{margin-bottom:6px}
.topics p{font-size:var(--t-sm);color:var(--ink-2)}
@media (max-width:700px){ .topics{grid-template-columns:1fr} }
.related{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--sans);font-size:var(--t-sm)}

/* ---------------- booking ---------------- */
.rate{display:flex;align-items:baseline;gap:12px 16px;flex-wrap:wrap}
.rate .amount{font-family:var(--serif);font-weight:300;font-size:var(--t-3xl);letter-spacing:-.03em;font-variant-numeric:lining-nums}
.rate .per{font-family:var(--sans);font-size:var(--t-sm);color:var(--muted)}
.channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.channel{padding:22px 24px 26px 0;border-right:1px solid var(--line)}
.channel+.channel{padding-left:24px}
.channel:last-child{border-right:0}
.channel h3{font-family:var(--serif);font-size:var(--t-lg);font-weight:400;margin-bottom:8px}
.channel p{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:16px}
@media (max-width:860px){
  .channels{grid-template-columns:1fr}
  .channel,.channel+.channel{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;position:relative;font-family:var(--sans);font-weight:600;font-size:var(--t-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--serif);font-size:28px;font-weight:300;color:var(--rubric);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 0 20px;color:var(--ink-2);max-width:var(--measure)}

/* resource cards: each a real thing you can open */
.projects{display:grid;gap:0;border-top:2px solid var(--ink)}
.project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px 48px;padding:28px 0;border-bottom:1px solid var(--line)}
.project h3{font-family:var(--serif);font-size:var(--t-xl);font-weight:400;letter-spacing:-.015em}
.project p{color:var(--ink-2)}
.project .actions{margin-top:16px}
@media (max-width:860px){ .project{grid-template-columns:1fr} }

/* ---------------- footer ---------------- */
.site-foot{border-top:2px solid var(--ink);padding:36px 0 110px}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:28px}
.site-foot .brand b{font-size:21px}
.site-foot p{font-family:var(--sans);font-size:var(--t-xs);color:var(--muted);margin-top:10px;max-width:40ch;line-height:1.55}
.site-foot h2{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;color:var(--muted);margin:0 0 10px;letter-spacing:.01em}
.site-foot li{font-family:var(--sans);font-size:var(--t-sm);margin-bottom:7px}
.site-foot a{text-decoration:none;color:var(--ink-2)}
.site-foot a:hover{color:var(--rubric-deep);text-decoration:underline}
@media (max-width:700px){ .site-foot .wrap{grid-template-columns:1fr 1fr} .site-foot .about{grid-column:1/-1} }

/* WhatsApp: bottom-left, because Netlify puts its own badge bottom-right */
.wa{position:fixed;left:18px;bottom:18px;z-index:30;display:inline-flex;align-items:center;gap:8px;background:#0F7A6D;color:#fff;
  font-family:var(--sans);font-weight:600;font-size:var(--t-sm);padding:11px 16px 11px 13px;border-radius:99px;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.2)}
.wa:hover{background:#0C6559;color:#fff}
.wa svg{width:19px;height:19px}
@media (max-width:520px){ .wa{padding:14px;left:14px;bottom:14px} .wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .wa svg{width:22px;height:22px} }

/* One authored entrance on the home page; nothing else moves on its own. */
@media (prefers-reduced-motion:no-preference){
  .enter{animation:enter .8s cubic-bezier(.16,1,.3,1) both}
  .enter.d2{animation-delay:.08s}.enter.d3{animation-delay:.16s}.enter.d4{animation-delay:.3s}
}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }