:root{
  --background:#F0EAE1; --foreground:#1A1614; --card:#E9E2D8; --primary:#C4909A;
  --secondary:#D6CCBF; --muted:#DDD6CC; --muted-foreground:#7A6A62;
  --accent:#A85C3C; --accent-foreground:#F0EAE1; --border:rgba(26,22,20,.14);
  --ring:#C4909A; --radius:3px; --slate:#4A4E58;
  --font-display:'Fraunces',serif; --font-body:'DM Sans',sans-serif; --font-mono:'DM Mono',monospace;
  --gutter:clamp(1.25rem,5vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(196,144,154,.35)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
a{color:var(--accent);text-underline-offset:3px;transition:color .15s ease}
a:hover{color:var(--foreground)}
h1,h2,h3{margin:0}
#top,#work,#about,#writing{scroll-margin-top:40px}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.rv{animation:rise .7s ease both;animation-timeline:view();animation-range:entry 0% cover 24%}
.rvf{animation:fade .8s ease both;animation-timeline:view();animation-range:entry 0% cover 22%}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

.banner{background:var(--foreground);color:var(--background);text-align:center;padding:.5rem var(--gutter);font-family:var(--font-mono);font-size:.75rem;line-height:1.5;letter-spacing:.02em}

/* nav */
nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:1rem var(--gutter);background:rgba(240,234,225,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;color:var(--foreground);text-decoration:none}
.nav-links{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--foreground);text-decoration:none;padding:.5rem .875rem;border-radius:var(--radius);transition:background .15s ease}
.nav-links a:hover{background:rgba(26,22,20,.06)}
.btn-solid{color:var(--background) !important;background:var(--foreground);padding:.625rem 1.5rem !important;margin-left:.5rem}
.btn-solid:hover{background:#3D3028}

.nav-toggle{display:none;width:2.5rem;height:2.5rem;padding:0;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--radius);color:var(--foreground);cursor:pointer;transition:background .15s ease}
.nav-toggle line{transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s ease;transform-origin:center;transform-box:view-box}
.nav-toggle .bar-top{transform:translateY(-5px)}
.nav-toggle .bar-bot{transform:translateY(5px)}
.nav-toggle[aria-expanded="true"] .bar-top{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar-mid{opacity:0;transform:scaleX(.4)}
.nav-toggle[aria-expanded="true"] .bar-bot{transform:rotate(-45deg)}
.nav-toggle:hover{background:rgba(26,22,20,.06)}
@media (max-width:640px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:.5rem;padding-top:1rem;margin-top:.25rem;border-top:1px solid var(--border)}
  .nav-links.open{display:flex}
  .nav-links a{padding:.875rem .25rem;text-align:center}
  .nav-links a.nav-cta{margin-left:0;margin-top:0;margin-bottom:0;padding:.875rem 1.5rem;text-align:center;width:50%;align-self:center}
}

/* buttons */
.btn-accent,.btn-outline{font-size:.875rem;font-weight:500;text-decoration:none;border-radius:var(--radius);transition:background .15s ease;white-space:nowrap}
.btn-accent{color:var(--accent-foreground);background:var(--accent);padding:.8125rem 1.75rem}
.btn-accent:hover{background:#8E4A2E;color:var(--accent-foreground)}
.btn-outline{color:var(--foreground);padding:.625rem 1.5rem;border:1px solid var(--border);display:inline-block}
.btn-outline:hover{background:rgba(26,22,20,.05)}
.hero-cta .btn-outline{padding:.8125rem 1.75rem;border-color:rgba(26,22,20,.16)}

/* hero */
#top{position:relative;overflow:hidden;background:var(--card);display:flex;flex-wrap:wrap;align-items:center;gap:2rem;min-height:min(88vh,640px);padding:clamp(3rem,6vw,4rem) var(--gutter)}
.hero-wash{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 45%;opacity:.1;filter:grayscale(1);z-index:0}
.hero-blob{position:absolute;right:-90px;top:-70px;width:min(560px,52vw);aspect-ratio:1;background:var(--primary);opacity:.4;border-radius:52% 48% 38% 62%/45% 55% 45% 55%;z-index:1}
.hero-note{position:absolute;right:var(--gutter);bottom:1rem;z-index:2;margin:0;max-width:24ch;font-family:var(--font-mono);font-size:.6875rem;line-height:1.5;color:var(--muted-foreground);text-align:right}
.hero-note span{color:var(--accent)}
.hero-copy{position:relative;z-index:2;flex:1 1 20rem;min-width:min(100%,17rem);display:flex;flex-direction:column;gap:1.375rem;animation:rise .8s ease both}
.eyebrow{display:flex;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.05em;color:var(--muted-foreground)}
.eyebrow .rule{width:34px;height:1px;flex:none;background:var(--accent);display:block}
h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.5rem,6.6vw,5rem);line-height:1.02;letter-spacing:-.02em;max-width:11ch;text-wrap:balance}
h1 em{font-weight:300;font-style:italic;color:var(--accent)}
.lede{font-size:1rem;line-height:1.6;max-width:46ch;color:#3D3028;margin:0;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.375rem}
.hero-portrait{position:relative;z-index:3;flex:1 1 14rem;min-width:min(100%,12rem);max-width:31rem;aspect-ratio:5/6;animation:fade 1s ease both}
.hero-oval{position:absolute;inset:2% 18% 14% -6%;border:1px solid var(--accent);border-radius:58% 42% 46% 54%/56% 48% 52% 44%;transform:rotate(-22deg);z-index:2}
.hero-portrait-mask{position:absolute;inset:9% 12% 7% 0;background:var(--slate);border-radius:58% 42% 46% 54%/56% 48% 52% 44%;overflow:hidden;box-shadow:0 24px 60px rgba(26,22,20,.14);z-index:3}
.hero-portrait-mask img{width:100%;height:100%;object-fit:cover;object-position:54% 24%}
.hero-dot{position:absolute;right:1%;top:9%;width:19%;aspect-ratio:1;background:var(--accent);opacity:.6;border-radius:50%}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:2rem 0 0}
.stat{background:var(--background);padding:1.5rem var(--gutter)}
.stat-big{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,5vw,2.5rem);line-height:1;color:var(--accent);margin-bottom:.5rem}
.stat-label{font-family:var(--font-mono);font-size:.8125rem;color:var(--muted-foreground);letter-spacing:.02em}

/* sections */
section{padding:clamp(2.5rem,6vw,4rem) var(--gutter)}
#work{padding:clamp(3rem,8vw,6rem) var(--gutter) clamp(2.5rem,6vw,4rem)}
#writing{border-top:1px solid var(--border)}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1.5rem;margin-bottom:3rem}
#writing .section-head{margin-bottom:2rem}
.kicker{font-family:var(--font-mono);font-size:.875rem;color:var(--muted-foreground);letter-spacing:.04em;margin-bottom:1rem}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.875rem,5vw,2.5rem);line-height:1.06;letter-spacing:-.015em;max-width:20ch}

/* work tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1rem}
.tile{display:flex;flex-direction:column;text-decoration:none;color:var(--foreground);background:var(--background);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:background .15s ease,border-color .15s ease}
.tile:hover{background:var(--card);border-color:rgba(26,22,20,.3);color:var(--foreground)}
.tile-media{position:relative;aspect-ratio:4/3;background:linear-gradient(180deg,rgba(196,144,154,.2),rgba(214,204,191,.35));border-bottom:1px solid var(--border);overflow:hidden}
.tile-body{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.tags{display:flex;gap:.375rem;flex-wrap:wrap}
.tag{font-size:.6875rem;font-weight:500;letter-spacing:.02em;color:var(--accent);background:#A85C3C18;border:1px solid #A85C3C33;padding:.25rem .625rem;border-radius:999px}
.tile h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.375rem,3.6vw,1.75rem);line-height:1.14;letter-spacing:-.01em}
.tile p{font-size:.9375rem;line-height:1.6;color:var(--muted-foreground);margin:0;text-wrap:pretty}
.outcome{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.8125rem;color:var(--foreground)}

/* about */
#about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(2.5rem,5vw,4rem);align-items:start;padding:clamp(2.5rem,6vw,4rem) var(--gutter) clamp(3rem,8vw,6rem);border-top:1px solid var(--border)}
.about-h{line-height:1.08;margin-bottom:1.5rem;max-width:16ch}
.about-h em{font-style:italic;color:var(--primary)}
.about-p{font-size:1rem;line-height:1.7;color:#3D3028;margin:0 0 1rem;max-width:46ch;text-wrap:pretty}
.about-p + .about-p{margin-bottom:2rem}
.toolkit{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.toolkit h3{font-family:var(--font-body);font-weight:500;font-size:1.125rem;margin-bottom:.25rem}
.toolkit-sub{font-size:.8125rem;color:var(--muted-foreground);margin:0 0 1.5rem}
.tool{display:flex;gap:1rem;align-items:baseline;padding:.875rem 0;border-top:1px solid var(--border)}
.tool-num{font-family:var(--font-mono);font-size:.8125rem;color:var(--muted-foreground);min-width:1.75rem}
.tool-name{font-size:.9375rem;font-weight:500;line-height:1.4}
.tool-note{font-size:.8125rem;color:var(--muted-foreground);line-height:1.5}

/* writing */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.post{background:var(--background);text-decoration:none;color:var(--foreground);padding:2rem;display:flex;flex-direction:column;gap:.75rem;transition:background .15s ease}
.post:hover{background:var(--card);color:var(--foreground)}
.post-date{font-family:var(--font-mono);font-size:.8125rem;color:var(--muted-foreground)}
.post-title{font-family:var(--font-display);font-weight:400;font-size:1.375rem;line-height:1.2;letter-spacing:-.01em}
.post-blurb{font-size:.9375rem;line-height:1.6;color:var(--muted-foreground);text-wrap:pretty}

/* signup */
.signup{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(2rem,5vw,3rem);align-items:center;background:var(--foreground);color:var(--background);margin-top:4rem}
.signup h2{font-weight:300;margin-bottom:.75rem;max-width:none}
.signup p{font-size:1rem;line-height:1.65;color:#B8ADA4;margin:0;max-width:34ch}
.signup form{display:flex;flex-wrap:wrap;gap:.5rem}
.signup input{flex:1 1 220px;min-width:0;font-family:var(--font-body);font-size:.875rem;color:var(--foreground);background:var(--background);border:1px solid transparent;border-radius:var(--radius);padding:.875rem 1rem}
.signup button{font-family:var(--font-body);font-size:.875rem;font-weight:500;color:var(--foreground);background:var(--primary);border:0;border-radius:var(--radius);padding:.875rem 2rem;cursor:pointer;transition:background .15s ease}
.signup button:hover{background:#D6A7B0}
.signup button:disabled,.signup input:disabled{opacity:.55;cursor:not-allowed}
.signup button:disabled:hover{background:var(--primary)}

/* footer */
footer{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:2rem var(--gutter) 3rem}
.footer-mark{display:flex;align-items:center}
.footer-links{display:flex;gap:.5rem;flex-wrap:wrap}
.footer-links a{font-size:.875rem;font-weight:500;color:var(--foreground);text-decoration:none;padding:.5rem 1rem;border:1px solid var(--border);border-radius:var(--radius);display:inline-flex;align-items:center;gap:.5rem;transition:background .15s ease}
.footer-links a:hover{background:rgba(26,22,20,.05)}
.footer-links .disabled{font-size:.875rem;font-weight:500;color:var(--muted-foreground);padding:.5rem 1rem;border:1px solid var(--border);border-radius:var(--radius);display:inline-flex;align-items:center;gap:.5rem;opacity:.55;cursor:not-allowed}

/* experiments page */
.nav-links a.nav-active{color:var(--accent);padding-bottom:.375rem;border-bottom:2px solid rgba(168,92,60,.45);border-radius:0;transition:border-color .15s ease}
.nav-links a.nav-active:hover{background:none;border-color:var(--accent)}
.page-experiments{display:flex;flex-direction:column;min-height:100vh}
.page-experiments .page-body{flex:1 1 auto}

.page-experiments .page-body{padding:clamp(3rem,8vw,5.5rem) clamp(1.25rem,5vw,3rem) clamp(2.5rem,6vw,4rem)}
.exp-intro{max-width:70ch;margin-bottom:clamp(2.5rem,6vw,3.5rem);animation:rise .8s ease both}
.eyebrow-mono{font-family:var(--font-mono);font-size:.875rem;color:var(--muted-foreground);letter-spacing:.04em;margin-bottom:1rem}
.exp-intro h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.25rem,6vw,3.25rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 1.5rem;max-width:22ch}
.exp-intro h1 em{font-style:italic;color:var(--primary)}
.exp-intro p{font-size:1.0625rem;line-height:1.65;color:#3D3028;margin:0;max-width:52ch;text-wrap:pretty}
.exp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1rem}
.exp-card{display:flex;flex-direction:column;background:var(--background);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:background .15s ease,border-color .15s ease}
.exp-card:hover{background:var(--card);border-color:rgba(26,22,20,.3)}
.exp-media{position:relative;aspect-ratio:4/3;background:linear-gradient(180deg,rgba(196,144,154,.2),rgba(214,204,191,.35));border-bottom:1px solid var(--border);display:flex;align-items:flex-end;padding:1rem;overflow:hidden}
.exp-slot{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.02em;color:var(--muted-foreground);background:var(--background);border:1px solid var(--border);padding:.25rem .5rem;border-radius:999px}
.exp-body{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.exp-body h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.375rem,3.6vw,1.625rem);line-height:1.14;letter-spacing:-.01em;margin:0}
.exp-body p{font-size:.9375rem;line-height:1.6;color:var(--muted-foreground);margin:0;text-wrap:pretty}
.exp-status{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.8125rem;color:var(--foreground)}
.exp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.86) contrast(.97)}

/* this-site detail page */
.detail-head{padding:clamp(2.5rem,7vw,4.5rem) var(--gutter) clamp(2rem,5vw,3rem);animation:rise .8s ease both}
.backlink{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.04em;color:var(--muted-foreground);text-decoration:none}
.backlink:hover{color:var(--accent)}
.detail-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.25rem,6vw,3.5rem);line-height:1.04;letter-spacing:-.02em;margin:1.5rem 0 1.25rem;max-width:24ch}
.detail-head h1 em{font-style:italic;color:var(--primary)}
.detail-lede{font-size:1.0625rem;line-height:1.65;color:#3D3028;margin:0;max-width:52ch;text-wrap:pretty}
.detail-hero-grid{display:flex;flex-wrap:wrap;gap:clamp(1.75rem,4vw,3rem);align-items:flex-start;margin-top:1.5rem}
.detail-intro{flex:1 1 26rem;min-width:min(100%,20rem)}
.detail-intro h1{margin:0 0 1.25rem}
.fact-card{flex:0 1 22rem;min-width:min(100%,18rem);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.fact-card h2{font-family:var(--font-body);font-weight:500;font-size:1.125rem;margin:0 0 .25rem;max-width:none}
.fact-sub{font-size:.8125rem;color:var(--muted-foreground);margin:0 0 1.5rem}
.fact-list{display:flex;flex-direction:column}
.fact-row{display:flex;gap:1rem;align-items:baseline;padding:.875rem 0;border-top:1px solid var(--border)}
.fact-label{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);min-width:5rem}
.fact-value{font-size:.9375rem;line-height:1.5}
.detail-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.btn-accent{font-size:.875rem;font-weight:500;color:var(--accent-foreground);background:var(--accent);text-decoration:none;padding:.8125rem 1.75rem;border-radius:var(--radius);transition:background .15s ease}
.btn-accent:hover{background:#8E4A2E;color:var(--accent-foreground)}
.btn-outline{font-size:.875rem;font-weight:500;color:var(--foreground);text-decoration:none;padding:.8125rem 1.75rem;border:1px solid var(--border);border-radius:var(--radius);transition:background .15s ease}
.btn-outline:hover{background:rgba(26,22,20,.05);color:var(--foreground)}
.disabled-btn{font-size:.875rem;font-weight:500;color:var(--muted-foreground);padding:.8125rem 1.75rem;border:1px solid var(--border);border-radius:var(--radius);opacity:.55;cursor:not-allowed}
.detail-fig{margin:0}
.detail-fig img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius)}
figcaption{font-family:var(--font-mono);font-size:.75rem;line-height:1.6;color:var(--muted-foreground);margin-top:.875rem}
.detail-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(2rem,5vw,3.5rem);align-items:start;padding:clamp(3rem,7vw,5rem) var(--gutter) clamp(2rem,5vw,3rem)}
.detail-split figure{margin:0}
.detail-split figure img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.detail-split h2,.detail-steps h2,.detail-cli h2,.detail-close h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.75rem,4.4vw,2.25rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1.25rem;max-width:22ch}
.detail-split p,.detail-cli p,.detail-close p{font-size:1rem;line-height:1.7;color:#3D3028;margin:0 0 1rem;max-width:46ch;text-wrap:pretty}
.detail-steps{padding:clamp(2rem,5vw,3rem) var(--gutter);border-top:1px solid var(--border)}
.detail-steps-head{margin-bottom:2.5rem}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));column-gap:clamp(1.5rem,3.5vw,3rem);row-gap:0;border-bottom:1px solid var(--border);margin:0;padding:0}
.steps li{border-top:1px solid var(--border);padding:1.375rem 0 1.75rem;display:flex;flex-direction:column;gap:.625rem}
.step-num{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);letter-spacing:.06em}
.step-name{font-family:var(--font-display);font-size:1.125rem;font-weight:400;line-height:1.2}
.step-note{font-size:.9375rem;line-height:1.6;color:var(--muted-foreground);text-wrap:pretty}
.detail-cli{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(2rem,5vw,3.5rem);align-items:start;padding:clamp(3rem,7vw,4.5rem) var(--gutter)}
.detail-cli>.detail-cli-text{order:2}
.detail-cli>.detail-cli-term{order:1}
.detail-cli-head{max-width:52ch}
.term{position:relative;background:var(--foreground);border-radius:var(--radius);overflow:hidden;max-height:19.5rem}
.term::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5rem;background:linear-gradient(rgba(26,22,20,0),#1A1614);pointer-events:none}
.term-bar{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid rgba(240,234,225,.12)}
.tdot{width:8px;height:8px;border-radius:50%;background:rgba(240,234,225,.22)}
.term-name{margin-left:.5rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:#9A8A82}
.term-body{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.term-line{display:flex;gap:.75rem;font-family:var(--font-mono);font-size:.8125rem;line-height:1.7}
.term-line .who{flex:none;min-width:1.75rem}
.term-line .what{white-space:pre-wrap}
.term-line.cmd .who{color:var(--primary)}
.term-line.cmd .what{color:var(--background)}
.term-line.out .who{color:var(--muted-foreground)}
.term-line.out .what{color:#B8ADA4}
.term-line.me .who{color:var(--accent)}
.term-line.me .what{color:var(--background)}
.term-line.cc .who{color:var(--primary)}
.term-line.cc .what{color:#C8BDB4}
.term-note{font-family:var(--font-mono);font-size:.75rem;line-height:1.6;color:var(--muted-foreground);margin:.875rem 0 0}
.detail-close{padding:clamp(2rem,5vw,3rem) var(--gutter) clamp(3rem,7vw,5rem);border-top:1px solid var(--border)}
.detail-close>div{max-width:52ch}
.exp-readmore{font-size:.875rem;font-weight:500;color:var(--accent);text-decoration:none;transition:color .15s ease}
.exp-readmore:hover{color:var(--foreground)}

.banner a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.detail-steps{scroll-margin-top:40px}