/* kyleluces.com · single stylesheet · tokens at :root */

:root{
  --ink:   #14181D;
  --paper: #F3F3F0;
  --pine:  #1D6F5C;
  --brass: #E0A83A;
  --slate: #5F6A72;
  --hair:  #D8D8D2;

  --font-d: 'Fraunces', Georgia, serif;
  --font-b: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-m: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.8rem, 6.5vw, 4.4rem);
  --fs-title:   clamp(2rem, 4.5vw, 2.8rem);
  --fs-case:    clamp(1.6rem, 3vw, 2rem);
  --fs-lead:    clamp(1.5rem, 2.5vw, 1.75rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.page{max-width:66rem;margin:0 auto;padding:0 2rem 4rem}
.page.doc{max-width:50rem}
body{overflow-x:clip}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--pine);outline-offset:4px;border-radius:1px;
}

/* ---------- header ---------- */
.site-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1.5rem 0 1.1rem;border-bottom:1px solid var(--hair);margin-bottom:3rem;
}
.brand{color:var(--ink);text-decoration:none;font-weight:600;font-size:1.02rem}
.brand:hover{color:var(--pine)}
.site-nav{display:flex;gap:1.7rem;flex-wrap:wrap}
.site-nav a{
  color:var(--ink);text-decoration:none;font-size:.95rem;
  border-bottom:1.5px solid transparent;padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.site-nav a:hover{color:var(--pine);border-bottom-color:var(--pine)}
.site-nav a[aria-current="page"]{color:var(--pine);border-bottom-color:var(--pine)}

/* ---------- type ---------- */
h1.display{
  font-family:var(--font-d);font-weight:480;font-optical-sizing:auto;
  font-size:var(--fs-display);line-height:1.02;letter-spacing:-.015em;margin:0 0 1.6rem;
}
h1.title{
  font-family:var(--font-d);font-weight:460;font-optical-sizing:auto;
  font-size:var(--fs-title);line-height:1.05;letter-spacing:-.01em;margin:0 0 .8rem;
}
.case{
  font-family:var(--font-d);font-weight:460;font-optical-sizing:auto;
  font-size:var(--fs-case);line-height:1.15;letter-spacing:-.008em;margin:0;
}
.lead{
  font-family:var(--font-d);font-weight:420;font-optical-sizing:auto;
  font-size:var(--fs-lead);line-height:1.35;margin:0 0 1.9rem;max-width:34ch;
}
.kv{font-size:1rem;font-weight:600;margin:1.7rem 0 .35rem}
.kv + p{margin-top:0}
.sub-case{font-size:1.15rem;font-weight:600;letter-spacing:-.005em;margin:0 0 .35rem}
p{margin:.9rem 0}
.prose{max-width:62ch}
.page-intro{font-size:.875rem;color:var(--slate);margin:0 0 4rem}
.employer-note{font-size:.875rem;color:var(--slate);margin:-.4rem 0 1.8rem}
.sect{margin-top:2.8rem}
.after-form{margin-top:1.4rem}
.quiet-line{margin-top:3rem}
.mt-block{margin-top:3.5rem}
.small{font-size:.875rem;color:var(--slate)}
.label{
  font-family:var(--font-m);font-size:.72rem;font-weight:400;
  letter-spacing:0;color:var(--slate);margin:0 0 1rem;
}
.num{
  font-family:var(--font-m);font-size:.92em;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.ro-value .num{font-size:1em}
.mark{width:34px;height:2px;background:var(--pine);border:0;margin:0 0 1.35rem}

/* ---------- links ---------- */
.prose a,.small a,p a{
  color:var(--pine);text-decoration:none;
  border-bottom:1.5px solid var(--hair);padding-bottom:1px;
  transition:border-color .18s ease;
}
.prose a:hover,.small a:hover,p a:hover{border-bottom-color:var(--pine)}

/* ---------- homepage columns ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.photo{
  width:118px;height:118px;object-fit:cover;
  display:block;margin-bottom:2rem;
}
.thesis{max-width:22ch}
.meta{font-size:.9rem;color:var(--slate);margin:0}
.dot{padding:0 .55rem;color:var(--hair)}

.contact{margin-top:2.5rem}
.links{display:flex;flex-wrap:wrap;gap:1.6rem 2rem;margin:1.5rem 0 0;padding:0;list-style:none}
.links a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:1.02rem;
  border-bottom:1.5px solid var(--hair);padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}
.links a:hover{color:var(--pine);border-bottom-color:var(--pine)}
.links .tag{font-family:var(--font-m);font-size:.68rem;color:var(--slate);margin-left:.4rem}
.links .tel{font-family:var(--font-m);font-size:.92rem;font-weight:500}

/* ---------- readout (signature element) ---------- */
.ro{display:flex;align-items:baseline;gap:.6rem}
.ro-label{font-size:.875rem;color:var(--slate);min-width:0}
.ro-dots{
  flex:1 1 2rem;min-width:2rem;align-self:flex-end;
  border-bottom:2px dotted var(--hair);transform:translateY(-.32em);
}
.ro-value{
  font-family:var(--font-m);font-size:.8125rem;font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.5rem;
}
.tick{display:inline-block;width:14px;height:3px;background:var(--brass);flex:0 0 auto}

/* ---------- evidence ledger ---------- */
.ledger .label{padding-bottom:.6rem;border-bottom:1px solid var(--ink);margin-bottom:1rem}
.evidence{
  display:block;color:inherit;text-decoration:none;
  padding:1.35rem 0;border-bottom:1px solid var(--hair);
}
.evidence:first-of-type{padding-top:.2rem}
.evidence .ttl{
  font-weight:600;font-size:1.05rem;letter-spacing:-.005em;margin:0 0 .25rem;
  transition:color .18s ease;
}
.evidence:hover .ttl{color:var(--pine)}
.evidence .sub{font-size:.875rem;color:var(--slate);margin:0 0 .85rem}

.creds{
  border-top:1px solid var(--hair);margin-top:4.5rem;padding-top:1.5rem;
  font-size:.875rem;color:var(--slate);
}
.avail{margin:1.1rem 0 0;font-size:.9rem}
.avail a{
  color:var(--pine);text-decoration:none;
  border-bottom:1.5px solid var(--hair);padding-bottom:1px;
  transition:border-color .18s ease;
}
.avail a:hover{border-bottom-color:var(--pine)}

/* ---------- sections (/work, /services) ---------- */
.block{margin:0 0 4.5rem}
.block > .label{
  padding-bottom:.6rem;border-bottom:1px solid var(--ink);margin-bottom:1.8rem;
}
[id]{scroll-margin-top:1.5rem}
.case-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap}
.case-date{
  font-family:var(--font-m);font-size:.72rem;color:var(--slate);white-space:nowrap;
}
.case-sub{font-size:.95rem;color:var(--slate);margin:.5rem 0 0}

/* ---------- ink panel (the report card) ---------- */
.panel{
  background:var(--ink);color:var(--paper);
  padding:1.5rem 1.7rem 1.2rem;margin:2.4rem 0;
}
.panel .label{
  color:color-mix(in srgb, var(--paper) 62%, var(--ink));
  border-bottom:1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  padding-bottom:.55rem;margin-bottom:.4rem;
}
.panel .ro{padding:.5rem 0;border-bottom:1px solid color-mix(in srgb, var(--paper) 12%, transparent)}
.panel .ro:last-child{border-bottom:0}
.panel .ro-label{color:color-mix(in srgb, var(--paper) 72%, var(--ink))}
.panel .ro-dots{border-bottom-color:color-mix(in srgb, var(--paper) 26%, transparent)}
.panel .ro-value{color:var(--brass)}
.panel .ro.sub-ro{padding-left:1.2rem}

/* ---------- strip ---------- */
.strip{
  display:flex;gap:.75rem;overflow-x:auto;list-style:none;
  margin:0;padding:.5rem 0 .75rem;scroll-snap-type:x proximity;
}
.doc .strip{
  width:min(62rem, 100vw - 2.8rem);
  margin-left:calc((100% - min(62rem, 100vw - 2.8rem)) / 2);
}
.strip li{flex:0 0 auto;scroll-snap-align:start}
.strip button{
  border:0;padding:0;background:none;cursor:zoom-in;line-height:0;
}
.strip img{
  height:240px;width:auto;display:block;
  border:1px solid var(--hair);transition:border-color .18s ease;
}
.strip button:hover img{border-color:var(--pine)}
.caption{font-size:.875rem;color:var(--slate);margin:.6rem 0 0}

dialog.lightbox{
  border:0;padding:0;background:var(--paper);
  max-width:min(92vw,64rem);
}
dialog.lightbox::backdrop{background:color-mix(in srgb, var(--ink) 65%, transparent)}
.lightbox img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto}
.lightbox figure{margin:0}
.lightbox figcaption{
  font-family:var(--font-m);font-size:.72rem;color:var(--slate);
  padding:.75rem 1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.lightbox .lb-close{
  font-family:var(--font-m);font-size:.72rem;background:none;border:0;
  color:var(--slate);cursor:pointer;padding:0;
}
.lightbox .lb-close:hover{color:var(--pine)}

/* ---------- video facade ---------- */
.video-wrap{margin:1.6rem 0 .9rem;background:var(--ink)}
.video-wrap iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.facade{
  position:relative;display:block;width:100%;
  border:0;padding:0;background:none;cursor:pointer;line-height:0;
}
.facade img{display:block;width:100%;height:auto}
.facade .bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:baseline;gap:.6rem;
  padding:.75rem 1rem;line-height:1.4;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  color:var(--paper);
  font-family:var(--font-m);font-size:.8125rem;font-weight:500;
  transition:background .18s ease;
}
.facade:hover .bar{background:var(--ink)}
.facade .bar .ro-dots{border-bottom-color:color-mix(in srgb, var(--paper) 26%, transparent)}
.facade .bar .rt{color:var(--brass);font-variant-numeric:tabular-nums}

.credits{
  font-family:var(--font-m);font-size:.72rem;color:var(--slate);
  line-height:1.9;margin:.9rem 0 0;
}

/* ---------- earlier rows ---------- */
.earlier .ro{padding:.9rem 0;border-bottom:1px solid var(--hair)}
.earlier .ro-label{color:var(--ink);font-size:.95rem}
.earlier .ro-label .co{font-weight:600}
.earlier .ro-label .co-sub{color:var(--slate)}

/* ---------- services ---------- */
.offer{padding:0 0 2.6rem;margin:0 0 2.6rem;border-bottom:1px solid var(--hair)}
.offer:last-of-type{border-bottom:0}
.incl{list-style:none;margin:1.2rem 0;padding:0;max-width:62ch}
.incl li{padding:.5rem 0;border-bottom:1px solid var(--hair);font-size:.95rem}
.incl li:last-child{border-bottom:0}
.price{max-width:62ch;margin-top:1.5rem}
.price .ro-label{color:var(--ink)}
.price .ro-value{font-size:1rem}
.price-note{font-size:.875rem;color:var(--slate);margin:.5rem 0 0}
.proof{font-size:.875rem;color:var(--slate);margin:1.1rem 0 0}

.start-form{display:grid;grid-template-columns:1fr 1.5fr 1fr auto;gap:1.4rem;align-items:end;max-width:48rem;margin:1.4rem 0 0}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-family:var(--font-m);font-size:.72rem;color:var(--slate)}
.field input{
  font:inherit;color:var(--ink);background:none;border:0;
  border-bottom:1px solid var(--hair);padding:.4rem 0;border-radius:0;
}
.field input:focus{outline:none;border-bottom:2px solid var(--pine);margin-bottom:-1px}
.btn{
  font-family:var(--font-m);font-size:.8125rem;font-weight:500;color:var(--ink);
  background:none;border:1px solid var(--ink);padding:.6rem 1.1rem;cursor:pointer;white-space:nowrap;
  transition:color .18s ease,border-color .18s ease;
}
.btn:hover{color:var(--pine);border-color:var(--pine)}
.composed{display:none;margin:1.4rem 0 0;max-width:62ch}
.composed.shown{display:block}
.composed pre{
  white-space:pre-wrap;font-family:var(--font-m);font-size:.8125rem;line-height:1.7;
  border:1px solid var(--hair);padding:1rem 1.2rem;margin:.5rem 0 0;
}

/* ---------- footer ---------- */
.site-foot{
  margin-top:5rem;padding-top:1.4rem;border-top:1px solid var(--hair);
  font-family:var(--font-m);font-size:.68rem;color:var(--slate);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.site-foot a{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--hair)}
.site-foot a:hover{color:var(--pine);border-bottom-color:var(--pine)}

/* ---------- reveal (homepage only) ---------- */
.r{opacity:0;transform:translateY(8px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.02s}.d2{animation-delay:.12s}.d3{animation-delay:.22s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .r{animation:none;opacity:1;transform:none}
  *{transition-duration:.01ms !important}
}

/* ---------- responsive ---------- */
@media (max-width:52rem){
  .page{padding:0 1.4rem 3rem}
  .site-head{margin-bottom:3rem}
  .cols{grid-template-columns:1fr;gap:3.5rem}
  .contact{margin-top:2.4rem}
  .thesis{max-width:28ch}
  .photo{width:96px;height:96px;margin-bottom:2rem}
  .strip img{height:180px}
  .start-form{grid-template-columns:1fr}
}
@media (max-width:26rem){
  .case-head{flex-direction:column;gap:.2rem}
}

@media print{
  body{background:#fff}
  .r{animation:none;opacity:1;transform:none}
  .page{padding:0;max-width:none}
}