/* Daniel W. Lynn — danielwlynn.com
   Design system: patent front matter + cold water
   Display  IBM Plex Sans Condensed
   Body     IBM Plex Serif
   Utility  IBM Plex Mono
*/

:root{
  --ink:#0F1922;
  --slate:#3A4C58;
  --muted:#6B7F8C;
  --mist:#E9F0F4;
  --wash:#F5F9FB;
  --paper:#FFFFFF;
  --ozone:#0B7FA8;
  --ozone-deep:#075C7A;
  --trace:#C7D7E0;
  --rule:#DCE7ED;

  --f-display:"IBM Plex Sans Condensed","Arial Narrow",sans-serif;
  --f-body:"IBM Plex Serif",Georgia,serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --wrap:1140px;
  --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;height:auto}
a{color:var(--ozone);text-decoration:none}
a:hover{color:var(--ozone-deep);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--ozone);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ozone);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.25}
h4{font-size:1rem;letter-spacing:.01em}

p{margin:0 0 1.15em;max-width:66ch}
.lede{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.62;color:var(--slate)}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:60;
}
.masthead-in{
  max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:70px;
}
.wordmark{
  font-family:var(--f-display);
  font-weight:600;font-size:1.12rem;
  letter-spacing:.03em;color:var(--ink);
  text-transform:uppercase;white-space:nowrap;
}
.wordmark:hover{color:var(--ozone);text-decoration:none}
.wordmark span{color:var(--ozone)}

.nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav a{
  font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);padding:6px 0;border-bottom:1.5px solid transparent;
}
.nav a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--ozone)}
.nav a.on{color:var(--ink);border-bottom-color:var(--ozone)}

@media (max-width:860px){
  .masthead{position:static}
  .masthead-in{flex-direction:column;align-items:flex-start;padding-top:16px;padding-bottom:12px;gap:12px}
  .nav{gap:16px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,7vw,90px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(32px,5vw,64px);align-items:start}
.hero h1{margin-bottom:.42em}
.hero-title-sub{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.05rem,2.1vw,1.45rem);
  color:var(--slate);line-height:1.35;margin:0 0 30px;max-width:30ch;
}
.hero-portrait{position:relative}
.hero-portrait img{width:100%;filter:saturate(.94)}
.hero-portrait figcaption{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.5;
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ---------- SIGNATURE: specification block ---------- */
.spec{
  border:1px solid var(--ink);
  background:var(--wash);
  font-family:var(--f-mono);
  font-size:12.5px;
  line-height:1.5;
  max-width:520px;
}
.spec-head{
  background:var(--ink);color:#fff;
  padding:8px 14px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:14px;
}
.spec-head em{font-style:normal;color:var(--trace)}
.spec dl{margin:0;padding:4px 0}
.spec-row{
  display:grid;grid-template-columns:132px 1fr;
  gap:14px;padding:9px 14px;
  border-bottom:1px dotted var(--trace);
}
.spec-row:last-child{border-bottom:0}
.spec dt{color:var(--muted);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.spec dd{margin:0;color:var(--ink)}
@media (max-width:520px){.spec-row{grid-template-columns:1fr;gap:2px}}

/* ---------- SIGNATURE: water transformation ---------- */
.transform{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;gap:0;margin:38px 0 34px;
  border:1px solid var(--rule);
}
.state{padding:26px 22px;background:var(--wash);text-align:center}
.state:nth-child(3){background:#DCEDF4}
.state-formula{
  font-family:var(--f-mono);font-size:1.35rem;font-weight:500;
  color:var(--ozone-deep);letter-spacing:.02em;margin:0 0 8px;
}
.state-formula sub{font-size:.62em}
.state-label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.state-note{font-family:var(--f-body);font-size:13.5px;color:var(--slate);margin:8px 0 0;line-height:1.45;max-width:none}
.arrow{
  display:flex;align-items:center;justify-content:center;
  padding:0 14px;background:var(--paper);
  font-family:var(--f-mono);color:var(--ozone);font-size:14px;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
}
@media (max-width:820px){
  .transform{grid-template-columns:1fr}
  .arrow{padding:8px 0;border-left:0;border-right:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);transform:rotate(90deg)}
}

/* ---------- sections ---------- */
.band{padding:clamp(48px,6.5vw,86px) 0;border-bottom:1px solid var(--rule)}
.band.tint{background:var(--wash)}
.band.dark{background:var(--ink);border-bottom:0}
.band.dark h2,.band.dark h3{color:#fff}
.band.dark p{color:#BCCCD6}
.band.dark .eyebrow{color:#5FBEDD}
.band.dark .eyebrow::after{background:#2C3E4C}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,60px);align-items:start}
.two-col.weighted{grid-template-columns:1.25fr .75fr}
.two-col.weighted-l{grid-template-columns:.75fr 1.25fr}
@media (max-width:880px){.two-col,.two-col.weighted,.two-col.weighted-l{grid-template-columns:1fr}}

.section-head{max-width:60ch;margin-bottom:34px}

/* ---------- record / timeline ---------- */
.record{border-top:1px solid var(--ink)}
.entry{
  display:grid;grid-template-columns:140px 1fr;
  gap:clamp(16px,3vw,44px);
  padding:26px 0;border-bottom:1px solid var(--rule);
}
.entry-years{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  color:var(--ozone);padding-top:5px;white-space:nowrap;
}
.entry h3{margin-bottom:4px}
.entry-role{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;
}
.entry p{margin-bottom:0;font-size:16px}
@media (max-width:700px){.entry{grid-template-columns:1fr;gap:6px}.entry-years{padding-top:0}}

/* ---------- patents ---------- */
.patent-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.patent{
  display:grid;grid-template-columns:150px 1fr;
  gap:clamp(14px,3vw,36px);
  padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.patent-no{
  font-family:var(--f-mono);font-size:13px;font-weight:500;
  color:var(--ozone-deep);letter-spacing:.02em;
}
.patent-title{font-size:16.5px;margin:0;color:var(--ink);max-width:none}
.patent-title small{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:5px;text-transform:uppercase}
@media (max-width:620px){.patent{grid-template-columns:1fr;gap:4px}}

/* ---------- metric strip ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:8px 0 0}
.metric{background:var(--paper);padding:26px 20px}
.band.tint .metric{background:var(--wash)}
.metric-n{font-family:var(--f-display);font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:600;color:var(--ozone-deep);line-height:1;margin:0 0 8px;letter-spacing:-.02em;white-space:nowrap}
.metric-l{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0;line-height:1.5}
@media (max-width:820px){.metrics{grid-template-columns:1fr 1fr}}

/* ---------- credential groups ---------- */
.cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cred{background:var(--paper);padding:28px 26px}
.band.tint .cred{background:var(--wash)}
.cred h3{font-size:1.05rem;margin-bottom:14px}
.cred ul{margin:0;padding:0;list-style:none}
.cred li{
  font-size:15px;line-height:1.55;color:var(--slate);
  padding:8px 0 8px 18px;position:relative;border-bottom:1px dotted var(--trace);
}
.cred li:last-child{border-bottom:0}
.cred li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1.5px;background:var(--ozone)}
@media (max-width:760px){.cred-grid{grid-template-columns:1fr}}

/* ---------- figure ---------- */
.fig{margin:0}
.fig img{width:100%}
.fig figcaption{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.55;
}
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,26px)}
@media (max-width:700px){.fig-pair{grid-template-columns:1fr}}

/* ---------- pull quote ---------- */
.pull{
  border-left:3px solid var(--ozone);
  padding:4px 0 4px 26px;margin:34px 0;
}
.pull p{font-family:var(--f-display);font-size:clamp(1.2rem,2.3vw,1.6rem);line-height:1.35;color:var(--ink);font-weight:400;margin:0;max-width:34ch}

/* ---------- contact ---------- */
.contact-card{border:1px solid var(--ink);background:var(--wash);padding:0;max-width:560px}
.contact-card .spec-head{margin:0}
.contact-body{padding:26px}
.contact-body p:last-child{margin-bottom:0}

/* ---------- page intro ---------- */
.page-top{padding:clamp(40px,5.5vw,70px) 0 clamp(28px,3.5vw,44px);border-bottom:1px solid var(--rule)}
.page-top h1{margin-bottom:.3em}
.page-top .lede{margin-bottom:0}

/* ---------- footer / cross links ---------- */
.foot{background:var(--ink);color:#9FB3BF;padding:clamp(46px,6vw,74px) 0 34px;font-size:14.5px}
.foot h4{
  color:#fff;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px;font-weight:500;
}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:36px;border-bottom:1px solid #24343F}
.foot p{color:#9FB3BF;font-size:15px;max-width:38ch}
.foot a{color:#CFE0E9}
.foot a:hover{color:#fff}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:5px 0}
.foot li a{font-family:var(--f-mono);font-size:12px;letter-spacing:.05em}
.foot-base{
  padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6B818F;
}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}}