/* ==========================================================================
   KRIANSH POKHAREL - PORTFOLIO STYLESHEET
   ==========================================================================

   This file is organised in the same order as index.html so the two are easy
   to follow side by side:

     1. Design tokens (colours, fonts, spacing)  - the "variables"
     2. Reset and base elements
     3. Small reusable helpers (skip link, section heads)
     4. Header / sticky navigation
     5. Hero card + avatar ring
     6. The section switcher (tabs without JavaScript)
     7. Content pieces (entries, rows, chips, badges, buttons)
     8. Footer
     9. Responsive tweaks for phones and tablets
    10. Print styles (Ctrl+P produces a clean one-page CV)
    11. Respect for "reduce motion" accessibility settings

   No frameworks are used. Everything below is hand-written CSS.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ==========================================================================
   A "token" is just a name for a value. Writing --body-text once at the top
   means we can change the whole colour scheme by editing a single line.
*/
:root {
  /* ---- Colours ---- */
  --bg: #ffffff;              /* page background - pure white          */
  --heading: #020919;          /* headings - almost black with a blue tint */
  --body-text: #6c727e;        /* normal paragraph text - soft grey       */
  --muted: #9198a1;            /* dates, captions - lighter grey          */
  --border: #e4e6ea;           /* the hairline border used on cards      */
  --surface: #f6f8fa;          /* very light grey, used for badges        */

  /* The chip is the dark pill used for skills. */
  --chip-bg: rgba(15, 24, 43, 0.8);
  --chip-text: #f5f9ff;
  --chip-border: rgba(0, 0, 0, 0.06);

  /* The four colours of the slowly spinning ring around the avatar. */
  --ring-blue: #4285f4;
  --ring-red: #ea4335;
  --ring-yellow: #fbbc05;
  --ring-green: #34a853;

  /* ---- Fonts ---- */
  /* JetBrains Mono is the characterful one, used for headings and chips.
     The second value is what the browser uses if JetBrains Mono is not
     available - i.e. the monospace font already installed on the machine. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  /* Body text uses the clean system font of whichever device is viewing. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* ---- Text sizes ----
     The whole type scale lives in this list. Every heading and paragraph
     further down the file uses one of these instead of typing a raw number,
     so the page can be re-sized from this one place.

     "rem" means "relative to the base font size set on html above", so 1rem
     is the normal reading size and 1.8rem is a big heading. */
  --text-h1: 1.8rem;           /* the big name at the top of the page      */
  --text-h2: 1.35rem;          /* section titles                           */
  --text-h3: 1.1rem;           /* project / job / school names             */
  --text-body: 1rem;           /* normal reading text                      */
  --text-small: 0.9rem;        /* dates, captions, buttons                 */
  --text-chip: 0.85rem;        /* the dark little skill pills              */

  /* ---- Shape and size ---- */
  --radius: 0.5rem;            /* rounded corners on cards                */
  --radius-sm: 4px;            /* rounded corners on the small chips      */
  --page-width: 992px;         /* widest the content column gets           */
  --nav-width: 992px;          /* the nav lines up with the card edges     */
  --nav-height: 60px;          /* height of the sticky navigation bar     */
  --avatar-size: 220px;        /* diameter of the round photo, incl. ring */
}


/* ==========================================================================
   2. RESET AND BASE ELEMENTS
   ==========================================================================*/

*,
*::before,
*::after {
  /* Include a pseudo-element's margin and padding when you calculate spacing
     on its parent. This fixes a surprising number of layout bugs. */
  box-sizing: border-box;
}

html {
  /* Clicking an anchor link (#about) should not hide the section underneath
     the sticky navigation bar. 96px clears the nav bar plus a little air. */
  scroll-padding-top: 96px;
  /* Makes the page jump to anchors instantly instead of scrolling slowly. */
  scroll-behavior: smooth;

  /* THE BASE FONT SIZE - the single knob that scales the whole page.
     Every other size in this file is written in "rem", which means "relative
     to this number". So changing this one value here makes all the text and
     spacing on the page bigger or smaller together.

     It is a percentage, not a pixel value, so it still follows the font-size
     the reader has chosen in their own browser settings. */
  font-size: 106.25%; /* 17px on a browser whose default is 16px */
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--body-text);
  font-family: var(--font-sans);
  font-size: 1rem; /* follows the html font-size above */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Break long words (URLs, project names) instead of letting them push the
     layout sideways on a narrow screen. */
  overflow-wrap: break-word;
}

/* Headings get the monospace face and the near-black colour. This one rule
   styles every h1, h2 and h3 on the page. */
h1,
h2,
h3 {
  font-family: var(--font-mono);
  color: var(--heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  /* Stops very long single words from overflowing on a small screen. */
  overflow-wrap: break-word;
}

/* The heading sizes. Keep these numbers fairly close together - the whole
   page is styled to feel calm and minimal, so a huge h1 would fight it. */
h1 {
  font-size: var(--text-h1);
}
h2 {
  font-size: var(--text-h2);
}
h3 {
  font-size: var(--text-h3);
}

p {
  margin: 0;
}

/* The browser underlines links and colours them bright blue by default.
   We replace that with our own quiet style. */
a {
  color: var(--heading);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

a:hover,
a:focus-visible {
  color: var(--ring-blue);
  text-decoration: underline;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Give keyboard users a clear focus ring, but only when they use the
   keyboard - never a permanent outline on top of a mouse click. */
:focus-visible {
  outline: 2px solid var(--ring-blue);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ==========================================================================
   3. SMALL REUSABLE HELPERS
   ==========================================================================*/

/* Keyboard-only link that lets people jump past the navigation bar. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--chip-bg);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.skip-link:focus {
  left: 0;
}

/* "Screen reader only" text.
   This element is hidden on screen but still read out loud by screen readers,
   so you can give an icon-only control like the burger button a proper name. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The narrow column that holds all of the page content. */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* One block of content inside a panel: a title plus whatever comes next. */
.section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Small wrapper used when a section needs a subtitle under its title. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.section-title {
  font-size: var(--text-h2);
}

.section-note {
  font-size: var(--text-small);
  color: var(--muted);
  max-width: 60ch;
}

/* Vertical rhythm between repeated blocks. */
.stack-4 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Long-form paragraphs: a small gap between each one. */
.prose {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: var(--text-body);
  /* Keeps lines from getting uncomfortably long on a very wide monitor. */
  max-width: 72ch;
}

.prose a {
  text-decoration: underline;
}

/* Plain bulleted list (used for "Known for"). */
.list-disc {
  list-style: disc;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--text-body);
  max-width: 72ch;
}


/* ==========================================================================
   4. HEADER / STICKY NAVIGATION
   ==========================================================================*/

.nav {
  position: sticky; /* follows you down the page */
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  /* The blur only works in browsers that support backdrop-filter. Where it
     is unsupported the semi-transparent background alone still looks fine. */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--nav-width);
  margin: 0 auto;
  padding: 0 1rem;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* min-width:0 lets the links shrink instead of pushing off the screen if
     the window is narrower than expected. */
  gap: 1rem;
  min-width: 0;
}

/* ---------- Logo on the left ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--heading);
  flex-shrink: 0;
}

.brand:hover,
.brand:focus-visible {
  color: var(--heading);
  text-decoration: none;
}

/* The little round monogram. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: #fff;
  font-size: var(--text-chip);
  letter-spacing: 0.02em;
}

/* ---------- The burger button (mobile only) ----------
   A checkbox is used as a switch. It is invisible (see .nav-toggle below)
   and the label below draws the three bars. When the checkbox is ticked we
   redraw the bars as an "X". */
.nav-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

/* The three bars that make up the burger icon. Each one has its own class
   (bar-top / bar-mid / bar-bottom) so the "turn it into an X" rules below
   can pick them out by name instead of counting children. */
.nav-burger .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--heading);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.15s ease;
}

/* Hide the real checkbox from sight but keep it reachable by keyboard. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* When the checkbox is ticked, turn the three bars into a cross. The top bar
   moves down and the bottom bar moves up by 6px, which is exactly the height
   of the two gaps between the three bars. */
.nav-toggle:checked ~ .nav-burger .bar-top {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle:checked ~ .nav-burger .bar-mid {
  opacity: 0;
}

.nav-toggle:checked ~ .nav-burger .bar-bottom {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Show a focus ring on the burger while the hidden checkbox has keyboard
   focus, so keyboard users can see where they are. */
.nav-toggle:focus-visible ~ .nav-burger {
  outline: 2px solid var(--ring-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- The links ---------- */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 0.3rem + 1vw, 1.35rem);
  min-width: 0;
}

.nav-links a {
  font-size: var(--text-small);
  white-space: nowrap;
  color: var(--body-text);
  /* Padding makes the link easier to click without moving the words. The bar
     centres everything, so the extra room around them is invisible. */
  padding: 0.5rem 0.1rem;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--heading);
  text-decoration: none;
}


/* ==========================================================================
   5. HERO CARD
   ==========================================================================
   The big bordered box at the top. On wide screens it becomes a fully
   bordered rounded rectangle; on narrow screens it keeps only a top and
   bottom line so it does not feel like a heavy box on a phone.
*/
.hero {
  margin: 0.5rem 0;
  padding: 1.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

/* ---------- The top of the hero: words on the left, photo on the right.
   This is a flex row. On a narrow screen the media query near the bottom of
   this file flips it into a column, so the photo sits under the words and is
   centred - exactly like the reference site. ---------- */
.hero-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* The column of words: name, tagline and the small titled blocks. */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.hero-name {
  font-size: var(--text-h1);
  letter-spacing: -0.02em;
}

.hero-tagline {
  max-width: 44rem;
  font-size: var(--text-body);
  color: var(--body-text);
}

/* A titled mini-block inside the hero: "Known for", "Location", etc. */
.hero-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--text-small);
}

.hero-block-title {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--heading);
}

.hero-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--body-text);
}

.hero-location span {
  color: var(--ring-green);
  font-size: 0.625rem;
}

/* ---------- The avatar and its spinning ring ---------- */
.hero-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);

  /* On a phone the words come first and the photo sits under them, so
     "centre" lines the photo up with the middle of the text. From 768px the
     photo moves up beside the words and this is overridden to flex-start. */
  align-self: center;
}

/* The ring sits exactly behind the avatar and rotates forever. */
.ring {
  position: absolute;
  inset: 0;
  animation: ring-spin 8s linear infinite;
  will-change: transform;
}

/* Each quarter of the ring is a small square with two coloured borders and
   one fully rounded corner. Four of them together make a complete circle. */
.ring-quad {
  position: absolute;
  width: 50%;
  height: 50%;
}

.ring-tl {
  top: 0;
  left: 0;
  border-top: 4px solid var(--ring-blue);
  border-left: 4px solid var(--ring-blue);
  border-top-left-radius: 100%;
}

.ring-tr {
  top: 0;
  right: 0;
  border-top: 4px solid var(--ring-red);
  border-right: 4px solid var(--ring-red);
  border-top-right-radius: 100%;
}

.ring-bl {
  bottom: 0;
  left: 0;
  border-bottom: 4px solid var(--ring-yellow);
  border-left: 4px solid var(--ring-yellow);
  border-bottom-left-radius: 100%;
}

.ring-br {
  bottom: 0;
  right: 0;
  border-bottom: 4px solid var(--ring-green);
  border-right: 4px solid var(--ring-green);
  border-bottom-right-radius: 100%;
}

/* The animation itself: spin once every 8 seconds, forever, evenly. */
@keyframes ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* The avatar sits on top of the ring, hiding its hollow middle. */
.avatar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--avatar-size) - 16px);
  height: calc(var(--avatar-size) - 16px);
  border-radius: 999px;
  background: var(--chip-bg);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
  /* cover fills the circle and crops the overflow, keeping it perfectly
     round no matter what shape the photo file is. */
  object-fit: cover;
  display: block;
}

/* Shown instead of the photo if you swap the <img> for your initials. */
.avatar-initials {
  font-size: 2.75rem;
}


/* ==========================================================================
   6. THE SECTION SWITCHER (tabs, no JavaScript)
   ==========================================================================
   The two buttons in the HTML are normal links that point at the two panels:
     href="#panel-story"   and   href="#panel-work"

   Clicking one writes that name into the browser's address bar, and the
   browser scrolls to the matching element. CSS can see which element that is
   using two pseudo-classes and one selector:

     :target   "this element is the one named in the address bar"
     :has()    "if this element contains something that matches ..."
*/

.switcher {
  position: relative;
  margin-top: 2rem;
}

.switcher-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* The two clickable buttons. They look like buttons but are really links. */
.switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--body-text);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.switch-btn:hover {
  color: var(--heading);
  border-color: var(--heading);
  text-decoration: none;
}

/* ---- Step 1: both panels start hidden ---- */
.panel {
  display: none;
  visibility: hidden;
}

/* ---- Step 2: show the panel that is open ----
   A panel is open in two situations:
     a) the link pointed at the panel ITSELF (that is what the two switch
        buttons do: href="#panel-story");
     b) the link pointed at something INSIDE the panel, which is what happens
        when you use one of the links in the navigation bar. ":has(:target)"
        is what detects this second case.
   Note: ":has()" only ever looks at DESCENDANTS, never at the element itself,
   which is why the plain ":target" selector is needed as well. */
.panel:target,
.panel:has(:target) {
  display: flex;
  visibility: visible;
}

/* ---- Step 3: show Career Story as the default view ----
   This is the "nothing relevant has been targeted yet" case. It covers two
   situations:
     a) the page has just loaded and the address bar has no fragment at all;
     b) the visitor clicked the logo, which jumps to #top - a target that is
        not part of any panel.
   So: if no panel is targeted and no panel contains a targeted element, fall
   back to Career Story. */
html:not(:has(.panel:target, .panel :target)) .panel-story {
  display: flex;
  visibility: visible;
}

/* ---- Step 4: give the open panel its vertical rhythm ---- */
.panel-story,
.panel-work {
  flex-direction: column;
  gap: 3rem; /* the breathing room between the big sections */
}

/* ---- Step 5: style the button belonging to the open panel ----
   This is the same dark pill look as the skill chips further down.
   Because the panel is what knows whether it is open, the selector asks the
   whole page: "if the Career Story panel is open, darken its button". */
body:has(.panel-story:target, .panel-story :target)
  .switch-btn[href="#panel-story"],
body:has(.panel-work:target, .panel-work :target)
  .switch-btn[href="#panel-work"] {
  background: var(--chip-bg);
  color: var(--chip-text);
  border-color: var(--chip-bg);
}

/* Same again for the default view. */
html:not(:has(.panel:target, .panel :target))
  .switch-btn[href="#panel-story"] {
  background: var(--chip-bg);
  color: var(--chip-text);
  border-color: var(--chip-bg);
}


/* ==========================================================================
   7. CONTENT PIECES
   ==========================================================================*/

/* ---------- An entry: a role, a project, an article ---------- */
.entry {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* The top line of an entry: title on the left, badge + date on the right.
   On a phone the two simply stack (see the media queries at the bottom). */
.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.entry-title {
  font-size: var(--text-h3);
}

.entry-org {
  font-size: var(--text-small);
  color: var(--body-text);
}

.entry-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: var(--text-small);
  flex-shrink: 0;
}

.entry-date {
  color: var(--muted);
  font-size: var(--text-small);
  white-space: nowrap;
}

.entry-text {
  font-size: var(--text-small);
  color: var(--body-text);
  max-width: 72ch;
}

.entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  font-size: var(--text-small);
  margin-top: 0.125rem;
}

/* Small vertical padding makes these thin text links comfortable to tap on a
   phone without changing how they look on a desktop. The square icon links
   are left out because they already have a fixed size of their own. */
.entry-links a,
.link-row a:not(.link-icon),
.footer-note a {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Links that are still placeholders look greyed out and are deliberately not
   real links, so nothing happens when you click them. */
.entry-links a[aria-disabled="true"] {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: underline;
}

.entry-links a[aria-disabled="true"]:hover {
  color: var(--muted);
}

/* ---------- A compact row: used for Education and Awards ---------- */
.row-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.row-main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

/* ---------- The small pill badges ---------- */
.badge {
  display: inline-block;
  background: var(--surface);
  color: var(--body-text);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-chip);
  white-space: nowrap;
}

/* A green tint for the award badge so a win stands out a little. */
.badge-win {
  background: rgba(52, 168, 83, 0.12);
  color: #1a7f37;
}

/* ---------- The dark "skill" chips ---------- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-family: var(--font-mono);
  font-size: var(--text-chip);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Buttons (email, LinkedIn, GitHub, ...) ---------- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Generous padding keeps these comfortably tappable on a phone. */
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--text-small);
  font-weight: 500;
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn-primary {
  background: var(--chip-bg);
  color: var(--chip-text);
  border-color: var(--chip-bg);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff;
  background: #1c2b4d;
  border-color: #1c2b4d;
  text-decoration: none;
}

/* ---------- Icons inside the buttons and links ----------
   The contact buttons are pictures now, so they need a size and a rule that
   centres the picture in the middle of the button. fill="currentColor" and
   stroke="currentColor" in the HTML mean each icon automatically takes the
   colour of the text around it, so it turns white on a dark button and dark
   on a light one without any extra work. */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  display: block;
}

/* A button that holds only an icon becomes a neat square. The padding is
   slightly smaller than the text buttons so the whole thing stays a tidy
   2.25rem, which is still a comfortable tap target on a phone. */
.btn-icon {
  padding: 0.55rem;
  gap: 0;
}

.btn-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* The quieter row of icons under the contact buttons. */
.link-row a.link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--body-text);
}

.link-row a.link-icon:hover,
.link-row a.link-icon:focus-visible {
  color: var(--heading);
  background: var(--surface);
}

/* ---------- The small plain links row in the hero ---------- */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--text-small);
}

.link-row a {
  text-decoration: underline;
  color: var(--body-text);
}

.link-row a:hover,
.link-row a:focus-visible {
  color: var(--heading);
}


/* ==========================================================================
   8. FOOTER
   ==========================================================================*/

.footer {
  margin-top: 3rem;
  padding: 1.5rem 1rem 2.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--text-small);
  color: var(--muted);
}

.footer p {
  margin: 0;
}

.footer-note {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-chip);
}

.footer-note a {
  color: var(--body-text);
}

.footer-note a:hover,
.footer-note a:focus-visible {
  color: var(--heading);
}


/* ==========================================================================
   9. RESPONSIVE TWEAKS
   ==========================================================================
   Three step sizes, so the page behaves the same on every screen:

     phones    (up to 767px)   - one column, photo under the words, burger menu
     tablets+  (768px and up) - photo beside the words, rounded card, more air

   Two things change at 768px, and they match the reference site exactly:
   the hero flips from one column to two, and the card gains its full border
   box with rounded corners.

   The burger menu is a separate thing: with seven links there is not enough
   room for them in the bar until 1024px, so the burger stays until then.
   ========================================================================== */

/* ---------- Tablets and up: two columns, photo on the right ---------- */
@media (min-width: 768px) {
  /* The card gets its full border box and rounded corners. */
  .hero {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 3rem;
    margin: 2rem 0;
  }

  /* Words on the left, photo on the right. The 1rem gap is the one the
     reference site uses. align-items: flex-start lifts the photo so its top
     lines up with the top of your name, instead of floating halfway down a
     tall block of text. */
  .hero-head {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Push the photo to the right-hand edge of the card, and let it sit level
     with the top of your name rather than floating in the middle. */
  .hero-avatar {
    align-self: flex-start;
    margin-left: auto;
  }

  /* The date and badge line up side by side instead of stacked. */
  .entry-meta {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
}

/* ---------- Big screens: let the photo grow with the screen ---------- */
@media (min-width: 1280px) {
  :root {
    --avatar-size: 260px;
  }
}

@media (min-width: 1600px) {
  :root {
    --avatar-size: 300px;
  }
}

/* ---------- Laptops and bigger: the two-column hero ---------- */
@media (min-width: 1024px) {
  /* If someone turns their browser font-size up a lot, the seven links need
     more room than the bar has. Instead of pushing them off the side of the
     screen, let them wrap onto a second line and let the bar grow. At normal
     sizes nothing wraps, so this is invisible day to day. */
  .nav-inner {
    height: auto;
    min-height: var(--nav-height);
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* A calmer type scale on a big screen.
     The content column is nearly 1000px wide here, so letters that look right
     on a phone start to shout. These are the sizes the reference site uses,
     nudged up slightly - a touch bigger, but back to its calm proportions. */
  :root {
    --text-h1: 1.6rem;
    --text-h2: 1.3rem;
    --text-h3: 1rem;
    --text-body: 0.95rem;
    --text-small: 0.875rem;
    --text-chip: 0.78rem;
  }
}

/* ---------- Phones and small tablets ---------- */
@media (max-width: 1023px) {
  /* Hide the links and show the burger button instead. Below 1024px there is
     not enough room to fit all seven links across the bar. */
  .nav-burger {
    display: flex;
  }


  /* The links become a drop-down panel that is open or closed depending on
     the state of the hidden checkbox above them. */
  .nav-links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);

    /* Closed state. All four of these are needed, not just max-height:
       - max-height:0 collapses the links themselves;
       - padding/border are removed because max-height only shrinks the
         CONTENT box, so 1rem of padding would otherwise stay on screen;
       - visibility:hidden takes the panel out of the page for screen
         readers and for anyone tabbing through the links. */
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;

    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease,
      visibility 0.3s ease;
  }

  /* Open state: the checkbox is ticked, so undo everything from above. */
  .nav-toggle:checked ~ .nav-links {
    max-height: 24rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    border-bottom-width: 1px;
    opacity: 1;
    visibility: visible;
  }

  .nav-links li + li {
    border-top: 1px solid var(--border);
  }

  .nav-links a {
    display: block;
    padding: 0.75rem 0.25rem;
  }

  /* The nav bar is solid on phones - the blur looks muddy over text. */
  .nav {
    background: #fff;
  }

  /* Let long words break instead of overflowing the screen. */
  .entry-title,
  .entry-org {
    overflow-wrap: break-word;
  }

  /* Text buttons stretch to fill the line so they are easy to tap. Icon
     buttons must NOT stretch - they are squares and need to stay square. */
  .button-row .btn {
    flex: 1 1 auto;
  }

  .button-row .btn-icon {
    flex: 0 0 auto;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width: 400px) {
  /* A slightly smaller name, so "Kriansh Pokharel" still fits on two lines
     on the narrowest phones instead of being squeezed onto three. */
  :root {
    --text-h1: 1.7rem;
  }

  .brand-name {
    display: none;
  }

  .switcher-buttons {
    justify-content: stretch;
  }

  .switch-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}


/* ==========================================================================
   10. PRINT STYLES
   ==========================================================================
   So that Ctrl+P (or "Save as PDF") produces a tidy one-page CV, we strip
   away the interactive furniture and print the one panel that is showing.
*/
@media print {
  /* Hide the navigation bar, the avatar and the tab buttons. */
  .nav,
  .hero-avatar,
  .switcher-buttons,
  .skip-link {
    display: none !important;
  }

  /* A printed CV should contain everything, so open both panels and remove
     the gap that normally separates them. */
  .panel,
  .panel-story,
  .panel-work {
    display: flex !important;
    visibility: visible !important;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  .page {
    max-width: 100%;
    padding: 0;
  }

  /* Remove the big empty gaps so everything fits on fewer pages. */
  .section {
    gap: 0.5rem;
  }

  .hero,
  .entry,
  .row-item {
    break-inside: avoid; /* never split an item across two pages */
  }

  /* Remove the card border and padding. */
  .hero {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
  }

  .badge,
  .chip {
    border: 1px solid #999;
    color: #000;
    background: none;
  }

  /* Make links show their address so a printed CV is still usable. */
  .entry-links a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  /* Placeholder links should not print at all. */
  .entry-links a[aria-disabled="true"] {
    display: none;
  }
}


/* ==========================================================================
   11. REDUCE MOTION
   ==========================================================================
   Some people get motion sickness from spinning elements. If they have asked
   their operating system to reduce motion, we stop the ring from spinning.
*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ring {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}