/* ==========================================================================
   Pritam Saha — s-pritam.github.io
   Self-hosted type; the only third-party request on the site is analytics.
   Newsreader & IBM Plex Mono are SIL Open Font License 1.1.
   ========================================================================== */

/* --- Fonts (latin subset, self-hosted) ---------------------------------- */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-400600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url('/assets/fonts/newsreader-400500-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --- Tokens -------------------------------------------------------------- */
:root{
  color-scheme: light;
  --bg:#fcfbf9;
  --bg-tint:#f3f1eb;
  --text:#1c1b18;
  --muted:#6d6960;
  --faint:#98938a;
  --rule:#e4e0d6;
  --rule-soft:#efece4;
  --accent:#9c3b24;
  --accent-ink:#8a3420;
  --accent-wash:rgba(156,59,36,.09);

  --serif:'Newsreader', ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --measure:40rem;   /* prose line length — past ~42rem lines get hard to track */
  --shell:71rem;
  --side:15.5rem;
  --gutter:clamp(1.25rem,.7rem + 2.6vw,2.75rem);
  --bar:3.75rem;
  --pad-top:clamp(1.75rem,1.2rem + 2vw,3rem);
  /* Where the sidebar pins. Identical to where it starts, so it does not
     drift upwards before sticking. The 1px is the top bar's bottom border,
     which counts towards the bar's real height. */
  --stick:calc(var(--bar) + var(--pad-top) + 1px);

  --step--1:clamp(.8125rem,.79rem + .11vw,.875rem);
  --step-0:clamp(1.0625rem,1.03rem + .17vw,1.15rem);
  --step-1:clamp(1.125rem,1.08rem + .22vw,1.25rem);
  --step-2:clamp(1.375rem,1.27rem + .5vw,1.65rem);
  --step-3:clamp(1.75rem,1.53rem + 1.05vw,2.4rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#141412;
  --bg-tint:#1e1e1a;
  --text:#e9e6de;
  --muted:#9d988d;
  --faint:#706b62;
  --rule:#2d2c28;
  --rule-soft:#242320;
  --accent:#e08a6b;
  --accent-ink:#eaa084;
  --accent-wash:rgba(224,138,107,.13);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#141412;
    --bg-tint:#1e1e1a;
    --text:#e9e6de;
    --muted:#9d988d;
    --faint:#706b62;
    --rule:#2d2c28;
    --rule-soft:#242320;
    --accent:#e08a6b;
    --accent-ink:#eaa084;
    --accent-wash:rgba(224,138,107,.13);
  }
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Reserve the scrollbar's space at all times. Without this the page shifts
     sideways between a page tall enough to scroll and one that is not —
     very visible now that navigation swaps content without a reload.
     The scrollbar stays usable; only the layout jump goes away. */
  scrollbar-gutter:stable;
  /* Make it unobtrusive rather than absent. */
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}
/* WebKit/Blink equivalent, for engines that ignore the two properties above. */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--rule);
  border:3px solid var(--bg);
  border-radius:11px;
}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2;letter-spacing:-.014em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--accent-wash);color:var(--text)}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

/* Body-copy links: underlined, accent on hover. */
.lnk,.prose a{
  color:var(--accent-ink);
  border-bottom:1px solid var(--accent-wash);
  transition:border-color .2s var(--ease);
}
.lnk:hover,.prose a:hover{border-bottom-color:var(--accent)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bg);color:var(--text);
  padding:.7rem 1.1rem;border:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--step--1);
}
.skip:focus{left:.75rem;top:.75rem}

/* --- Top bar ------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)){
  .topbar{
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter:saturate(1.6) blur(12px);
    backdrop-filter:saturate(1.6) blur(12px);
  }
}
.topbar__inner{
  display:flex;align-items:center;gap:1.1rem;
  min-height:var(--bar);
  max-width:var(--shell);margin-left:auto;margin-right:auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.wordmark{font-size:1.0625rem;font-weight:600;letter-spacing:-.012em;margin-right:auto;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(.85rem,.4rem + 1.5vw,1.6rem)}
.nav a{
  font-size:.9375rem;color:var(--muted);
  padding:.3rem 0;position:relative;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.05rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--text);font-weight:600}

/* --- Hamburger ----------------------------------------------------------- */
/* Only shown once JavaScript has run: without it the nav stays inline so the
   links are always reachable. */
.nav-toggle{display:none}
.nav-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-bars{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}

@media (max-width:55.99rem){
  .js .nav-toggle{
    display:flex;align-items:center;justify-content:center;flex:none;padding:0;
    appearance:none;-webkit-appearance:none;
    width:2.25rem;height:2.25rem;border-radius:4px;
    border:1px solid var(--rule);background:transparent;color:var(--text);
    cursor:pointer;
    transition:border-color .2s var(--ease),background-color .2s var(--ease);
  }
  .js .nav-toggle:hover{border-color:var(--faint);background:var(--bg-tint)}

  /* The nav becomes a panel dropping out of the bar. */
  .js .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--rule);
    padding:.25rem var(--gutter) .75rem;
    box-shadow:0 12px 24px -18px rgba(0,0,0,.5);
  }
  .js .topbar[data-nav="open"] .nav{display:flex;animation:navdrop .2s var(--ease)}
  .js .nav a{
    font-size:1rem;padding:.8rem .25rem;
    border-bottom:1px solid var(--rule-soft);
  }
  .js .nav a:last-child{border-bottom:0}
  .js .nav a::after{display:none}
  .js .nav a[aria-current="page"]{color:var(--accent-ink)}

  /* Without JavaScript there is no panel, so let the inline nav wrap onto its
     own line rather than overflow the bar. */
  html:not(.js) .topbar__inner{flex-wrap:wrap;padding-top:.6rem;padding-bottom:.6rem;min-height:0}
  html:not(.js) .wordmark{margin-right:auto}
  html:not(.js) .nav{width:100%;order:3;gap:1.1rem;margin-top:.5rem}
}
@keyframes navdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.theme-toggle{
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--rule);background:transparent;color:var(--muted);
  cursor:pointer;width:2rem;height:2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;padding:0;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.theme-toggle:hover{color:var(--text);border-color:var(--faint);background:var(--bg-tint)}
.theme-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:block}
}

/* --- Two-column shell ---------------------------------------------------- */
.layout{
  max-width:var(--shell);margin-left:auto;margin-right:auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
  padding-top:var(--pad-top);
  padding-bottom:3rem;
  display:grid;
  gap:clamp(1.75rem,1rem + 3vw,3.75rem);
}
@media (min-width:56rem){
  .layout{grid-template-columns:var(--side) minmax(0,1fr)}
}

/* --- Profile sidebar ----------------------------------------------------- */
.profile{min-width:0}
.profile__inner{min-width:0}
@media (min-width:56rem){
  /* The column stretches to the full height of the row so the sticky block
     inside it has somewhere to travel; pinning the grid item itself (with
     align-self:start) shrinks its containing block to its own height, which
     is what used to make the photo drift.
     Sticky rather than fixed: fixed never moves, so the footer slides
     underneath it at the bottom of every page. Sticky holds still through the
     content and steps aside exactly when the footer arrives. */
  .profile{align-self:stretch}
  .profile__inner{
    position:sticky;
    top:var(--stick);
    /* If the window is too short to hold the whole sidebar, scroll the
       sidebar itself rather than let it move with the page. */
    max-height:calc(100vh - var(--stick) - 1.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* A short page (the home bio) would otherwise leave the sidebar no room to
     stay pinned, so give the content column at least a screenful. */
  .content{min-height:calc(100vh - var(--bar) - var(--pad-top) - 2rem)}
}
.profile__photo{
  width:100%;max-width:var(--side);
  border:1px solid var(--rule);
}
/* Scale the portrait with window height so the whole sidebar stays visible on
   a short laptop screen. Must come after the rule above, which would otherwise
   win on source order and pin the width at --side. */
@media (min-width:56rem){
  .profile__photo{max-width:min(var(--side),24vh)}
}
.profile__name{font-size:1.25rem;margin-top:1rem;margin-bottom:0;letter-spacing:-.016em}
.profile__title{color:var(--text);font-size:var(--step--1);margin-top:.2rem;margin-bottom:0}
/* Stacked role lines read as one unit, so they sit tighter to each other
   than the pair does to the name above. */
.profile__title + .profile__title{margin-top:.1rem}
.profile__org{color:var(--muted);font-size:var(--step--1);margin-top:.9rem;line-height:1.45}
.profile__contact{
  margin-top:1rem;font-size:var(--step--1);color:var(--muted);line-height:1.5;
}
.profile__contact a{color:var(--accent-ink);border-bottom:1px solid var(--accent-wash)}
.profile__contact a:hover{border-bottom-color:var(--accent)}
.profile__contact .ico{margin-right:.4rem;color:var(--faint)}

/* Icons are normalised by height so mixed viewBox widths still line up. */
.ico{
  height:.95em;width:auto;
  fill:currentColor;flex:none;
  vertical-align:-.13em;
}

.profile__links{
  margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;
}
.profile__links a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid transparent;padding-bottom:.1rem;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.profile__links a .ico{height:1.05em;color:var(--faint);transition:color .2s var(--ease)}
.profile__links a:hover{color:var(--accent-ink)}
.profile__links a:hover .ico{color:var(--accent)}
.profile__links a:hover span{border-bottom:1px solid var(--accent)}
@media (min-width:56rem){
  /* Two columns rather than six stacked rows: it keeps the whole sidebar
     inside the window on a normal laptop, so nothing gets clipped. */
  .profile__links{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .75rem}
  /* A fixed icon column keeps the labels flush. */
  .profile__links a .ico{width:1.05em;height:1.05em}
}

/* Single-column screens: the profile centres under the bar, photo first, and
   folds away with the chevron. The folded state is scoped to .js because it
   ships in the HTML: without scripting the chevron cannot work, so the panel
   must stay open rather than hide the contact details for good. */
.profile__toggle{display:none}

@media (max-width:55.99rem){
  .profile{
    display:grid;
    grid-template-rows:1fr auto;   /* content, then the chevron */
    text-align:center;
    border-bottom:1px solid var(--rule);
    transition:grid-template-rows .38s var(--ease);
    /* Deliberately NOT sticky. Pinning the folded strip under the header
       keeps the chevron reachable, but a sticky element whose height is
       animated stops the page scrolling altogether in Chrome. The panel
       therefore stays in normal flow, and folds only when pressed. */
  }
  .profile__inner{
    overflow:hidden;
    min-height:0;                  /* lets the 1fr row collapse to nothing */
    padding-bottom:1.5rem;
    transition:opacity .28s var(--ease), padding-bottom .38s var(--ease), visibility 0s;
  }
  .js .profile[data-collapsed="true"]{grid-template-rows:0fr auto}
  .js .profile[data-collapsed="true"] .profile__inner{
    opacity:0;
    /* Padding survives a 0fr row, so it has to go too or the panel leaves a
       gap behind after folding. */
    padding-bottom:0;
    visibility:hidden;             /* also takes the links out of tab order */
    transition:opacity .22s var(--ease), padding-bottom .38s var(--ease), visibility 0s .38s;
  }

  .profile__photo{
    max-width:11.5rem;
    margin-left:auto;margin-right:auto;
  }
  .profile__name{font-size:1.5rem;margin-top:1.1rem}
  .profile__contact{margin-top:.85rem}
  .profile__links{justify-content:center;margin-top:1.25rem;padding-top:1rem}

  .profile__toggle{
    display:flex;align-items:center;justify-content:center;
    appearance:none;-webkit-appearance:none;
    margin:0 auto;padding:0;
    width:3rem;height:1.5rem;
    border:1px solid var(--rule);
    border-radius:999px;
    background:var(--bg);
    color:var(--muted);
    cursor:pointer;
    transform:translateY(50%);     /* straddles the panel's bottom rule */
    transition:color .2s var(--ease),border-color .2s var(--ease);
  }
  .profile__toggle:hover{color:var(--text);border-color:var(--faint)}
  .profile__toggle svg{
    width:15px;height:15px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .38s var(--ease);
  }
  .js .profile[data-collapsed="true"] .profile__toggle svg{transform:rotate(180deg)}

  /* The layout gap would leave a hole above the content when folded. */
  .layout{transition:gap .38s var(--ease)}
  .js .layout:has(.profile[data-collapsed="true"]){gap:1.5rem}
}

/* --- Content ------------------------------------------------------------- */
.content{min-width:0}
.page-h{font-size:var(--step-3);letter-spacing:-.026em;margin-bottom:1rem}
.lede{font-size:var(--step-1);line-height:1.5;max-width:var(--measure);margin-bottom:1.5rem}
.prose{max-width:var(--measure)}
.prose p{margin-bottom:1em}

/* Soft navigation: cross-fade the content where the browser supports view
   transitions, and never animate the sidebar or bar (they do not change). */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:.18s}
}
/* A faint dim while the next page is being fetched — only visible if the
   request is slow enough to notice. */
:root[data-loading="true"] .content{opacity:.55;transition:opacity .2s .1s var(--ease)}


/* --- Section groups ------------------------------------------------------ */
.group{margin-top:2.5rem}
.group:first-child{margin-top:0}
.group__title{
  font-size:var(--step-2);letter-spacing:-.018em;
  padding-bottom:.5rem;border-bottom:1px solid var(--rule);
  margin-bottom:.35rem;
}

/* --- Papers -------------------------------------------------------------- */
.paper{border-bottom:1px solid var(--rule-soft);padding:1.1rem 0}
.paper:last-child{border-bottom:0}
.paper__title{font-size:var(--step-1);line-height:1.35;font-weight:600;margin-bottom:.25rem}
.paper__meta{color:var(--muted);font-size:var(--step--1);line-height:1.5}
.paper__meta em{font-style:italic}
.paper__venue{color:var(--text)}
.paper__links{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.5rem}
.paper__links a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:.12rem;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.paper__links a .ico{height:.8em}
.paper__links a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* Status label, e.g. an ongoing project or a revise-and-resubmit. */
.tag{
  display:inline-block;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-wash);
  padding:.2rem .5rem;border-radius:2px;margin-top:.5rem;
}

/* Expandable abstract — pure <details>, no JavaScript. */
.paper details{margin-top:.5rem}
.paper summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.paper summary::-webkit-details-marker{display:none}
.paper summary::before{
  content:"";width:0;height:0;flex:none;
  border-left:5px solid currentColor;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  transition:transform .22s var(--ease);
}
.paper details[open] summary::before{transform:rotate(90deg)}
.paper summary:hover{color:var(--accent-ink)}
.paper__abstract{
  margin-top:.6rem;padding-left:.95rem;
  border-left:2px solid var(--rule);
  color:var(--muted);font-size:var(--step--1);line-height:1.6;
  max-width:var(--measure);
}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--text);color:var(--bg);
  border:1px solid var(--text);border-radius:999px;
  padding:.55rem 1.05rem;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* --- Embedded PDF -------------------------------------------------------- */
/* The inline frame is for wide screens only. Phones get the card instead:
   mobile browsers either refuse to render a PDF in an <object> or show a
   single unscrollable page, which is worse than a plain link. */
.pdfbox{
  display:none;margin-top:.9rem;
  border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;               /* clips the viewer's own dark edge */
  background:var(--bg-tint);
}
.pdfbox__doc{
  display:block;width:100%;height:min(88vh,62rem);
  border:0;
}

/* `#toolbar=0` hides Chromium's own PDF toolbar — which is what removes its
   Save-to-Drive, download and print buttons — so the page offers a way out to
   the file itself. Download stays available from the line above the frame. */
.pdfbar{display:none;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
@media (min-width:56rem){.pdfbar{display:flex}}
:root[data-nopdf="true"] .pdfbar{display:none}
.pdfbar__btn{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--rule);border-radius:999px;
  padding:.42rem .9rem;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.pdfbar__btn:hover{color:var(--text);border-color:var(--faint);background:var(--bg-tint)}
.pdfbox__fallback{
  height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;text-align:center;padding:2rem;color:var(--muted);
}
.pdfbox__small{margin-top:1.75rem;color:var(--muted)}
.pdfbox__small p{margin-bottom:.9rem}

@media (min-width:56rem){
  .pdfbox{display:block}
  .pdfbox__small{display:none}
}
/* Browsers that report no inline PDF support get the card at any width. */
:root[data-nopdf="true"] .pdfbox{display:none}
:root[data-nopdf="true"] .pdfbox__small{display:block}

/* --- Definition rows (fields, courses, CV) ------------------------------- */
.rows{display:grid;gap:0}
.row{
  display:grid;gap:.1rem .5rem;
  padding:.75rem 0;border-bottom:1px solid var(--rule-soft);
}
.row:last-child{border-bottom:0}
@media (min-width:34rem){
  .row{grid-template-columns:8.5rem minmax(0,1fr);gap:.1rem 1.5rem}
}
.row__k{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);padding-top:.3rem;
}
.row__v{min-width:0;max-width:var(--measure)}
.row__v strong{font-weight:600}
.row__sub{display:block;color:var(--muted);font-size:var(--step--1);margin-top:.1rem}

/* --- Footer -------------------------------------------------------------- */
.footer{border-top:1px solid var(--rule);margin-top:1rem}
.footer__inner{
  max-width:var(--shell);margin-left:auto;margin-right:auto;
  padding:1.5rem var(--gutter) 2.5rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;
  color:var(--faint);font-size:var(--step--1);
}
.footer a{color:var(--muted);border-bottom:1px solid transparent}
.footer a:hover{border-bottom-color:var(--rule)}

/* --- Print --------------------------------------------------------------- */
@media print{
  :root{--bg:#fff;--text:#000;--muted:#333;--faint:#555;--rule:#ccc;--rule-soft:#ddd;--accent:#000;--accent-ink:#000;--accent-wash:transparent}
  .topbar,.footer,.theme-toggle,.profile__links,.skip,
  .pdfbox,.pdfbox__small,.profile__toggle{display:none !important}
  html{scrollbar-gutter:auto}
  body{font-size:10.5pt;line-height:1.4}
  .layout{display:block;padding-top:0}
  .profile{display:block;border:0;margin-bottom:1.25rem}
  .profile__photo{display:none}
  /* A4 is about 794px, which is under the mobile breakpoint, so the folded
     panel's rules apply when printing. Force it open or the contact details
     print as blank space. */
  .profile__inner{
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    max-height:none !important;
    padding-bottom:0 !important;
  }
  .paper,.row{break-inside:avoid;page-break-inside:avoid}
  .paper details{display:none}
  a{border:0 !important}
}