/* The frame around the rendered .docx: an anthropic.com style header (wordmark on
   the left, text links, a split call-to-action on the right) over a parchment
   canvas, with the paper centered below it as in the original page. The document
   itself is styled by the .docx. The --color-* / --font-anthropic-* tokens are
   injected by build.py from the theme the .docx is generated with. */

:root {
  --ease: cubic-bezier(0.77, 0, 0.175, 1);
  --page-w: 793.7px;
  --page-h: 1122.5px;
  --scale: 1;
  --margin: 64px;
  --color-slate-600: #5e5d59;
  --color-slate-450: #9c9a92;
  --color-ivory-dark: #e8e6dc;
  /* The flowers: a quiet stone tone just off the parchment canvas. */
  --flower-color: #d5d4cb;
}

@media (max-width: 900px) {
  :root {
    --margin: 32px;
  }
}

@media (max-width: 560px) {
  :root {
    --margin: 20px;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* <html> is shorter than the viewport on short mobile pages (body's own
     min-height was removed so the page doesn't overscroll past the flowers);
     giving it the same background directly avoids relying on background
     propagation to the canvas, which some devtools/viewports don't do,
     leaving a white strip below the page instead of more parchment. */
  background: var(--color-ivory-medium);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-ivory-medium);
  color: var(--color-slate-dark);
  font-family: var(--font-anthropic-sans);
  font-size: 15px;
  line-height: 1.4;
}

::selection {
  background: #eab8a6;
  color: var(--color-slate-dark);
}

.page-wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: var(--margin);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 100;
  padding: 12px 24px;
  background: var(--color-ivory-light);
  color: var(--color-slate-dark);
  border-radius: 0 0 16px 16px;
  font-weight: 600;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

/* --- Header ------------------------------------------------------------------
   Scrolls away with the page, like the rest of the content. */

.site-header {
  width: 100%;
  padding: 16px 0;
  background: var(--color-ivory-medium);
}

.header-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.nav-list {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-text {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-slate-dark);
  font: 400 15px/21px var(--font-anthropic-sans);
  letter-spacing: -0.0025em;
  text-decoration: none;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  cursor: pointer;
}

.nav-text:hover {
  text-decoration: underline;
}

/* Split call to action: the main action plus a caret that opens more. */
.cta {
  position: relative;
  display: flex;
}

.cta-button,
.cta-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 0;
  background: var(--color-slate-dark);
  color: var(--color-ivory-light);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.cta-button {
  padding: 8px 16px;
  border-radius: 8px 0 0 8px;
  font: 400 15px/21px var(--font-anthropic-sans);
  text-decoration: none;
  white-space: nowrap;
}

.cta-trigger {
  width: 45px;
  padding: 12px 16px;
  border-left: 1px solid rgba(250, 249, 245, 0.2);
  border-radius: 0 8px 8px 0;
}

.cta-button:hover,
.cta-trigger:hover {
  background: rgba(20, 20, 19, 0.8);
}

.cta-trigger svg {
  transition: transform 0.2s var(--ease);
}

.cta-trigger:hover svg,
.cta-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Dropdown panel, as on anthropic.com: ivory card with 16px corners and a very
   soft shadow, sections split by a hairline, a small sans title over serif links
   with a grey external-link icon on the right. */
.dropdown {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  z-index: 100;
  min-width: 280px;
  margin-top: 8px;
  padding: 24px;
  background: var(--color-ivory-light);
  border: 1px solid var(--color-ivory-medium);
  border-radius: 16px;
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.01),
    0 4px 4px rgba(0, 0, 0, 0.02),
    0 16px 24px rgba(0, 0, 0, 0.04);
  animation: dropdown-in 0.2s ease-in-out;
}

.dropdown[hidden] {
  display: none;
}

@keyframes dropdown-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dropdown-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-ivory-dark);
}

.dropdown-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.dropdown-title {
  margin: 0;
  color: var(--color-slate-600);
  font: 400 14px/16.8px var(--font-anthropic-sans);
  letter-spacing: 0.15px;
}

.dropdown-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-slate-dark);
  font: 400 15px/21px var(--font-anthropic-serif);
  text-align: left;
  text-decoration: none;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.dropdown-link:hover {
  text-decoration: underline;
}

.dropdown-link svg {
  flex: none;
  color: var(--color-slate-450);
}

.dropdown-link:hover svg {
  color: var(--color-slate-dark);
}

.nav-text:focus-visible,
.cta-button:focus-visible,
.cta-trigger:focus-visible,
.dropdown-link:focus-visible {
  outline: 2px solid var(--color-slate-dark);
  outline-offset: 2px;
}

.cta[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 700px) {
  .nav-list li:not(:last-child) {
    display: none;
  }

  .header-content {
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .header-content {
    gap: 12px;
  }
}

/* --- The paper -------------------------------------------------------------- */

.sheet {
  --perch-w: 54px; /* Clawd on top of the paper: 18 x 12 pixels of 3px */
  --perch-h: 36px;
  --perch-gap: 16px;
  position: relative;
  display: block;
  padding: calc(var(--perch-h) + var(--perch-gap)) var(--margin) 104px;
}

@media (max-width: 560px) {
  .sheet {
    --perch-gap: 4px;
  }
}

/* The frame takes the scaled size so the page never overflows narrow screens. */
.page-frame {
  width: calc(var(--page-w) * var(--scale));
  height: calc(var(--page-h) * var(--scale));
  margin: 0 auto;
}

.page-frame > .docx-wrapper {
  width: var(--page-w);
  padding: 0;
  background: none;
  display: block;
  transform: scale(var(--scale));
  transform-origin: top left;
}

.page-frame .docx-wrapper > section.docx {
  margin: 0;
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(20, 20, 19, 0.14);
}

/* docx-preview marks bullet paragraphs with text-indent + a "\9" tab character in
   ::before, which renders at a different width than the hanging indent, pulling
   wrapped lines out of alignment with the first line. Outside list markers avoid
   that mismatch and align natively. */
.docx-wrapper p[class^="docx-num-"],
.docx-wrapper p[class*=" docx-num-"] {
  text-indent: 0 !important;
  list-style-position: outside !important;
  list-style-type: disc !important;
}

.docx-wrapper p[class^="docx-num-"]:before,
.docx-wrapper p[class*=" docx-num-"]:before {
  content: none !important;
}

/* --- Clawd on the paper ----------------------------------------------------------
   He stands on the top edge of the page, near its right corner, typing on his
   laptop (see clawd.js). A button, so that he can be paused. */

.perch {
  position: absolute;
  top: var(--perch-gap);
  left: calc(50% + var(--page-w) * var(--scale) / 2 - var(--perch-w) - 28px);
  width: var(--perch-w);
  height: var(--perch-h);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.perch[hidden] {
  display: none;
}

.perch svg {
  display: block;
}

.perch:focus-visible {
  outline: 2px solid var(--color-slate-dark);
  outline-offset: 4px;
}

/* --- Flowers ------------------------------------------------------------------
   Pixel-art flowers growing along the bottom of the page. Each one is a <use> of
   the sprite defined at the top of the body; where they grow is listed in
   data/resume.json (decor.flowers). */

.garden {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  pointer-events: none;
}

.flower {
  position: absolute;
  bottom: 0;
  height: auto;
  aspect-ratio: 150 / 140;
  overflow: visible;
  color: var(--flower-color);
}

.flower.flip {
  transform: scaleX(-1);
}

@media (max-width: 700px) {
  .flower {
    scale: 0.7;
    transform-origin: 50% 100%;
  }

  /* The scaled-down page is shorter than most phone viewports; without this the
     forced full-height body leaves blank canvas below the flowers (still
     anchored correctly to the bottom of .sheet's content) instead of ending
     the page right there, like it does on desktop. Fixed positioning was
     tried here before, but it pins the flowers to the screen while scrolling,
     so they end up floating over the resume instead of after it. */
  body {
    min-height: 0;
  }
}

/* --- Print / PDF -----------------------------------------------------------
   build.py prints this very page to produce the PDF, so what you see is what
   you get: one A4 page, nothing but the document. */

@page {
  size: A4;
  margin: 0;
}

@media print {
  html,
  body {
    background: none;
    min-height: 0;
  }

  .skip-link,
  .site-header,
  .garden,
  .perch,
  .game-layer {
    display: none !important;
  }

  .sheet {
    padding: 0;
  }

  .page-frame {
    width: auto;
    height: auto;
  }

  .page-frame > .docx-wrapper {
    width: auto;
    transform: none;
  }

  .page-frame .docx-wrapper > section.docx {
    width: 210mm !important;
    height: 296.8mm;
    min-height: 0 !important;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}