/* kennyclerigo.com redesign: plain CSS, no framework. rem-based so it scales with the user's text size. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/dm-sans-latin.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/playfair-display-latin.woff2) format("woff2")}

:root{
  --bg:#fffaf1;                 /* warm off-white page */
  --surface:#fffdf8;            /* cards: a touch lighter than the page */
  --ink:#1f1a17;
  --muted:#5f564d;              /* 6.9:1 on --bg */
  --accent:#85672a;             /* the one accent: buttons and small labels only (5.1:1 on --bg) */
  --hairline:rgba(31,26,23,.09);
  --line:rgba(31,26,23,.14);
  --radius:1rem;
  --shadow:0 1px 2px rgba(31,26,23,.04),0 .5rem 1.5rem rgba(76,58,35,.06);
  --header-h:4rem;
  --wrap:72rem;
  --gutter:1.5rem;
  --section:clamp(5rem,3rem + 6vw,9rem);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:.375rem}
.skip{position:absolute;left:-999px;top:.5rem;z-index:100;background:var(--ink);color:var(--bg);padding:.75rem 1rem;border-radius:.5rem}
.skip:focus{left:1rem}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* Header: translucent material, content scrolls under it; scroll-edge fade instead of a border */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,250,241,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.site-header::after{content:"";position:absolute;inset:100% 0 auto;height:1.25rem;pointer-events:none;background:linear-gradient(rgba(31,26,23,.07),rgba(31,26,23,0));opacity:0;transition:opacity .25s ease-out}
.site-header.is-scrolled::after{opacity:1}
.nav{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mark{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem}
.mark img{height:21px;width:auto}
.nav-links{display:flex;gap:.25rem;margin-right:-.75rem}
.nav-links a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .75rem;border-radius:.625rem;font-weight:500;letter-spacing:.005em;transition:background-color .1s ease-out,transform .1s ease-out}
.nav-links a:hover{background:rgba(31,26,23,.05)}

/* Type scale: tracking tightens as size grows, leading tightens too */
.hero-name{font-family:var(--serif);font-weight:700;font-size:clamp(3.25rem,1.6rem + 6.4vw,7rem);line-height:.95;letter-spacing:-.04em}
.section-title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,1.45rem + 2.2vw,3.25rem);line-height:1.08;letter-spacing:-.025em;margin-bottom:clamp(2rem,1.5rem + 1.5vw,3rem)}
.card-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,1.3rem + .8vw,1.875rem);line-height:1.15;letter-spacing:-.015em}
.card-sub{font-weight:700;font-size:1.125rem;line-height:1.3;letter-spacing:-.005em}
.tag{display:inline-flex;align-items:center;font-size:.75rem;font-weight:700;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:.375rem .625rem;border-radius:999px;background:rgba(133,103,42,.09);margin-bottom:.875rem}
.tag-inline{margin:0 0 0 .5rem;vertical-align:.1em}
.meta,.muted{color:var(--muted)}
.meta{font-size:.9375rem}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;max-width:40rem}

/* Hero: full width, type-led, portrait right */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-content:end;align-items:center;gap:2rem;padding-top:clamp(3rem,2rem + 4vw,6rem);position:relative}
.hero::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--hairline)}
/* desktop: portrait stands on the hero's bottom edge (hairline), its fade lands on the line */
.hero-copy{align-self:center}
.hero-intro{margin-top:clamp(1.5rem,1rem + 1.5vw,2.25rem);max-width:32rem;font-size:clamp(1.125rem,1rem + .45vw,1.375rem);line-height:1.5;color:var(--ink)}
.hero-role{font-weight:600}
.hero-portrait{justify-self:end;align-self:end;width:100%;max-width:30rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(#000 78%,transparent);mask-composite:intersect}
.hero-portrait img{width:100%;vertical-align:bottom}

/* Buttons: accent primary, ink outline secondary, instant press feedback */
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(2rem,1.5rem + 1vw,2.5rem)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;letter-spacing:.01em;border:1.5px solid transparent;transition:transform .1s ease-out,background-color .15s ease-out,border-color .15s ease-out}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{background:#735823}
.btn-secondary{border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:rgba(31,26,23,.06)}
.btn:active,.nav-links a:active,.mark:active,.text-link:active{transform:scale(.97);transition-duration:.1s}
.card-link:active{transform:scale(.99);transition-duration:.1s}

/* Sections */
.section{padding-top:var(--section)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:start}
.split .section-title,.split .card-title{margin-bottom:0}

/* One card style, site-wide */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-pad{padding:clamp(1.25rem,1rem + 1vw,2rem)}
.card-pad .card-sub+*{margin-top:.5rem}
.card-pad .meta+.meta{margin-top:.125rem}
a.card-link{display:block;transition:box-shadow .2s ease-out,transform .1s ease-out}
a.card-link:hover{box-shadow:0 1px 2px rgba(31,26,23,.05),0 1rem 2.5rem rgba(76,58,35,.12)}

/* Selected Work: text leads, small square image */
.work-list{display:grid;gap:1.25rem}
.work-card{display:grid;grid-template-columns:minmax(0,1fr) 15rem;align-items:stretch}
.work-text{padding:clamp(1.25rem,1rem + 1.5vw,2.5rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:calc(60ch + 5rem)}
.work-company{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,1.3rem + .8vw,2rem);line-height:1.15;letter-spacing:-.02em}
.work-dates{font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:0;color:var(--muted);white-space:nowrap}
.work-role{margin-top:.75rem;font-weight:700}
.work-built{margin-top:.375rem;color:var(--muted);max-width:60ch}
.cap-first::first-letter{text-transform:uppercase}
.work-thumb{width:15rem;min-height:15rem;height:100%;overflow:hidden;background:#efe6d6} /* flush to the card edge; outer corners take the card radius */
.work-thumb img{width:100%;height:100%;object-fit:cover}

.bullets li{position:relative;padding-left:1.125em}
.bullets li::before{content:"";position:absolute;left:.15em;top:.68em;width:.35em;height:.35em;border-radius:50%;background:currentColor;opacity:.55}
.bullets li+li{margin-top:.5rem}
.card .bullets,.tl-body .bullets{margin-top:1rem}
#services .split p{max-width:40rem}

/* Project card */
.project-media{background:#1d4d33}
.project-media img{width:100%;height:auto;aspect-ratio:12/5;object-fit:cover}
.project-text{padding:clamp(1.25rem,1rem + 1.5vw,2.5rem);display:flex;flex-direction:column;justify-content:center}
.project-text>p:not(.tag):not(.meta){margin-top:.75rem}
.project-text .meta{margin-top:1rem}
.project-text .tag{align-self:flex-start}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}

/* Experience timeline */
.timeline{position:relative}
.tl-item{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:2.5rem;position:relative;padding-bottom:3rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:calc(11rem + 1.25rem);top:.55rem;bottom:-.55rem;width:1px;background:var(--line)}
.tl-item:last-child::before{bottom:auto;height:0}
.tl-item::after{content:"";position:absolute;left:calc(11rem + 1.25rem - .3125rem);top:.3rem;width:.625rem;height:.625rem;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
.tl-date{font-size:.9375rem;font-weight:600;color:var(--muted);text-align:right;padding-top:.0625rem;font-variant-numeric:tabular-nums}
.tl-body{padding-left:1rem;max-width:44rem}
.tl-body .meta{margin-top:.25rem}

/* Gallery */
.gallery img{width:100%;height:16rem;object-fit:cover}
.gallery figcaption{padding:.875rem 1rem;color:var(--muted);font-size:.9375rem}

/* Tools */
.pills{display:flex;flex-wrap:wrap;gap:.625rem}
.pills li{padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:500}

/* Certifications */
.certs .card{display:flex;flex-direction:column}
.text-link{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:auto;padding-top:.5rem;align-self:flex-start;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:transform .1s ease-out}
.text-link:hover{text-decoration-thickness:2px}

/* Contact: full closing section on ink */
.contact{margin-top:var(--section);background:var(--ink);color:var(--bg);padding-block:clamp(5rem,3rem + 7vw,10rem) clamp(2.5rem,2rem + 2vw,4rem)}
.contact .section-title{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);letter-spacing:-.035em;margin-bottom:1.5rem}
.contact-line{font-size:clamp(1.125rem,1rem + .45vw,1.375rem);line-height:1.5;max-width:38rem;color:rgba(255,250,241,.82)}
.contact .btn-primary{background:var(--accent);color:var(--bg)}
.contact .btn-primary:hover{background:#957434}
.contact .btn-secondary{border-color:rgba(255,250,241,.75);color:var(--bg)}
.contact .btn-secondary:hover{background:rgba(255,250,241,.08)}
.fineprint{margin-top:clamp(4rem,3rem + 4vw,7rem);padding-top:1.5rem;border-top:1px solid rgba(255,250,241,.14);font-size:.9375rem;color:rgba(255,250,241,.68)}
.fineprint a{display:inline-flex;align-items:center;min-height:2.75rem}
.contact :focus-visible{outline-color:var(--bg)}

/* Reveal: one gentle fade, no slide */
.js .reveal{opacity:0;transition:opacity .25s ease-out}
.js .reveal.is-visible{opacity:1}

/* Tablet */
@media (max-width:960px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-item{grid-template-columns:8.5rem minmax(0,1fr);gap:2rem}
  .tl-item::before{left:calc(8.5rem + 1rem)}
  .tl-item::after{left:calc(8.5rem + 1rem - .3125rem)}
}
/* Phone */
@media (max-width:767px){
  :root{--header-h:3.75rem;--gutter:1.5rem}
  .mark img{height:18px}
  .hero{grid-template-columns:1fr;min-height:0;gap:0;padding-top:2rem}
  .hero::after{display:none}
  .hero-portrait{order:-1;justify-self:start;max-width:11rem;margin-bottom:1.5rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(#000 72%,transparent);mask-composite:intersect}
  .hero-copy{padding-bottom:0}
  .split,.grid-2,.grid-3{grid-template-columns:1fr}
  .work-card{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .work-text{max-width:none}
  .work-thumb{width:5.5rem;min-height:0;height:auto;aspect-ratio:1/1;margin:1.25rem 1.25rem 0 0;border-radius:.75rem}
  .work-dates{display:block;margin-top:.25rem;white-space:normal}
  .work-dates .sep{display:none}
  .gallery img{height:14rem}
  /* timeline: single column, line on the left */
  .tl-item{grid-template-columns:1fr;gap:.375rem;padding-left:1.75rem;padding-bottom:2.5rem}
  .tl-item::before{left:.3125rem;top:.6rem}
  .tl-item::after{left:0}
  .tl-date{text-align:left}
  .tl-body{padding-left:0}
}

/* Accessibility preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1}
}
@media (prefers-reduced-transparency:reduce){
  .site-header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--muted:#3d362f;--hairline:rgba(31,26,23,.45);--line:rgba(31,26,23,.6)}
  .site-header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--ink)}
  .site-header::after{display:none}
  .card{box-shadow:none}
  .contact-line,.fineprint{color:var(--bg)}
}