/* ayushsrivastava.co.in: home page and entry notice.
   Layout: a 1200px editorial column on ivory; hero in two columns (text 1.12fr, portrait 0.88fr),
   then the contract life cycle and the qualifications, each opened by a brass hairline. */

/* Fonts: self-hosted, SIL Open Font License (licences in /fonts/).
   AS Serif is a Latin subset of Adobe's Source Serif 4, renamed as the licence requires. */
@font-face{font-family:"AS Serif";src:url("../fonts/as-serif-latin-roman.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"AS Serif";src:url("../fonts/as-serif-latin-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* One light theme by design: every colour is set here. */
:root{
  color-scheme:light;
  --ivory:#FAF6EE;
  --navy:#132640;
  --slate:#1A2634;
  --espresso:#30261C;
  --forest:#1A3828;
  --bronze:#8C6534;
  --sage:#627066;
  --brass:#A48242;
  --hair:rgba(164,130,66,.38);
  --photo:#22252A;
  --paper:#FFFDF8;
  --oxblood:#481C22;
  --oxblood-hover:#5C2830;
  --sand:#F4ECDF;
  --keyline:#CDBC9E;
  --rule:#E0D4BF;
  --ink:#36404B;
  --grey:#5E6773;
  --ornament:#BBA88A;
  --overlay:rgba(32,12,15,.6);
  --serif:"AS Serif","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --garamond:"EB Garamond",Garamond,Georgia,serif;
}

[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--slate);font-family:var(--sans);font-size:17px;line-height:1.7}
img{max-width:100%}
a{color:var(--bronze)}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--bronze);outline-offset:3px}
a:focus-visible{border-radius:2px}
main:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:20;padding:10px 16px;border-radius:4px;background:var(--navy);color:var(--ivory);font-weight:500;line-height:1.3;text-decoration:none}
.skip-link:hover{color:var(--ivory)}
.skip-link:focus{top:12px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
.first{color:var(--bronze)}
.last{color:var(--navy)}

/* Header */
.site-header{border-bottom:1px solid var(--hair)}
.header-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:24px;min-height:84px}
.site-name{display:inline-block;padding:10px 0;font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:24px;line-height:1.2;text-decoration:none}
.menu-btn{display:none}
.menu{display:flex;gap:30px;margin:0;padding:0;list-style:none}
.menu a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:15px;line-height:1.3;color:var(--slate);text-decoration:none;text-underline-offset:9px}
.menu a:hover{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--brass)}
.menu a[aria-current="page"]{color:var(--navy);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--brass)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-rows:repeat(6,auto) 1fr;column-gap:clamp(48px,6vw,96px);padding-block:clamp(44px,4.6vw,64px) clamp(64px,8vw,112px)}
.hero>*{grid-column:1;min-width:0}
.role-wrap{overflow:hidden}
.role{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;margin:0 0 0 -29px;padding:0;list-style:none;font-weight:500;font-size:15px;line-height:1.5;color:var(--forest)}
.role li{display:flex;align-items:center}
.role li::before{content:"";flex:none;width:5px;height:5px;margin:0 12px;border-radius:50%;background:var(--brass)}
.sectors{max-width:66ch;margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--sage);text-wrap:balance}
.hero-title{margin:clamp(28px,3.6vw,44px) 0 clamp(24px,2.8vw,34px);font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(40px,4.5vw,64px);line-height:1.04;letter-spacing:-.018em;color:var(--navy)}
.contract{display:block;text-transform:uppercase;font-weight:640;letter-spacing:.035em;text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:.075em;text-underline-offset:.17em;text-decoration-skip-ink:none}
.portrait{grid-column:2;grid-row:1/-1;align-self:start;justify-self:end;position:sticky;top:40px;width:100%;max-width:470px;margin-top:8px}
.portrait::before{content:"";position:absolute;inset:-14px;pointer-events:none;background:
  linear-gradient(var(--brass),var(--brass)) left top/30px 1.5px no-repeat,
  linear-gradient(var(--brass),var(--brass)) left top/1.5px 30px no-repeat,
  linear-gradient(var(--brass),var(--brass)) right top/30px 1.5px no-repeat,
  linear-gradient(var(--brass),var(--brass)) right top/1.5px 30px no-repeat,
  linear-gradient(var(--brass),var(--brass)) left bottom/30px 1.5px no-repeat,
  linear-gradient(var(--brass),var(--brass)) left bottom/1.5px 30px no-repeat,
  linear-gradient(var(--brass),var(--brass)) right bottom/30px 1.5px no-repeat,
  linear-gradient(var(--brass),var(--brass)) right bottom/1.5px 30px no-repeat}
.portrait picture{display:block}
.photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:var(--photo)}
.lead{max-width:35em;margin:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:var(--espresso);text-wrap:pretty}
.intro{max-width:40em;margin:20px 0 0;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:132px;padding:14px 28px;border:1.5px solid var(--navy);border-radius:4px;font-weight:500;font-size:16px;line-height:1.2;text-decoration:none;transition:background-color 150ms,border-color 150ms,color 150ms}
.btn-primary{background:var(--navy);color:var(--ivory)}
.btn-primary:hover{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
.btn-secondary{background:transparent;color:var(--navy)}
.btn-secondary:hover{background:rgba(19,38,64,.06);color:var(--navy)}
.btn-pending{background:transparent;border-color:var(--hair);color:var(--sage);cursor:default} /* a label in place of a link that does not exist yet */

/* Sections */
.band{border-top:1px solid var(--hair)}
.life-title,.quals-title{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:500;color:var(--navy);text-wrap:balance}
.life{padding-block:clamp(64px,8vw,104px)}
.life-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;align-items:end;margin-bottom:52px}
.life-title{font-size:clamp(30px,3vw,40px);line-height:1.15}
.section-intro{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-style:italic;font-size:19px;line-height:1.5;color:var(--sage)}
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.stages li{position:relative;padding-top:30px;border-top:1.5px solid var(--brass)}
.stages li::before{content:"";position:absolute;left:0;top:-5.75px;width:10px;height:10px;background:var(--navy)}
.stages h3{margin:0 0 10px;font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:22px;line-height:1.25;color:var(--navy)}
.stages p{margin:0;font-size:16px;line-height:1.65}
.quals{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:72px;padding-block:clamp(56px,7vw,96px)}
.quals-title{font-size:clamp(28px,2.6vw,36px);line-height:1.2}
.quals-note{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--sage)}
.qual-list{margin:0;border-top:1px solid var(--hair)}
.qual-row{display:grid;grid-template-columns:184px minmax(0,1fr);align-items:baseline;padding-block:16px;border-bottom:1px solid var(--hair)}
.qual-row dt{font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:18px;line-height:1.6;color:var(--bronze)}
.qual-row dd{margin:0}

/* Footer */
.footer-inner{padding-top:56px;border-top:1px solid var(--brass);font-size:15px;line-height:1.6}
.footer-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.footer-id p{margin:0}
.footer-id .footer-name{margin-bottom:10px;font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:20px;line-height:1.3}
.footer-id .footer-place{margin-top:6px;color:var(--sage)}
.footer-label{margin:0 0 14px;font-weight:600;font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--sage)}
.footer-links{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.footer-links a{color:var(--slate);text-decoration:none}
.email-text{-webkit-user-select:all;user-select:all}
.footer-links .email-text,.dc-text .email-text,.full-body .email-text{white-space:nowrap}
.footer-links a:hover{color:var(--navy);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:4px}
.footer-base{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-block:20px 32px;border-top:1px solid var(--hair);font-size:13px;line-height:1.5;color:var(--sage)}
.footer-base p{margin:0}
.footer-base a{color:var(--sage);text-decoration:underline;text-underline-offset:3px}
.footer-base a:hover{color:var(--navy)}
.footer-links a[aria-current="page"]{color:var(--navy);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:4px}

/* Inner pages (About, Experience): below the opening, one two-column grid (192px labels, a reading column of 36em) */
:root{--label-col:192px;--grid-gap:clamp(32px,4vw,56px)}
.opening{padding-block:clamp(48px,5vw,72px) clamp(56px,7vw,88px)}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-weight:500;font-size:15px;line-height:1.5;color:var(--forest)}
.eyebrow::before{content:"";flex:none;width:28px;height:1.5px;background:var(--brass)}
.page-title{max-width:14em;margin:clamp(18px,2.2vw,26px) 0 0;font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(36px,3.6vw,48px);line-height:1.06;letter-spacing:-.017em;color:var(--navy);text-wrap:balance}
.title-mark{white-space:nowrap;text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:.07em;text-underline-offset:.16em;text-decoration-skip-ink:none}
.page-title+.lead{margin-top:clamp(22px,2.6vw,30px)}
.about-lead{max-width:34em}
.small-head{margin:0;font-weight:600;font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--sage)}
.glance{margin-top:clamp(40px,5vw,56px)}
.glance-list{max-width:calc(var(--label-col) + var(--grid-gap) + 36em);margin:12px 0 0;border-bottom:1px solid var(--hair)}
.glance-row,.entry,.education,.xp-role,.xp-projects,.cr-group{display:grid;grid-template-columns:var(--label-col) minmax(0,36em);column-gap:var(--grid-gap)}
.glance-row{align-items:baseline;padding-block:13px;border-top:1px solid var(--hair)}
.glance-row dt{font-weight:600;font-size:14px;line-height:1.6;color:var(--bronze)}
.glance-row dd{margin:0;font-size:16px;line-height:1.6}
.story{padding-block:clamp(56px,7vw,96px)}
.entry{align-items:start}
.entry+.entry{margin-top:30px}
.entry h3{margin:0;padding-top:3px;font-weight:600;font-size:14px;line-height:1.6;color:var(--bronze)}
.entry p{margin:0;line-height:1.75}
.entry cite{font-family:var(--serif);font-optical-sizing:auto;font-style:italic;font-size:1.05em}
.education{align-items:start;padding-block:clamp(56px,7vw,96px)}
.section-title{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(24px,2.1vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.edu-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.edu-list li{padding-block:18px;border-bottom:1px solid var(--hair)}
.edu-list p{margin:0;text-wrap:pretty}
.edu-list .degree{font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:19px;line-height:1.35;color:var(--navy)}
.edu-list .institution{margin-top:4px;font-size:15px;line-height:1.5}

/* Experience page */
.opening-short{padding-bottom:clamp(44px,5.5vw,72px)}
.xp-roles-band{padding-block:clamp(48px,6vw,80px) clamp(56px,7vw,96px)}
.xp-roles{max-width:calc(var(--label-col) + var(--grid-gap) + 36em);margin:0;padding:0;list-style:none}
.xp-role{align-items:start}
.xp-role+.xp-role{margin-top:clamp(32px,3.6vw,44px);padding-top:clamp(32px,3.6vw,44px);border-top:1px solid var(--hair)}
.xp-role>*{grid-column:2;min-width:0}
.xp-role>.xp-meta{grid-column:1;grid-row:1/span 4;padding-top:5px}
.xp-side,.xp-dates{margin:0;font-size:14px;line-height:1.5}
.xp-side{font-weight:600;color:var(--bronze)}
.xp-dates{margin-top:3px;color:var(--sage);font-variant-numeric:tabular-nums;white-space:nowrap}
.xp-org{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:clamp(21px,1.8vw,24px);line-height:1.25;letter-spacing:-.005em;color:var(--navy)}
.xp-job{margin:6px 0 0;font-weight:500;font-size:16px;line-height:1.5;color:var(--forest)}
.xp-focus{margin:14px 0 0;font-family:var(--serif);font-optical-sizing:auto;font-style:italic;font-weight:400;font-size:18px;line-height:1.5;color:var(--espresso)}
.xp-desc{margin:10px 0 0;line-height:1.75}
.xp-projects{align-items:start;padding-block:clamp(56px,7vw,96px)}
.xp-project-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.xp-project{padding:18px 0 20px;border-bottom:1px solid var(--hair)}
.xp-project h3{margin:0;font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:19px;line-height:1.35;color:var(--navy)}
.xp-details{margin:8px 0 0}
.xp-detail{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:16px;align-items:baseline}
.xp-detail+.xp-detail{margin-top:4px}
.xp-detail dt{font-weight:600;font-size:13px;line-height:1.55;color:var(--bronze)}
.xp-detail dd{margin:0;font-size:15px;line-height:1.55}
.page-note{font-size:14px;line-height:1.65;color:var(--sage)}
.page-note a{color:var(--sage);text-decoration:underline;text-underline-offset:3px}
.page-note a:hover{color:var(--navy)}
.xp-note,.cr-note{margin:28px 0 0}

/* Credentials & Recognition page */
.cr-register{padding-block:clamp(56px,7vw,96px)}
.cr-group{align-items:start}
.cr-group+.cr-group{margin-top:clamp(56px,7vw,88px)}
.cr-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.cr-entry{padding:18px 0 20px;border-bottom:1px solid var(--hair)}
.cr-entry p{margin:0}
.cr-entry .cr-name{font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:19px;line-height:1.35;color:var(--navy)}
.cr-entry .cr-issuer{margin-top:5px;font-size:15px;line-height:1.55}
.cr-entry .cr-detail{margin-top:5px;font-size:14px;line-height:1.6;color:var(--sage)}

/* Writing page */
.opening-tight{padding-bottom:clamp(40px,5vw,64px)}
.panel{padding:clamp(28px,4.2vw,60px);border:1px solid var(--hair);border-top:3px solid var(--brass);border-radius:2px;background:var(--paper)}
.wr-book{padding-bottom:clamp(56px,7vw,88px)}
.book{--cover-w:172px;display:grid;grid-template-columns:var(--cover-w) minmax(0,1fr) minmax(0,1.8fr);grid-template-rows:auto 1fr;grid-template-areas:"cover details desc" "cover action desc";column-gap:clamp(32px,3.6vw,52px);align-items:start}
.book-cover{grid-area:cover}
.book-cover img{display:block;width:100%;height:auto;aspect-ratio:2/3;border-radius:2px;box-shadow:0 1px 2px rgba(19,38,64,.12),0 10px 24px -8px rgba(19,38,64,.28)}
.book-details{grid-area:details}
.book-desc{grid-area:desc;padding-top:4px}
.book-action{grid-area:action;margin-top:28px}
.book-kicker{margin:0;font-weight:600;font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--sage)}
.book-title{margin:14px 0 0;font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:clamp(28px,2.9vw,40px);line-height:1.1;letter-spacing:-.012em;color:var(--navy);text-wrap:balance}
.book-subtitle{max-width:22em;margin:14px 0 0;font-family:var(--serif);font-optical-sizing:auto;font-style:italic;font-weight:400;font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:var(--espresso);text-wrap:pretty}
.book-byline{max-width:22em;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:15px;line-height:1.5;color:var(--sage)}
.book-desc p{max-width:34em;margin:0;line-height:1.75}
.book-desc p+p{margin-top:14px}
.wr-more{padding-bottom:clamp(56px,7vw,96px)}
.wr-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,72px);align-items:start}
.rule-title{padding-top:22px;border-top:1.5px solid var(--brass)}
.wr-blog p{max-width:30em;margin:12px 0 0;line-height:1.7}
.blog-action{margin-top:24px}
.articles{margin:10px 0 0;padding:0;list-style:none}
.articles li{border-bottom:1px solid var(--hair)}
.article-link{display:block;padding:14px 0 15px;font-family:var(--serif);font-optical-sizing:auto;font-weight:600;font-size:19px;line-height:1.35;color:var(--navy);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:5px;text-wrap:pretty;transition:text-decoration-color 150ms}
.article-link:hover{color:var(--navy);text-decoration-color:var(--brass)}
.wr-note{max-width:46em;margin:clamp(36px,4.5vw,52px) 0 0}

/* Contact page */
.ct-section{padding-bottom:clamp(56px,7vw,96px)}
.ct-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);align-items:start}
.ct-details{margin:0}
.ct-row{padding:16px 0 18px;border-bottom:1px solid var(--hair)}
.ct-row:first-child{padding-top:0}
.ct-row:last-child{padding-bottom:0;border-bottom:0}
.ct-row dt{font-weight:600;font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--sage)}
.ct-row dd{margin:6px 0 0}
.ct-link{font-family:var(--serif);font-optical-sizing:auto;font-weight:600;line-height:1.25;color:var(--navy);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color 150ms}
.ct-link:hover{color:var(--navy);text-decoration-color:var(--brass)}
.ct-row .ct-value{font-family:var(--serif);font-optical-sizing:auto;font-weight:600;line-height:1.25;color:var(--navy)}
.ct-row .ct-value:focus{outline:none}
.ct-big{font-size:clamp(22px,2.2vw,28px)}
.ct-mid{font-size:19px}
.ct-email{overflow-wrap:anywhere;scroll-margin-top:24px}
.ct-phone{white-space:nowrap}
.ct-row .ct-place{line-height:1.6}
.ct-text p{max-width:34em;margin:0;line-height:1.75}
.ct-text p+p{margin-top:14px}
.ct-text p a{color:var(--slate);text-decoration:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:3px}
.ct-text p a:hover{color:var(--slate);text-decoration-color:var(--brass)}
.ct-action{margin-top:28px}

/* Entry notice and full disclaimer box */
html.notice-open,html.notice-open body{overflow:hidden}
.notice-layer{position:fixed;inset:0;z-index:100;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));background:var(--overlay);animation:notice-in 180ms ease-out}
.notice-layer.is-full{padding:calc(32px + env(safe-area-inset-top,0px)) calc(32px + env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) calc(32px + env(safe-area-inset-left,0px))}
@keyframes notice-in{from{opacity:0}to{opacity:1}}
.notice-card{box-sizing:border-box;width:100%;max-width:560px;max-height:100%;display:flex;flex-direction:column;padding:8px;border-radius:8px;background:var(--sand)}
.notice-card--full{max-width:720px}
.notice-inner{box-sizing:border-box;min-height:0;display:flex;flex-direction:column;padding:34px 40px 30px;border:1px solid var(--keyline);border-radius:3px;font-family:var(--garamond);color:var(--ink)}
.notice-card--full .notice-inner{padding:0}
.notice-body{overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--keyline) transparent}
.notice-title{margin:0;text-align:center;font-weight:500;font-size:34px;line-height:1.15;color:var(--oxblood)}
.notice-layer .notice-title:focus{outline:none} /* the heading takes focus only so screen readers start there; it is not a control */
.ornament{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 18px}
.ornament span{width:36px;height:1px;background:var(--ornament)}
.ornament span:nth-child(2){width:6px;height:6px;background:var(--oxblood);transform:rotate(45deg)}
.notice-text{margin:0;font-size:20px;line-height:1.6;text-align:center;text-wrap:balance}
.notice-text .em{font-weight:500;color:var(--oxblood)}
.notice-actions{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.btn-agree{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding:12px 26px;border:0;border-radius:4px;background:var(--oxblood);color:var(--sand);font-family:var(--garamond);font-weight:500;font-size:18px;line-height:1.2;cursor:pointer}
.btn-agree:hover{background:var(--oxblood-hover)}
.link-full{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--oxblood);font-family:var(--garamond);font-size:18px;line-height:1.2;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;cursor:pointer}
.link-full:hover{text-decoration-thickness:2px}
.notice-layer :focus-visible{outline:3px solid var(--oxblood);outline-offset:3px}
.full-head{flex:none;padding:30px 56px 20px;text-align:center;border-bottom:1px solid var(--rule)}
.full-head .ornament{margin:12px 0 14px}
.full-date{margin:0;font-size:15px;line-height:1.5;color:var(--grey)}
.full-body{overflow-y:auto;min-height:0;padding:24px 56px;scrollbar-width:thin;scrollbar-color:var(--keyline) transparent}
.notice-layer .full-body:focus-visible{outline-offset:-3px}
.full-body h3{margin:1.5em 0 .45em;font-weight:500;font-size:19px;line-height:1.3;color:var(--oxblood)}
.full-body h3:first-child{margin-top:0}
.full-body p{margin:0 0 .85em;font-size:17px;line-height:1.75}
.full-body p:last-child{margin-bottom:0}
.full-body a{color:var(--oxblood);text-decoration-thickness:1px;text-underline-offset:.16em}
.full-body a:hover{color:var(--oxblood);text-decoration-thickness:2px}
.full-actions{flex:none;display:flex;justify-content:center;padding:18px 56px 22px;border-top:1px solid var(--rule)}

/* Disclaimer page: the notice's EB Garamond and oxblood, in one left-aligned column of about 68 characters */
.dc{max-width:27em;padding-block:clamp(48px,5vw,72px) clamp(56px,7vw,96px);font-family:var(--garamond);font-size:19px;line-height:1.7;color:var(--ink)}
.dc-title{margin:0;font-weight:500;font-size:40px;line-height:1.15;color:var(--oxblood)}
.dc-date{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--grey)}
.dc-text{margin-top:clamp(32px,4vw,44px)}
.dc-text h2{margin:1.8em 0 .5em;font-weight:500;font-size:22px;line-height:1.3;color:var(--oxblood)}
.dc-text h2:first-child{margin-top:0}
.dc-text p{margin:0 0 1em;text-wrap:pretty}
.dc-text p:last-child{margin-bottom:0}
.dc-text a{color:var(--oxblood);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.dc-text a:hover{color:var(--oxblood);text-decoration-thickness:2px}
.footer-base a[aria-current="page"]{color:var(--navy)}

/* 1180px and below: the book cover sits beside the details, with the description and button below */
@media (max-width:1180px){
  .book{--cover-w:160px;grid-template-columns:var(--cover-w) minmax(0,1fr);grid-template-rows:none;grid-template-areas:"cover details" "desc desc" "action action"}
  .book-desc{padding-top:0;margin-top:28px}
}

/* 960px and below */
@media (max-width:960px){
  .header-row{min-height:72px}
  .site-nav{flex-basis:100%}
  .menu{flex-direction:column;gap:0;padding-bottom:12px}
  .menu li+li{border-top:1px solid var(--hair)}
  .menu a{display:flex;min-height:0;padding-block:12px;text-underline-offset:6px}
  .js .menu-btn{display:inline-flex;align-items:center;padding:9px 14px;border:1.5px solid var(--navy);border-radius:4px;background:transparent;color:var(--navy);font-family:inherit;font-weight:500;font-size:15px;line-height:1.2;cursor:pointer}
  .js .site-nav{display:none}
  .js .site-nav.is-open{display:block}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .portrait{grid-column:1;grid-row:auto;justify-self:start;position:relative;top:auto;width:calc(100% - 28px);max-width:400px;margin:14px 14px 44px}
  .life-head{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quals{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-id{grid-column:1/-1}
  .glance-row,.entry,.education,.xp-role,.xp-projects,.cr-group{grid-template-columns:minmax(0,1fr)}
  .glance-row{row-gap:2px}
  .entry{row-gap:6px}
  .education,.xp-projects,.cr-group{row-gap:20px}
  .xp-role>*{grid-column:1}
  .xp-role>.xp-meta{grid-row:auto;order:-1;display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;margin-bottom:8px;padding-top:0}
  .wr-cols{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .ct-panel{grid-template-columns:minmax(0,1fr)}
  .ct-text{margin-top:32px;padding-top:28px;border-top:1px solid var(--hair)}
  .xp-dates{margin-top:0}
  .xp-dates::before{content:"";display:inline-block;width:4px;height:4px;margin-right:10px;border-radius:50%;background:var(--brass);vertical-align:middle;position:relative;top:-1px}
}

/* 600px and below */
@media (max-width:600px){
  body{font-size:16px}
  .role{margin:0;column-gap:18px}
  .role li::before{margin:0 8px 0 0}
  .hero-actions .btn{flex:1 1 140px}
  .stages{grid-template-columns:minmax(0,1fr)}
  .qual-row{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .footer-cols{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .footer-base{flex-direction:column;align-items:flex-start}
  .book{grid-template-columns:minmax(0,1fr);grid-template-areas:"cover" "details" "desc" "action"}
  .book-cover{width:144px;margin-bottom:24px}
  .notice-layer.is-full{padding:calc(10px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px))}
  .full-head{padding:22px 18px 14px}
  .full-body{padding:18px}
  .full-body p{font-size:16px;line-height:1.65}
  .full-actions{padding:14px 18px 18px}
  .full-actions .btn-agree{width:100%}
}

/* 480px and below: the short notice */
@media (max-width:480px){
  .notice-inner{padding:26px 18px 22px}
  .notice-actions{flex-direction:column;align-items:stretch;gap:4px}
  .link-full{justify-content:center}
  .xp-detail{grid-template-columns:minmax(0,1fr)}
  .book-action .btn,.blog-action .btn,.ct-action .btn{display:flex}
}

@media (prefers-reduced-motion:reduce){
  .notice-layer{animation:none}
  .btn,.article-link,.ct-link{transition:none}
}

@media print{
  body{background:#fff!important}
  body,body *{color:#000!important}
  .site-nav,.menu-btn,.hero-actions,.notice-layer,.skip-link,.btn{display:none!important}
  .panel{background:#fff!important}
  .portrait{position:static}
  .xp-role,.xp-project,.cr-entry{break-inside:avoid}
}