/* Rachel Sorey — rachelsorey.com
   Palette v1, locked 2026-08-02, pending Rachel's confirmation.
   EVERY colour is a variable. If she reacts to the palette, this block is the
   only thing that changes. Do not hardcode a colour anywhere below. */

:root{
  /* --- the five --- */
  --green-dark:  #435336;   /* background + all text on cream */
  --sage:        #7F8A75;   /* ACCENT ONLY — cannot host text, see note */
  --orange:      #DB9750;   /* ACCENT ONLY — cannot host text, see note */
  --cream:       #E8DDCE;   /* background + all text on dark green */
  --gold-a:      #C9A227;   /* gradient stop 1 — provisional */
  --gold-b:      #F0DC82;   /* gradient stop 2 — provisional */
  --gold: linear-gradient(90deg, var(--gold-a), var(--gold-b));

  /* CONTRAST FACTS, measured, do not re-litigate in CSS:
       dark green <-> cream ........ 6.19  AA both directions  -> ALL TEXT
       cream on sage ............... 2.70  fails even large    -> never text
       dark green on sage .......... 2.29  fails               -> never text
       orange on cream ............. 1.83  fails               -> never text
       orange on dark green ........ 3.38  large / UI only
     So: sage and orange are shape-and-fill. Rules, borders, block fills,
     icons, underlines, overlays. No words. */

  --wrap: 1100px;
  --bar-y: clamp(3.5rem, 7vw, 6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--green-dark);
  font:400 19px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the bars ---------- */
/* Alternating full-bleed bands. Only two background colours exist. */
.bar{padding:var(--bar-y) 24px}
/* Two bars of the same colour read as ONE section, so they must not double
   their padding at the seam. Without this, about.html's hero and the role
   list (both cream) sit 2x --bar-y apart. */
.bar--cream + .bar--cream,
.bar--green  + .bar--green{padding-top:0}
.bar--cream{background:var(--cream);color:var(--green-dark)}
.bar--green{background:var(--green-dark);color:var(--cream)}
.wrap{max-width:var(--wrap);margin:0 auto}

/* Paragraphs run the FULL width of the container. Do not add a narrower
   reading measure — no max-width in ch, no ~700px prose column. The wrap IS
   the measure. (Standing preference, restated 2026-08-02.) */
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* ---------- type ---------- */
h1,h2,h3{margin:0 0 .5em;font-weight:600;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,6vw,4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-size:1.15rem;font-weight:600;letter-spacing:.01em}
.lede{font-size:clamp(1.15rem,2.1vw,1.4rem);line-height:1.5}
.eyebrow{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;margin:0 0 1.4rem;opacity:.75;
}

/* ---------- rules: where sage and orange are allowed to live ---------- */
.rule{height:3px;border:0;margin:0 0 2.2rem;width:88px;background:var(--orange)}
.bar--green .rule{background:var(--sage)}
.rule--gold{background:var(--gold);width:140px}

/* ---------- links ---------- */
/* Orange cannot carry body-size text, so inline links keep the text colour and
   take an orange underline instead. The colour cue is the rule, not the ink. */
a{color:inherit;text-decoration:none;
  border-bottom:2px solid var(--orange);
  padding-bottom:1px;transition:background-color .15s ease}
a:hover{background:rgba(219,151,80,.18)}
.bar--green a{border-bottom-color:var(--sage)}
.bar--green a:hover{background:rgba(127,138,117,.28)}
a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* ---------- nav ---------- */
.nav{background:var(--green-dark);color:var(--cream);padding:20px 24px}
.nav .wrap{display:flex;gap:28px;align-items:baseline;flex-wrap:wrap}
.nav .name{font-weight:600;letter-spacing:.02em;margin-right:auto}
.nav a{border-bottom:2px solid transparent;font-size:.95rem}
.nav a[aria-current="page"]{border-bottom-color:var(--orange)}
.nav a:hover{background:transparent;border-bottom-color:var(--sage)}

/* ---------- hero ---------- */
.hero{padding-top:calc(var(--bar-y) * 1.15)}
/* Portrait styles kept, unused for now. Marika 2026-08-02: did not like the
   hero placement; the image files stay in assets/ and the markup was removed
   pending a decision on where it goes. */
.portrait{width:220px;height:auto;border-radius:3px;display:block}
@media(min-width:860px){ .portrait{width:300px} }
/* On about.html the hero leads straight into the role list, same colour.
   Halve its bottom padding there only; on index it precedes a green bar and
   keeps the full gap. */
.hero:has(+ .bar--cream){padding-bottom:calc(var(--bar-y) * .5)}
.hero .lede{max-width:none}

/* ---------- service / credential grid ---------- */
.grid{display:grid;gap:2px;margin-top:2.5rem}
@media(min-width:720px){ .grid--2{grid-template-columns:1fr 1fr} }
@media(min-width:900px){ .grid--3{grid-template-columns:repeat(3,1fr)} }

/* Cards sit on a sage or orange FILL — never text on sage, so the card's own
   background stays cream or dark green and sage is the divider between them. */
.card{padding:1.7rem 1.6rem;background:var(--cream);color:var(--green-dark)}
.bar--green .card{background:var(--green-dark);color:var(--cream)}
.grid{background:var(--sage)}          /* the 2px gaps show as sage rules */
.card h3{margin-bottom:.45rem}
.card p{font-size:.98rem;line-height:1.55;margin:0}

/* ---------- experience list ---------- */
.role{padding:1.9rem 0;border-top:2px solid var(--sage)}
.role:first-of-type{border-top:0;padding-top:.5rem}
.role__head{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:baseline;margin-bottom:.7rem}
.role__title{font-size:1.2rem;font-weight:600;margin:0}
.role__meta{font-size:.92rem;opacity:.8;font-variant-numeric:tabular-nums}
.role ul{margin:0;padding-left:1.15rem}
.role li{margin:0 0 .5rem}
.role li:last-child{margin-bottom:0}

/* ---------- skills ---------- */
.skills{margin-top:2rem}
.skillset{padding:1.5rem 0;border-top:2px solid var(--sage)}
.skillset:first-child{border-top:0}
.skillset h3{margin-bottom:.6rem}
.skillset p{font-size:1rem;line-height:1.7;margin:0}
/* Separators between skills. These are TEXT GLYPHS, so they may not take an
   accent colour — orange on cream is 1.83:1. They inherit the body colour and
   recede by weight and opacity instead, which is a contrast-safe way to get the
   same visual rhythm. */
.sep{color:inherit;opacity:.4;padding:0 .3em;font-weight:400}

/* ---------- facts strip ---------- */
.facts{display:flex;flex-wrap:wrap;gap:2px;margin-top:2.5rem;background:var(--sage)}
.fact{flex:1 1 190px;padding:1.4rem 1.3rem;background:var(--green-dark);color:var(--cream)}
.bar--green .fact{background:var(--cream);color:var(--green-dark)}
.fact .n{display:block;font-size:1.9rem;font-weight:600;line-height:1.1;margin-bottom:.2rem}
.fact .l{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;opacity:.85}

/* ---------- footer ----------
   The contact block IS the footer, identical on every page. It closes each
   page on dark green, so the last content section above it must be cream —
   both pages are ordered so that alternation lands correctly. */
/* Tighter than a content bar: the footer is a closing block, not a section
   to read through, so it takes about half the vertical padding. */
.foot{
  border-top:4px solid transparent;border-image:var(--gold) 1;
  padding-top:calc(var(--bar-y) * .5);
  padding-bottom:calc(var(--bar-y) * .5);
}
.foot .eyebrow{margin-bottom:.6rem}
.foot h2{margin-bottom:.35em}
.foot .rule{margin-bottom:1.2rem}
.foot p{margin-bottom:.6em}
.foot__lines{font-size:1.05rem;margin-top:.9rem}
.foot__dot{opacity:.45;padding:0 .5em}
.foot__meta{margin-top:1rem;font-size:.9rem;opacity:.75}

/* ---------- build-time markers, never ship visible ---------- */
.todo{
  background:var(--orange);color:var(--green-dark);
  padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.9rem;font-weight:600;
  border-left:6px solid var(--green-dark);
}

@media print{ .nav,.todo{display:none} .bar{padding:1.2rem 0} }