/* thedanamor.com page styles, from Iris's approved v3 card wireframes (wireframes/danamor/page.css, #2010).
   Fuchsia Night tokens only (theme.css): no one-off colours. Dark and light follow the system setting. */

* { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; line-height: 1.6; -webkit-text-size-adjust: 100%; }
p, h1, h2, h3, figure { margin: 0; }
ul { margin: 0; padding-left: 1.25rem; }
img { display: block; max-width: 100%; height: auto; }

/* Underline below Inter's descenders (g, p, y reach ~0.22em): tokens come with fuchsia-night #2077, fallbacks until then. */
a { color: var(--link); text-underline-offset: var(--underline-offset, 0.3em); text-decoration-thickness: var(--underline-thickness, 1px); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-control); }

.skip { position: absolute; left: var(--space); top: -4rem; z-index: 20; background: var(--background); color: var(--foreground);
  padding: 0.75rem 1rem; border: 1px solid var(--foreground); }
.skip:focus { top: 0.5rem; }

/* Draft note: only while content/home.md says draft: true. A word, not colour alone. */
.draft { background: var(--warning-subtle); color: var(--warning-subtle-foreground); font-size: 0.875rem; line-height: 1.4;
  padding: 0.5rem var(--space); text-align: center; border-bottom: 1px solid var(--border); }
.draft-tag { font-size: var(--label-size); font-weight: var(--label-weight); text-transform: var(--label-case);
  letter-spacing: var(--label-tracking); border: 1px solid currentColor; border-radius: var(--radius-chip);
  padding: 0.0625rem 0.375rem; margin-right: 0.375rem; }

/* Phones: one column of cards, top to bottom. Laptops and tablets get two columns (end of file). */
.page { width: 100%; max-width: calc(36rem + var(--space) * 2); margin: 0 auto; padding: var(--space); display: grid; gap: calc(var(--space) * 1.5); }

/* Name as the logo */
.masthead { padding-top: 0.5rem; display: grid; gap: 0.75rem; }
.mark { font-family: var(--font-display); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
  line-height: 0.95; /* descender-check: deliberate (fixed logo word, no descenders; if the name ever changes, use 1.2) */
  font-size: clamp(3.25rem, 17vw, 5.5rem); overflow-wrap: normal; }
.mark-a { color: var(--foreground); }
.mark-b { color: var(--primary); } /* display size only: 4.18:1 dark / 4.74:1 light, large text needs 3:1 */

/* Fuchsia Night Card: hairline box, square corners. Image on top, edge to edge; text below. Text never sits on an image. */
.card { position: relative; background: var(--card-bg); color: var(--card-foreground);
  border: var(--card-border-w) solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--card-shadow);
  overflow: hidden; transition: border-color var(--duration-fast) var(--ease-out); }
.card-img { margin: 0; border-bottom: var(--card-border-w) solid var(--card-border); }
.card-img img { width: 100%; }
.card-img figcaption { padding: 0.5rem var(--space); font-size: 0.8125rem; line-height: 1.4; color: var(--muted-foreground);
  border-top: var(--card-border-w) solid var(--card-border); }
.card-body { display: grid; align-content: start; gap: calc(var(--space) * 0.6); padding: var(--space); }
.card-title { font-family: var(--font-display); font-weight: var(--heading-weight); font-size: 1.6rem; line-height: 1.2;
  letter-spacing: var(--heading-tracking); }
.card-body p { font-size: 1rem; line-height: 1.55; }

/* Images keep their own shape (never cropped): the whole 3:4 portrait shows, so the face is always in frame (Dan, 2026-10-20). */

/* About: the first line of the bio is the tagline. */
#about .card-body p { font-size: 1.125rem; }
#about .card-body > p:first-of-type { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.25;
  letter-spacing: var(--heading-tracking); }

/* Project cards: the card's one link covers the card, so the whole card is the tap target; border turns fuchsia on hover. */
.project:hover, .project:focus-within { border-color: var(--card-hover-border); }
/* block + padding keeps the link >= 44px tall when it wraps */
.card-link { display: block; padding: 0.625rem 0; margin-bottom: -0.5rem; font-weight: 600; overflow-wrap: anywhere; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--ring); outline-offset: 3px; }

/* A section without an image (Say hi) is one line: "Say hi: @thedanamor on Instagram". */
.line { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.3;
  letter-spacing: var(--heading-tracking); }
.line h2, .line p { display: inline; font: inherit; }
.line h2::after { content: ":"; }
.line a { display: inline-block; padding: 0.5rem 0; }

.foot { padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.8125rem; }

/* Tablet and laptop: sizes only (card padding and type). The two-column layout is at the end of the file. */
@media (min-width: 48rem) {
  .page { padding: calc(var(--space) * 2) var(--space) calc(var(--space) * 3); gap: calc(var(--space) * 2); }
  .card-body { padding: calc(var(--space) * 1.25); }
  .card-title { font-size: 1.875rem; }
  #about .card-body p { font-size: 1.25rem; }
  #about .card-body > p:first-of-type { font-size: 1.625rem; }
  .line { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* Laptop and tablet: the v2 layout (#1982), approved 2026-10-20 (#2073). Only changes 768 px and wider; the phone layout is untouched. */
@media (min-width: 48rem) {
  /* Two columns: the portrait on the left (5 parts), the words and cards on the right (7 parts, split in two for the cards). */
  .page { max-width: 84rem; padding: calc(var(--space) * 1.5) calc(var(--space) * 1.5) calc(var(--space) * 3);
    grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
    column-gap: calc(var(--space) * 1.5); row-gap: calc(var(--space) * 2); align-items: start; }
  .page > * { grid-column: 2 / 4; }

  /* The About card opens up: its photo moves to the left column, its words sit under the name. */
  #about { display: contents; }
  #about .card-img { grid-column: 1; grid-row: 1 / 6; align-self: start; position: sticky; top: calc(var(--space) * 1.5);
    margin-right: clamp(0.5rem, 3.5vw, 3.5rem); border-bottom: 0; }
  /* The whole photo shows, never cropped, and fits a short laptop window. */
  #about .card-img img { width: auto; max-width: 100%; max-height: calc(100vh - 6rem);
    border: var(--card-border-w) solid var(--card-border); }
  #about .card-img figcaption { padding: 0.5rem 0 0; border-top: 0; }
  #about .card-body { grid-column: 2 / 4; grid-row: 2; padding: 0; }

  .masthead { grid-row: 1; padding-top: 1rem; }
  .mark { font-size: clamp(4rem, 9vw, 8rem); }
  #crescendo, #pink-pony-club { grid-row: 3; align-self: stretch; }
  #say-hi { grid-row: 4; }
  .foot { grid-row: 5; }
}

/* Tablet: the two project cards stack in the right column. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  #crescendo { grid-row: 3; }
  #pink-pony-club { grid-row: 4; }
  #say-hi { grid-row: 5; }
  .foot { grid-row: 6; }
  #about .card-img { grid-row: 1 / 7; }
}

/* Laptop: the two project cards side by side. */
@media (min-width: 64rem) {
  #crescendo { grid-column: 2; }
  #pink-pony-club { grid-column: 3; }
}