/* ===================================================================
   resume.css, shanyce lora
   direction: technical spec sheet
   fonts: karrik (workhorse) + basteleur (display), both self hosted.
   font paths point at the existing fonts/ directory on shanycelora.com.
=================================================================== */

/* --- self hosted faces --------------------------------------- */
@font-face{
  font-family:"Karrik";
  src:url("fonts/karrik-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karrik";
  src:url("fonts/karrik-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Basteleur";
  src:url("fonts/basteleur-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Basteleur";
  src:url("fonts/basteleur-moonlight.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}

:root{
  --sans:"Karrik","Helvetica Neue",Arial,sans-serif;
  --display:"Basteleur",Georgia,serif;
  --paper:#faf9f6;
  --ink:#141311;
  --muted:#6d685f;
  --faint:#8a857b;
  --rule:#d9d6cf;
  --accent:#b23a1e;
  --pad:clamp(14px,3.2vw,32px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  padding:clamp(16px,4vw,48px);
  background:#e6e2da;
  font-family:var(--sans);
  font-size:14px;
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* the document sits on a fluid sheet, framed like a spec form */
.sheet{
  max-width:900px;
  margin:0 auto;
  background:var(--paper);
  border:1px solid var(--ink);
  padding:var(--pad);
  box-shadow:
    0 18px 48px rgba(20,19,17,.12),
    0 4px 12px rgba(20,19,17,.06);
}

a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--accent); }

/* ---------- masthead : identity as a bordered record ------------- */
.masthead{ border:1px solid var(--ink); }
.masthead__top{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-bottom:1px solid var(--ink);
  min-width:0;
}
.name{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(18px,5vw,28px);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0;
  line-height:1.1;
  min-width:0;
  overflow-wrap:anywhere;
}
.download{
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:lowercase; text-decoration:none;
  color:var(--ink); border:1px solid var(--ink);
  padding:6px 10px; white-space:nowrap;
}
.download:hover{ background:var(--ink); color:var(--paper); }
.download::after{ content:" \2193"; }

.fields{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  font-size:clamp(11px,1.3vw,12px);
}
.fields dt{
  grid-column:1;
  padding:8px 12px;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  text-transform:uppercase; letter-spacing:.12em;
  font-size:10px; font-weight:600; color:var(--faint);
  white-space:nowrap;
}
.fields dd{
  grid-column:2;
  margin:0;
  padding:8px 12px;
  border-bottom:1px solid var(--rule);
  color:var(--ink);
  min-width:0;
  overflow-wrap:anywhere;
}
.fields dt:last-of-type, .fields dd:last-of-type{ border-bottom:none; }
.fields a{ text-decoration:none; }
.fields a:hover{ text-decoration:underline; }

/* ---------- section scaffolding ---------------------------------- */
.section{ margin-top:clamp(20px,3.2vw,32px); }
.section__label{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px;
  margin:0 0 4px;
  padding-bottom:7px;
  border-bottom:2px solid var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:lowercase;
}
.section__label .idx{ color:var(--accent); font-weight:600; letter-spacing:.08em; }

.summary{
  margin:12px 0 0;
  font-size:clamp(12.5px,1.45vw,14px);
  line-height:1.55;
  max-width:70ch;
  color:#2c2a26;
  text-wrap:pretty;
}

/* ---------- experience records ----------------------------------- */
.record{ border-bottom:1px solid var(--rule); padding:12px 0; }
.record:first-of-type{ padding-top:14px; }
.record__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:8px 16px; flex-wrap:wrap;
  min-width:0;
}
.record__org{ font-size:clamp(13.5px,1.6vw,15px); font-weight:700; margin:0; min-width:0; }
.record__meta{
  font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.record__loc{
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin:2px 0 0;
}

/* stacked roles inside one org (nationswell, independent) */
.roles{ list-style:none; margin:8px 0 4px; padding:0; }
.roles li{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:8px 16px; flex-wrap:wrap;
  font-size:12px; padding:3px 0;
  border-top:1px dotted var(--rule);
  min-width:0;
}
.roles li:first-child{ border-top:none; }
.roles .title{ font-weight:600; font-style:italic; min-width:0; overflow-wrap:anywhere; }
.roles .when{
  font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

/* numbered bullets */
.bullets{ list-style:none; counter-reset:b; margin:9px 0 0; padding:0; }
.bullets li{
  display:grid; grid-template-columns:24px minmax(0,1fr);
  gap:0 4px;
  counter-increment:b;
  font-size:clamp(11.5px,1.35vw,12.5px);
  line-height:1.5; color:#2c2a26;
  margin-bottom:7px;
  text-wrap:pretty;
}
.bullets li::before{
  content:counter(b,decimal-leading-zero);
  color:var(--accent); font-weight:600; font-size:10px;
  padding-top:2px;
}

/* ---------- earlier experience : compact rows -------------------- */
.compact{ list-style:none; margin:12px 0 0; padding:0; }
.compact > li{ padding:10px 0; border-bottom:1px solid var(--rule); }
.compact > li:first-child{ padding-top:2px; }
.compact__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:6px 16px; flex-wrap:wrap;
  min-width:0;
}
.compact__org{ font-weight:700; font-size:13px; min-width:0; overflow-wrap:anywhere; }
.compact__role{ font-style:italic; color:var(--muted); font-size:11.5px; }
.compact__when{
  font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.compact p{ margin:5px 0 0; font-size:12px; line-height:1.5; color:#2c2a26; text-wrap:pretty; }

/* ---------- education -------------------------------------------- */
.edu{ margin:12px 0 0; font-size:13px; line-height:1.55; }
.edu strong{ font-weight:700; }
.edu .when{ color:var(--muted); }

/* ---------- skills : field and value grid ------------------------ */
.skills{ display:grid; grid-template-columns:auto minmax(0,1fr); margin-top:12px; border:1px solid var(--rule); }
.skills dt{
  grid-column:1; padding:9px 12px;
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
  text-transform:uppercase; letter-spacing:.1em;
  font-size:10px; font-weight:600; color:var(--faint);
}
.skills dd{
  grid-column:2; margin:0; padding:9px 12px;
  border-bottom:1px solid var(--rule);
  font-size:12px; line-height:1.5; color:#2c2a26;
  min-width:0;
  overflow-wrap:anywhere;
}
.skills dt:last-of-type, .skills dd:last-of-type{ border-bottom:none; }

@media (max-width:440px){
  .fields, .skills{ grid-template-columns:1fr; }
  .fields dt{ border-right:none; padding-bottom:2px; border-bottom:none; }
  .fields dd{ padding-top:2px; }
  .fields dt:last-of-type{ border-bottom:none; }
  .skills dt{ border-right:none; border-bottom:none; padding-bottom:2px; }
  .skills dd{ padding-top:2px; }
}

/* ---------- colophon --------------------------------------------- */
.colophon{
  margin-top:22px; padding-top:10px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:10px; letter-spacing:.08em; text-transform:lowercase;
  color:var(--faint);
}
.colophon a{ color:var(--faint); text-decoration:none; }
.colophon a:hover{ color:var(--accent); }

/* ---------- print ------------------------------------------------- */
@media print{
  body{ background:#fff; padding:0; }
  .sheet{ border:none; margin:0; max-width:none; padding:0; box-shadow:none; }
  .download{ display:none; }
}