/* ======================
   Reusable components
   ====================== */

/* ---- Boxes ---- */
.box{border:1px solid var(--ink);padding:10px;background:rgba(255,255,255,.4);}
.box h3{font-family:'Playfair Display',serif;margin:.1em 0 .3em;font-size:18px;}
.list{font:12px 'Roboto Mono',monospace;}
.edition{position:relative;cursor:help;}
.edition:hover{text-decoration:underline dotted var(--ink);text-underline-offset:2px;}

/* ======================
   Author portrait
   ====================== */
.author-photo{float:right;width:120px;margin:0 0 10px calc(var(--gutter)+8px);padding:10px;background:transparent;border:0;text-align:center;font:11px 'Roboto Mono',monospace;color:#555;shape-outside:inset(0 round 2px);shape-margin:10px;}
.author-photo img{width:100%;display:block;border:0;background:transparent;box-shadow:none;border-radius:2px;filter:grayscale(100%) contrast(1.1) brightness(.96);}
.author-photo .caption{margin-top:4px;padding:0 2px;letter-spacing:.2px;color:#666;}
.about-grid .col::after{content:"";display:block;clear:both;}
@media(max-width:980px){.author-photo{float:none;margin:0 auto 10px;padding:0;shape-outside:none;shape-margin:0;}}

/* ======================
   Contact list
   ====================== */
.contact-box{text-align:center;}
.contact-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;}
.contact-list li{display:flex;justify-content:center;align-items:baseline;gap:8px;line-height:1.35;}
.contact-list .label{font:11px 'Roboto Mono',monospace;letter-spacing:.6px;text-transform:uppercase;color:#666;}
.contact-box a{border-bottom:1px solid var(--accent);text-decoration:none;}
.contact-box a:hover{color:var(--accent);}
.box+.feature-column,.box+section{border-top:none!important;}
@media(max-width:700px){.contact-list{gap:10px;}}

/* ======================
   Article typography
   ====================== */
article{border-top:1px solid var(--rule);padding-top:10px;}
article h2{font-family:'Playfair Display',serif;font-size:clamp(18px,2.2vw,24px);line-height:1.2;margin:.3em 0;}
.kicker{font:11px 'Roboto Mono',monospace;color:#666;letter-spacing:.6px;text-transform:uppercase;margin-bottom:.25em;}
.by{font:11px 'Roboto Mono',monospace;color:#666;margin-bottom:.35em;}
article p{text-align:justify;margin:.55em 0;}
article p:first-of-type::first-letter{float:left;font-family:'Playfair Display',serif;font-size:2.6em;line-height:1;padding-right:.2em;}
#about.feature-column article p:first-of-type::first-letter{float:none;font-size:inherit;line-height:inherit;padding:0;}
.dropcap{float:left;font-family:'Playfair Display',serif;font-size:3.2em;line-height:1;margin:.05em .12em 0 0;color:var(--ink);}

/* ======================
   Skill pills
   ====================== */
.skill-pill{display:inline-block;margin:.2em .35em 0 0;padding:.18em .5em;border:1px solid var(--rule);border-radius:12px;font-size:.78rem;background:rgba(255,255,255,.4);}

/* =========================
   Experience cards / band
   ========================= */
.feature-column>h2,.exp-section>h2{font-family:'Playfair Display',serif;font-size:clamp(18px,2.2vw,24px);line-height:1.2;font-weight:700;color:var(--ink);margin:.3em 0;}
.exp-card{border-top:none;padding-top:0;}
.exp-card .kicker{display:none;}

/* --- Two-line Experience Title --- */
.exp-card h3{line-height:1.25;margin-bottom:.4em;}
.exp-card .exp-company{display:block;font-family:'Playfair Display',serif;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.exp-card .exp-title{display:block;font-family:'Playfair Display',serif;font-weight:600;font-style:italic;color:#222;margin-top:2px;}

.exp-meta{font:12px 'Roboto Mono',monospace;color:#666;margin-bottom:.6em;}
.exp-subhed{font-family:'Playfair Display',serif;font-weight:700;font-size:15px;margin:.6em 0 .25em;text-transform:uppercase;letter-spacing:.4px;}
.exp-card p{margin:.45em 0;text-align:justify;}
.exp-list{margin:.35em 0 .5em 1.1em;padding:0;}
.exp-list li{margin:.25em 0;}
.tech-pills{margin-top:.3em;}
.tech-pills .skill-pill{margin-bottom:.35em;}
.fancy-byline{font:12px 'Roboto Mono',monospace;color:#666;margin-bottom:.6em;letter-spacing:.3px;text-align:left;}
.italic-head{font-family:'Playfair Display',serif;font-style:italic!important;font-weight:600;font-size:1.15rem;color:#444;letter-spacing:.2px;margin:.2em 0 .4em;text-align:left;}

/* ======================
   Certifications Ribbon
   ====================== */
.certs-band{grid-column:1/7;margin-top:24px;padding-top:14px;border-top:1px solid var(--rule);}
.certs-band ul{list-style:none;margin:0;padding:0;}
.ribbon{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:transparent;border:1px solid var(--rule);padding:12px 8px 16px;cursor:grab;touch-action:pan-x;}
.ribbon::-webkit-scrollbar{display:none;}
.ribbon-track{display:flex;align-items:center;gap:var(--gap,48px);padding:10px 16px;width:max-content;}
.ribbon-track li{flex:0 0 var(--badgeWidth,240px);display:flex;align-items:center;justify-content:center;transition:transform .12s ease;}
.ribbon-track img{height:136px;opacity:.95;filter:grayscale(100%) contrast(1.15) brightness(.92);transition:filter .25s ease,opacity .25s ease;}
.ribbon-track li:hover img{opacity:1;filter:none;}

/* ======================
   Contact & Links Band
   ====================== */
.contact-band{grid-column:1/7;margin-top:28px;padding:18px 0 20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:transparent;}
.contact-band .band-title{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(18px,2.2vw,24px);line-height:1.2;color:var(--ink);text-align:center;margin-bottom:16px;}
.contact-grid--2col{display:grid;grid-template-columns:1fr 2fr;gap:var(--gutter);align-items:start;}
.contact-left{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;}
.contact-item h3{font:12px 'Roboto Mono',monospace;letter-spacing:.6px;text-transform:uppercase;color:#666;margin-bottom:8px;text-align:center;}
.contact-item ul{list-style:none;padding:0;margin:0;text-align:center;}
.contact-item ul li{margin:6px 0;}
.contact-item a{text-decoration:none;font-family:'Playfair Display',serif;font-size:15px;color:var(--ink);border-bottom:1px solid transparent;transition:all .2s ease;}
.contact-item a:hover{border-bottom-color:var(--accent);color:var(--accent);}
.contact-right .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.contact-right .contact-form input[type="text"],
.contact-right .contact-form input[type="email"],
.contact-right .contact-form textarea{border:1px solid var(--rule);background:rgba(255,255,255,.4);padding:8px 10px;font:13px 'Roboto Mono',monospace;}
.contact-right .contact-form textarea{grid-column:1/-1;resize:vertical;min-height:120px;}
.contact-right .contact-form button{grid-column:1/-1;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:8px 10px;font:12px 'Roboto Mono',monospace;letter-spacing:.5px;cursor:pointer;text-transform:uppercase;transition:all .2s ease;}
.contact-right .contact-form button:hover{background:var(--accent);border-color:var(--accent);}
@media(max-width:900px){.contact-grid--2col{grid-template-columns:1fr;gap:22px}.contact-right .contact-form{grid-template-columns:1fr}}