/* ==========================================================================
   CASE FILE — the shared system stylesheet for joeyvictorino.com.
   One file for every page. Per-page <style> blocks are retired.
   Concept: design/CONCEPT.md · Tokens and rules: design/SYSTEM.md
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --paper:#F3F0E8;
  --ink:#161616;
  --ink-2:#5A5852;
  --hair:rgba(22,22,22,.16);
  --hair-soft:rgba(22,22,22,.09);
  --accent:#6E2430;

  --field:#171716;
  --field-text:#F3F0E8;
  --field-muted:rgba(243,240,232,.72);
  --field-hair:rgba(243,240,232,.2);
  --field-accent:#C98A94;

  /* four sizes per page */
  --t-display:clamp(2.5rem, 1.8rem + 3.1vw, 4.6rem);
  --t-section:clamp(1.6rem, 1.38rem + 1vw, 2.3rem);
  --t-body:clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);
  --t-meta:.78rem;

  --measure:62ch;
  --sp-lg:clamp(4.25rem, 2.75rem + 5vw, 7.5rem);
  --sp-sm:clamp(2.25rem, 1.75rem + 2vw, 3.75rem);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
::selection{ background:var(--accent); color:var(--paper); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }
img,svg{ max-inline-size:100%; block-size:auto; }
main[tabindex="-1"]:focus{ outline:none; }

.wrap{
  max-inline-size:68rem;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3.5rem);
}
.prose{ max-inline-size:var(--measure); }
.prose p{ margin:0; }
.prose p + p{ margin-block-start:1.05em; }
p{ margin:0; }

/* ---------- type registers ---------- */
.serif{ font-family:'Instrument Serif',Palatino,'Times New Roman',serif; font-weight:400; letter-spacing:-.01em; }
h1,h2,h3{ margin:0; font-weight:400; }
.display{ font-family:'Instrument Serif',Palatino,serif; font-size:var(--t-display); line-height:1.04; max-inline-size:24ch; letter-spacing:-.012em; text-wrap:balance; }
.section-title{ font-family:'Instrument Serif',Palatino,serif; font-size:var(--t-section); line-height:1.14; max-inline-size:28ch; }
.meta{
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.meta-strong{ color:var(--ink); font-weight:600; }
.file-no{ color:var(--accent); }   /* accent = meaning: file numbers, verdicts, active */
.muted{ color:var(--ink-2); }
.small{ font-size:.9rem; line-height:1.55; }

/* ---------- links & buttons ---------- */
a{ color:inherit; }
.text-link{
  color:var(--ink);
  text-decoration:none;
  border-block-end:1px solid var(--hair);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.text-link:hover{ color:var(--accent); border-color:var(--accent); }
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  font:500 var(--t-meta)/1 'Instrument Sans',system-ui,sans-serif;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.6rem;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn:disabled{ opacity:.58; cursor:wait; }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper); }

/* ---------- dossier block ---------- */
.dossier{
  border-block:1px solid var(--hair);
  padding-block:1rem;
}
.dossier dl{
  margin:0; display:grid; gap:.9rem 2.5rem;
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
}
.dossier .pair{ margin:0; }
.dossier dt{
  font-size:var(--t-meta); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2);
}
.dossier dd{ margin:.3rem 0 0; font-size:.95rem; line-height:1.45; }

/* ---------- record tables (hairline rows, no boxes) ---------- */
.record{ border-block-start:1px solid var(--hair); }
.record-row{
  display:grid; grid-template-columns:1fr; gap:.35rem 2rem;
  padding-block:1.15rem;
  border-block-end:1px solid var(--hair);
  text-decoration:none; color:inherit;
}
.record-row.is-link{ transition:background-color .2s var(--ease); }
.record-row.is-link:hover{ background:rgba(22,22,22,.03); }
.record-key{ font-size:var(--t-meta); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.record-key .file-no{ font-weight:600; }
.record-val{ font-size:.98rem; line-height:1.55; max-inline-size:62ch; }
.record-val strong{ font-weight:600; }
.record-note{ display:block; margin-block-start:.4rem; color:var(--ink-2); font-size:.92rem; line-height:1.5; }
.record-row.bare{ grid-template-columns:1fr auto !important; align-items:baseline; }
.record-row.bare .go{ color:var(--accent); font-size:var(--t-meta); }
@media (min-width:700px){
  .record-row{ grid-template-columns:13rem 1fr; }
  .record-row.wide-key{ grid-template-columns:16rem 1fr; }
  .record-row.num-key{ grid-template-columns:3.5rem 1fr; }
}

/* service record: the employer ledger — deliberately the heaviest table */
.service-record .record-row{ align-items:baseline; padding-block:1.35rem; }
.service-record .org{
  font-family:'Instrument Serif',Palatino,serif;
  font-size:clamp(1.35rem, 1.2rem + .7vw, 1.8rem);
  line-height:1.15;
}
@media (min-width:700px){
  .service-record .record-row{ grid-template-columns:minmax(14rem,18rem) 1fr; }
}

/* ---------- exhibits: the only framed object in the system ---------- */
.exhibit{
  margin:0;
  border:1px solid var(--hair);
  background:#FCFBF7;
  transition:border-color .2s var(--ease);
  container-type:inline-size;
}
a.exhibit-link{ text-decoration:none; color:inherit; display:block; }
a.exhibit-link:hover .exhibit,
.exhibit:hover{ border-color:var(--accent); }
.exhibit img{ display:block; inline-size:100%; border-block-end:1px solid var(--hair-soft); }
.exhibit figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 1.1rem;
}
.exhibit .ex-title{ font-size:.95rem; font-weight:600; line-height:1.35; }
.exhibit .ex-meta{ font-size:var(--t-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.exhibit-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:760px){ .exhibit-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@container (min-width:30rem){
  .exhibit figcaption{ padding:1rem 1.4rem; }
}

/* portrait placeholder until the real photograph is shot */
/* portrait: unframed by system rule — a frame means an openable exhibit */
.portrait{
  margin:0;
  max-inline-size:10.5rem;
  justify-self:start;
  order:-1;              /* on small screens the face leads, then the claim */
  margin-block-end:.35rem;
}
.portrait img{ display:block; inline-size:100%; block-size:auto; }
@media (min-width:900px){
  .portrait{ max-inline-size:22rem; justify-self:end; order:0; margin-block-end:0; }
}

/* ---------- sections & rhythm ---------- */
.sec{ padding-block:var(--sp-lg); }
.sec-hero{ padding-block:clamp(3.25rem, 2.25rem + 4vw, 5.5rem) var(--sp-sm); }
.sec-tight{ padding-block:var(--sp-sm); }
.hairline{ border-block-start:1px solid var(--hair); }
.two-col{ display:grid; grid-template-columns:1fr; gap:2.25rem; }
@media (min-width:900px){ .two-col{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:4rem; } .two-col.hero-col{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:5rem; } }
.sig{
  font-family:'Instrument Serif',Palatino,serif;
  font-size:var(--t-section); line-height:1.2; max-inline-size:26ch;
}
.sig em{ font-style:italic; }

/* ---------- contact close (single dark surface) ---------- */
.close-field{ background:var(--field); color:var(--field-text); }
.close-field .meta{ color:var(--field-muted); }
.close-field .muted{ color:var(--field-muted); }
.close-field .text-link{ color:var(--field-text); border-color:var(--field-hair); }
.close-field .text-link:hover{ color:var(--field-accent); border-color:var(--field-accent); }
.close-field .btn{ border-color:var(--field-text); color:var(--field-text); }
.close-field .btn:hover{ background:var(--field-text); color:var(--field); }
.close-field .btn-solid{ background:var(--field-text); color:var(--field); }
.close-field .btn-solid:hover{ background:var(--field-accent); border-color:var(--field-accent); color:var(--field); }
.close-field :focus-visible{ outline-color:var(--field-text); }
.close-field .record-row{ border-color:var(--field-hair); }
.close-field .record{ border-color:var(--field-hair); }
.close-field .record-key{ color:var(--field-muted); }

/* ---------- forms ---------- */
.f-label{ display:block; font-size:var(--t-meta); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.close-field .f-label{ color:var(--field-muted); }
.f-input{
  inline-size:100%; background:transparent; border:0;
  border-block-end:1px solid var(--hair);
  padding:.8rem 0; margin-block-start:.2rem;
  color:inherit; font-family:inherit; font-size:var(--t-body);
  border-radius:0;
  transition:border-color .2s var(--ease);
}
.close-field .f-input{ border-color:var(--field-hair); }
.f-input:focus{ border-block-end-color:var(--accent); outline:none; }
.close-field .f-input:focus{ border-block-end-color:var(--field-accent); }
.f-input:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-block-end-color:transparent; }
textarea.f-input{ min-block-size:7rem; resize:vertical; line-height:1.55; }
select.f-input{
  appearance:none; -webkit-appearance:none;
  padding-inline-end:2rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F3F0E8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center;
}
select.f-input option{ color:#161616; background:#F3F0E8; }
.hp{ position:absolute; inset-inline-start:-9999px; }
.cf-turnstile{ min-block-size:65px; }

/* ---------- layout utilities (the only spacing not in components) ---------- */
.lead{ font-size:clamp(1.2rem, 1.1rem + .5vw, 1.5rem); line-height:1.5; }
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.mt-s{ margin-block-start:.9rem; } .mt-m{ margin-block-start:1.8rem; }
.mt-l{ margin-block-start:3rem; }  .mt-xl{ margin-block-start:4.25rem; }

/* credentials disclosure */
details.credentials{ border-block-start:1px solid var(--hair); }
details.credentials summary{
  cursor:pointer; padding-block:1rem; list-style:none;
  font-size:var(--t-meta); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
}
details.credentials summary::-webkit-details-marker{ display:none; }
details.credentials summary::after{ content:" +"; color:var(--accent); }
details.credentials[open] summary::after{ content:" \2212"; }
details.credentials .record{ border-block-start:0; }

/* outcomes strip: four possible verdicts */
.outcomes{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-block:1px solid var(--hair); }
@media (min-width:760px){ .outcomes{ grid-template-columns:repeat(4,1fr); } }
.outcome{
  margin:1.1rem 0; padding-inline-start:.9rem;
  border-inline-start:2px solid var(--accent);
  font-size:var(--t-meta); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- one reveal: the dossier hairline draws in ---------- */
html.enhanced .dossier{ background:
  linear-gradient(var(--hair), var(--hair)) no-repeat 0 0 / 0% 1px,
  linear-gradient(var(--hair), var(--hair)) no-repeat 0 100% / 0% 1px;
  border-color:transparent;
  animation:rule-in .9s var(--ease) .15s forwards;
}
@keyframes rule-in{ to{ background-size:100% 1px, 100% 1px; } }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.enhanced .dossier{ animation:none; background-size:100% 1px,100% 1px; }
  *{ transition:none !important; }
}

/* ---------- print ---------- */
@media print{
  body{ background:#fff; color:#000; }
  .site-head,.menu-btn,.btn,form,.skip-link,.cf-turnstile{ display:none !important; }
  .close-field{ background:#fff; color:#000; }
  .close-field .muted,.close-field .meta,.close-field .record-key{ color:#333; }
  a{ color:#000; text-decoration:none; }
  main a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#444; }
  .exhibit{ break-inside:avoid; }
  details::details-content{ content-visibility:visible; }
  details > summary{ list-style:none; }
}

.brief-form{ display:flex; flex-direction:column; gap:1.7rem; }
.form-status{ margin:0; color:var(--field-accent); display:none; }
.self-start{ align-self:flex-start; }
.bq{ margin:0; }