/* NEOCLOUD LIMITED — editorial publisher.
   Charcoal masthead and footer bracket a light body. Every ink/surface pair below was gated at
   WCAG AA before a line of this was written; numbers are in build/palette-check.py. */
:root{
  --ink:#101722;        /* the anchor: masthead, footer */
  --ink-2:#1B2431;      /* raised surface on dark */
  --paper:#FBF9F5;      /* main surface */
  --paper-2:#F1EDE6;    /* alternate band, for rhythm */
  --accent:#A84D18;     /* marmalade — the one saturated warm accent */
  --brass:#9A7B43;      /* restrained second accent: rules, metadata on dark */
  --muted:#6A645C;      /* secondary text on paper */
  --on-ink:#EAE4DA;
  --on-ink-muted:#A8A096;
  --hair:rgba(16,23,34,.14);
  --hair-dark:rgba(234,228,218,.18);
  --wrap:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga"}
@media(min-width:900px){body{font-size:18px}}

h1,h2,h3,.display{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;
  letter-spacing:-.018em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.35rem,5.4vw,4rem);line-height:1.04}
h2{font-size:clamp(1.65rem,3vw,2.5rem);line-height:1.12}
h3{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:0;margin:0}
p{margin:0 0 1.15em}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media(max-width:600px){.wrap{padding:0 20px}}
.narrow{max-width:70ch}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px}

/* ---- masthead: the institutional signal, charcoal, full width ---- */
.masthead{background:var(--ink);color:var(--on-ink)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:17px;flex-wrap:wrap}
.mark{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.3rem;letter-spacing:.08em;
  color:var(--paper);text-decoration:none;line-height:1}
.mark:hover{color:var(--paper)}
.regno{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-ink-muted);
  font-variant-numeric:tabular-nums}

/* ---- nav: quiet, on paper, under the masthead ---- */
.navbar{border-bottom:1px solid var(--hair);background:var(--paper);
  position:sticky;top:0;z-index:20}
.navbar .wrap{display:flex;gap:30px;padding-block:15px;flex-wrap:wrap}
.navbar a{font-size:.92rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding-bottom:3px;border-bottom:2px solid transparent}
.navbar a:hover{border-bottom-color:var(--hair)}
.navbar a[aria-current=page]{border-bottom-color:var(--accent);color:var(--accent)}

/* ---- hero ---- */
.hero{padding:72px 0 0}
.hero .lede{font-size:clamp(1.08rem,1.7vw,1.3rem);color:#3C3831;max-width:58ch;margin:22px 0 0;
  line-height:1.55}

/* ---- data row: the numbers, as a publisher would set them ---- */
.data{border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:1fr 1fr;margin:52px 0 0}
@media(min-width:860px){.data{grid-template-columns:repeat(4,1fr)}}
.data div{padding:26px 24px 24px 0;border-right:1px solid var(--hair)}
.data div:last-child{border-right:0}
@media(max-width:859px){
  .data div:nth-child(2n){border-right:0}
  .data div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
.data b{display:block;font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(1.6rem,3vw,2.15rem);line-height:1;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.data span{display:block;margin-top:9px;font-size:.82rem;color:var(--muted);letter-spacing:.02em}

/* ---- photo bands ---- */
.band-photo{margin:0;background:var(--ink)}
.band-photo img{width:100%;max-height:560px;object-fit:cover}

/* ---- sections + alternating surfaces ---- */
section{padding:84px 0}
section.alt{background:var(--paper-2)}
section.tight{padding:60px 0}
.lead{font-size:1.1rem;color:#3C3831;max-width:64ch}

/* asymmetric split — the antidote to eight identical stacked blocks */
.split{display:grid;gap:44px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1.05fr 1fr;gap:72px}
  .split.flip > *:first-child{order:2}
}

/* pillars as a numbered editorial list, not icon cards */
.pillars{counter-reset:p;margin-top:8px}
.pillar{counter-increment:p;display:grid;gap:8px 28px;padding:34px 0;
  border-top:1px solid var(--hair);grid-template-columns:1fr}
@media(min-width:760px){.pillar{grid-template-columns:auto 15rem 1fr;align-items:start}}
.pillar::before{content:counter(p,decimal-leading-zero);font-family:Fraunces,Georgia,serif;
  font-size:.95rem;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:3px}
.pillar h3{font-size:1.12rem;font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.01em}
.pillar p{color:var(--muted);margin:0;font-size:.98rem;max-width:56ch}

/* ---- brand entries ---- */
.brand{border-top:1px solid var(--hair);padding:40px 0}
.brand:last-child{border-bottom:1px solid var(--hair)}
.brand-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.brand-head h3{font-family:Fraunces,Georgia,serif;font-size:1.35rem;font-weight:600}
.brand p{color:var(--muted);max-width:58ch;margin:10px 0 0;font-size:.98rem}
.brand img{margin-top:24px;border:1px solid var(--hair)}

/* ---- cookbook titles ---- */
.books{display:grid;gap:0;grid-template-columns:1fr;margin:34px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--hair)}
@media(min-width:700px){.books{grid-template-columns:1fr 1fr;column-gap:56px}}
.books li{display:flex;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--hair)}
.books b{font-family:Fraunces,Georgia,serif;font-size:1.3rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;min-width:2.4ch}
.books span{font-size:.98rem}

/* ---- buttons ---- */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;padding:14px 28px;font-size:.94rem;font-weight:500;text-decoration:none;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:background .15s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn-2{background:transparent;color:var(--ink)}
.btn-2:hover{background:var(--ink);color:var(--paper)}
.tag{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);border:1px solid currentColor;padding:4px 10px}

/* ---- contact ---- */
.bigmail{font-family:Fraunces,Georgia,serif;font-size:clamp(1.45rem,3.6vw,2.2rem);margin:0 0 16px;
  word-break:break-word;letter-spacing:-.02em}
dl.meta{margin:0}
dl.meta dt{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:34px}
dl.meta dt:first-child{margin-top:0}
dl.meta dd{margin:9px 0 0;font-size:1rem;line-height:1.7}

/* ---- legal ---- */
.legal h2{font-size:1.28rem;margin:48px 0 12px}
.legal h2:first-of-type{margin-top:34px}
.legal li{margin-bottom:.5em}
.review{border-left:3px solid var(--brass);background:var(--paper-2);padding:16px 20px;
  font-size:.92rem;color:var(--muted);margin:32px 0 0}
section.alt .review{background:var(--paper)}

/* ---- footer: mirrors the masthead, closes the bracket ---- */
footer{background:var(--ink);color:var(--on-ink-muted);padding:64px 0 52px;font-size:.9rem;
  margin-top:0}
footer .mark{margin-bottom:26px;display:inline-block}
footer .cols{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:760px){footer .cols{grid-template-columns:1.6fr 1fr 1fr;gap:48px}}
footer p{margin:0 0 .55em;max-width:46ch}
footer a{color:var(--on-ink);text-decoration:none;border-bottom:1px solid var(--hair-dark)}
footer a:hover{color:var(--paper);border-bottom-color:var(--brass)}
footer .ftitle{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer .base{border-top:1px solid var(--hair-dark);margin-top:44px;padding-top:24px;
  font-size:.82rem;font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:14px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 18px}