/* ============================================================
   SHANU RANA — Professional profile
   shanurana.com
   Self-contained: this page shares no files with the photography
   site. Everything it needs is in this stylesheet.
   ============================================================ */

:root {
  --bg: #0b0e11;
  --bg-soft: #11151a;
  --surface: #161b21;
  --line: rgba(232, 228, 218, 0.12);
  --text: #e8e4da;
  /* BRIGHTENED 2026-09-19, from #a39d8f, because Shanu asked for the body text to be
     easier to read. This token is not a minor accent — it carries the Professional Summary,
     every Toolbox sub-bullet, the closing paragraphs, the metrics captions and the footer,
     so it is most of the words on the page. It went 7.17:1 -> 10.46:1 against --bg.
     It stays 1.46:1 BELOW --text on purpose: --text marks the emphasised runs inside these
     paragraphs, and if the two converge that emphasis disappears. Don't raise it further
     without checking the bold phrases in the summary still stand out. */
  --muted: #c4beb2;
  --accent: #c89b5a;
  --accent-soft: rgba(200, 155, 90, 0.16);
  /* Buttons vs. heading labels — Shanu asked on 2026-09-19 that every link button be filled
     with the brand gold, and that the (unclickable) heading boxes be told apart from them at
     a glance. So: SOLID GOLD = you can click it. SOLID BRONZE = it is only a label.
     (It was a translucent tint for one revision; that read as "not a button" but stopped
     standing out at all, so she asked for a real fill.) */
  --accent-ink: #14110b;          /* dark ink that sits on solid gold */
  --accent-hover: #dab06c;        /* lighter gold, solid-button hover */
  --accent-bright: #e8bd7a;       /* brightest gold — the external-link arrow, 10.46:1 */
  /* Heading-box fill. Went translucent-tint -> SOLID BRONZE on 2026-09-19: the tint sat at
     only 1.19:1 against the page, so the boxes barely registered. Shanu asked for them to
     be properly filled and to stand out. Solid bronze reads as a filled plaque at 2.08:1
     against the background, while staying 3.68:1 away from the gold button — enough that
     nobody mistakes one for the other. */
  --label-bg: #564427;                    /* solid bronze fill for heading boxes */
  --label-line: rgba(200, 155, 90, 0.45); /* soft gold edge, holds the shape */
  --label-text: #e6cfa8;                  /* pale gold — 6.15:1 on the bronze */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap { width: min(1200px, 92vw); margin: 0 auto; }

/* ---------- Typography ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; }

h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0; }

h3 { font-size: 1.25rem; }

.lead { color: var(--muted); max-width: 60ch; }

.kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.kicker::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.site-header.scrolled {
  background: rgba(11, 14, 17, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--text);
}

.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.2rem;
}


/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  /* FILLED BY DEFAULT. Until 2026-09-19 the base .btn was an outline and only .solid was
     filled, so "Verified Credentials" sat in the hero as a faint outline next to a filled
     LinkedIn. Shanu asked for every button that carries a link to be filled in the brand
     gold. Making it the DEFAULT rather than a modifier means a button added later is
     on-brand even if whoever adds it forgets the class. */
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  /* Every .btn is an <a href>, so the hand cursor is the browser default — stated here
     anyway so it survives if one is ever rebuilt as a <button>, which defaults to an
     arrow. The heading boxes that are NOT links say cursor:default on h2.kicker. */
  cursor: pointer;
  /* Explicit, so a .btn and an h2.kicker are the same height when they sit side by side —
     which they do beside the Certifications heading. Left to inherit, the button took the
     body's 1.55 and stood 5px taller than the box next to it. h2.kicker states the same
     number for the same reason; change one and you must change the other. */
  line-height: 1.2;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* .solid and .ghost are kept as no-op aliases, not because the page needs them but because
   the markup still carries `class="btn solid"` in places and a stray `ghost` from an older
   copy must not silently render an unfilled button again. Both now resolve to the filled
   default. Don't add a third variant without asking — one button style is the point. */
.btn.solid,
.btn.ghost {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn.solid:hover,
.btn.ghost:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }

/* ---------- Sections ----------
   VERTICAL RHYTHM — measured, not guessed. Shanu asked for the whole page inside two
   screens; it was 3669px at 1440x900 and is now 1899px. It got there in three passes on
   2026-09-18, and every number below was chosen against the others:

     .section padding    6.5rem -> 1.7rem      body line-height  1.7  -> 1.55
     .section-head mb    3rem   -> 1rem        h2 max            2.8  -> 2.2rem
     hero padding        12/5.5 -> 5.2/1.8rem  card padding      1.6+ -> 1.05rem
     closing band        6rem   -> 1.8rem      footer            2.6  -> 1rem

   Two structural changes did as much work as the padding: the kicker moved onto the same
   line as its heading (a text line saved in each of four sections), and .toolbox became a
   multi-column flow instead of a 3x2 grid (see that rule).

   If you loosen one of these, loosen them all — half-compressed spacing reads as a bug,
   not a style. And measure afterwards; adding a section costs its padding plus its
   content, and the budget is already spent. */

.section { padding: 1.7rem 0; }

.section.alt { background: var(--bg-soft); border-block: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
}

/* A section whose only heading IS its kicker (Toolbox, Certifications, Education) is set in
   a filled gold box, deliberately borrowing the `.btn solid` shape so the page has one
   visual idea rather than two. It is NOT a link and must never become one — nothing here is
   clickable, so there is no hover, no cursor change and no href.

   Scoped to h2.kicker, so the kickers that still label real copy (Professional Summary, Get
   in touch, Away from the data) stay as small gold text with their rule. */
h2.kicker {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  /* TINTED, NOT SOLID — changed 2026-09-19. These three boxes used to carry the exact fill
     of a .btn (solid gold, dark ink), so Toolbox / Certifications / Education looked like
     three buttons that did nothing when clicked. Shanu asked for them to be told apart from
     the real buttons at a glance.

     The rule for the whole page is now:
         SOLID GOLD  + dark ink   = a link, it does something
         SOLID BRONZE + pale gold = a heading, it is only a label
     Both are filled, so both stand out; the hue and value tell them apart.

     Kept deliberately: the box shape, the size, the 700 weight and the letter-spacing —
     she asked on 2026-09-18 that these headings be bigger and bolder and stand out, and
     that still holds. The border does the standing-out that the solid fill used to do. */
  background: var(--label-bg);
  border: 1px solid var(--label-line);
  /* Pale gold, not --accent: plain gold on this bronze is 3.68:1 and fails AA. */
  color: var(--label-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  /* Matches .btn's line-height so the two are the same height side by side — see the note
     on .btn. Without it the h1,h2,h3 rule's 1.15 applies and the pair is 5px out. */
  line-height: 1.2;
  /* Not a link and never hovers — it must not offer the hand. */
  cursor: default;
}

/* The little gold rule belongs to the text version; inside the box it has nothing to do. */
h2.kicker::before { content: none; }

/* The kicker sits on the same line as the heading rather than above it — it saves a whole
   text line per section, and with four sections that is real scroll. It wraps back to two
   lines on its own when the heading is too long for the width. */
/* ---------- The Credly link beside the Certifications heading ----------
   Shanu asked on 2026-09-19 for the filled button here to become a plain link: short label,
   italic serif, bold, underlined, in the button gold.

   IT IS DELIBERATELY NOT A .btn, and that does not break the page's "every link button is
   filled" rule — this is an inline text link, not a button. The rule is about boxes: if it
   has a box, the box is filled. Don't "fix" this by giving it .btn back.

   Fraunces is the display face and its italic is the curliest thing on the page, which is
   what she asked for; --font-body has no italic worth using at this size. */
/* WEIGHT 400, NOT BOLD — and this is a correctness fix as much as a taste one.
   The page loads `Fraunces:ital,wght@...;1,400`: exactly ONE italic weight, 400. Asking for
   700 here did not fetch a bold italic, it made the browser SYNTHESISE one by smearing the
   400 — which is why it looked heavy and slightly soft. Shanu said unbolding would look
   better (2026-09-19); it also renders the face as drawn.
   If real bold italic is ever wanted, add `1,700` to the font URL first. Setting 700 here
   without that just brings the fake back. */
.verify-link {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  /* Up from 1.02rem. At 400 the italic is lighter than the bronze box beside it, and the
     extra size is what keeps the pair balanced without reaching for weight. */
  font-size: 1.1rem;
  color: var(--accent);
  /* NO UNDERLINE at rest — removed 2026-09-19. With the arrow enlarged and brightened it
     carries the "this is a link" job on its own, and the underline was competing with it
     under an italic face with long descenders. The underline comes back on hover, which is
     the usual affordance and costs nothing at rest. */
  text-decoration: none;
  text-underline-offset: 0.22em;
  cursor: pointer;
  transition: color 0.2s;
  /* The label is words, not an instruction ("Continuous Learning", not "Verify"), so the
     arrow is what says "this goes somewhere". */
  white-space: nowrap;
}

/* THE EXTERNAL-LINK MARK, leading the link — a box with an arrow leaving its top-right
   corner. Shanu sent this symbol on 2026-09-19 and asked for it in front of the words and
   prominent, replacing the globe that was there before.

   It also replaced the trailing ↗. The box-and-arrow already means "opens elsewhere", so
   keeping a bare arrow after the words said the same thing twice and flanked three words
   with two marks. One mark, in front, prominent. If the arrow is ever wanted back, the old
   ::after rule is in this file's history — but decide it is not redundant first.

   Three strokes: arrow head, arrow shaft, open box. At the ~21px it renders, anything more
   detailed turns to mud — a globe with latitude curves was tried here first and did exactly
   that. Check any redraw at real size, not zoomed.

   It is a DRAWN vector, not the 🌐 emoji, for one reason: an emoji renders in its own fixed
   colours — blue and green here — and `color` cannot touch it. This is a mask, so
   `background-color` tints it, which is why it matches the arrow exactly and can change on
   hover with everything else. Keep it a mask if you ever swap the shape.

   -webkit- prefix included for Safari, which still needs it. */
.verify-link::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin-right: 0.45em;
  /* sits the mark on the text's optical centre rather than its baseline */
  vertical-align: -0.22em;
  background-color: var(--accent-bright);
  transition: background-color 0.2s, transform 0.2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.2H20.8V9.5'/%3E%3Cpath d='M10.1 13.9 20.8 3.2'/%3E%3Cpath d='M18.2 13.6v5.4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7.8a2 2 0 0 1 2-2h5.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.2H20.8V9.5'/%3E%3Cpath d='M10.1 13.9 20.8 3.2'/%3E%3Cpath d='M18.2 13.6v5.4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7.8a2 2 0 0 1 2-2h5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hover lifts the mark and nudges it along the arrow's own diagonal — up and to the right,
   the direction the arrow points. Inherited from the trailing ↗ this replaced. */
.verify-link:hover::before {
  background-color: var(--label-text);
  transform: translate(1.5px, -1.5px);
}

/* FAILSAFE. The mark is a tinted mask: `background-color` paints the box and the mask cuts
   the shape out of it. In a browser that does not support masks the cut never happens and
   what shows is a solid gold SQUARE next to the link — worse than no icon at all, and
   especially confusing now the real icon IS a square. This hides it there instead. Every current browser supports one of the two properties, so in practice
   this never fires; it exists because the failure mode is ugly rather than invisible. */
@supports not ((-webkit-mask: url("data:image/svg+xml,%3Csvg/%3E")) or
               (mask: url("data:image/svg+xml,%3Csvg/%3E"))) {
  .verify-link::before { display: none; }
}

/* The trailing ↗ was removed 2026-09-19 when the box-and-arrow mark took its place in
   front of the words — see the ::before block above. Two external-link symbols on one
   three-word link is one too many. */

.verify-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* `center`, not `baseline`, since 2026-09-19: the Certifications heading now has a .btn
   beside it, and two filled boxes of the same height look wrong aligned on their text
   baselines. The other three section heads hold only the h2, so nothing else moved. */
.section-head > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
}


@media (max-width: 700px) {
  .section { padding: 1.5rem 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ---------- Hero ---------- */

/* ---------- Top of the page ----------
   .profile-hero is GONE (2026-09-19) — see the note in index.html. #profile is the first
   thing on the page now, so it inherits the two jobs the hero was doing:

     1. CLEARING THE FIXED HEADER. The header is `position: fixed` and measures 57px, so
        without this padding the portrait and the summary slide underneath the name. This
        is the one number on the page that cannot be reduced for the sake of scroll —
        below ~3.6rem the content collides with the header.
     2. Carrying the warm gradient, so the top of the page is not flat black.

   If a hero is ever reinstated, move both of these back to it or the page will have twice
   the top padding it needs. */
#profile {
  padding-top: 4.4rem;
  background:
    radial-gradient(90% 120% at 80% 0%, rgba(200, 155, 90, 0.07) 0%, transparent 60%),
    var(--bg);
}

/* The .profile-hero h1 rules were removed on 2026-09-19 with the heading itself. The page's
   only <h1> is now the name in the header, styled by .wordmark. If a hero heading ever comes
   back it must be an <h2> or lower — don't give the page a second <h1>. */


/* .profile-hero .hero-actions removed 2026-09-19 with the hero itself. `.hero-actions` is
   still used by the closing band, so that rule stays — only the hero-scoped one went. */

/* ---------- Metrics band ---------- */

/* Sits between the Professional Summary and Toolbox, both plain sections —
   so it needs a rule on BOTH edges to read as its own band. */
.metrics-band {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}

/* Five across since 2026-09-19, when R joined PMP and SAS. If a sixth is ever added, check
   the two mobile rules below as well — they hard-code where the borders fall. */
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); }

.metrics div {
  padding: 0.85rem 1.2rem;
  text-align: center;
  border-right: 1px solid var(--line);
}

.metrics div:last-child { border-right: 0; }

.metrics b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}

.metrics span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics div:nth-child(2n) { border-right: 0; }
  /* Five items over two columns = three rows, the last holding one item. Everything above
     that last row needs the divider, hence -n+4 rather than the -n+2 that was right when
     there were four items. */
  .metrics div:nth-child(-n + 4) { border-bottom: 1px solid var(--line); }
  .metrics div:last-child { border-right: 0; }
}

@media (max-width: 460px) {
  .metrics { grid-template-columns: 1fr; }
  .metrics div { border-right: 0; border-bottom: 1px solid var(--line); }
  .metrics div:last-child { border-bottom: 0; }
}

/* ---------- Profile ---------- */

.about-split {
  display: grid;
  grid-template-columns: 0.28fr 1.4fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 820px) { .about-split { grid-template-columns: 1fr; gap: 2.5rem; } }

.about-copy .kicker { margin-bottom: 0.3rem; }

.about-copy h2 { margin: 0.4rem 0 0.7rem; }

.about-copy p { color: var(--muted); margin-bottom: 0.7rem; }

.about-copy p strong { color: var(--text); font-weight: 600; }

/* ---------- Portrait ----------
   The headshot PNG has a pure-black background. `mix-blend-mode: screen`
   maps black onto whatever sits behind it, so the backdrop resolves to the
   page colour exactly and the subject is unaffected. The container must stay
   transparent (no background, no isolation) or the blend has nothing to blend
   with. A light-background image would break this — re-matte it to black. */

.portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.portrait::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 92%);
  pointer-events: none;
  z-index: 1;
}

/* Sized down 430px → 330px → 270px → 202px → 151px (2026-09-18/19). Each step was asked
   for because the headshot read as a close-up beside the summary; the last two were both
   "another 25%" — 270 x 0.75, then 202 x 0.75.

   THE COLUMN MOVES WITH THE IMAGE, every time. `.about-split` went 0.9 → 0.6 → 0.4 →
   0.28fr alongside, holding the image at ~80% of its column throughout. Cap the image
   inside a column you did not narrow and you do not get a smaller portrait — you get the
   same gap with a smaller picture floating in the middle of it, because .portrait centres
   its contents. */
.portrait img { width: 100%; max-width: 151px; mix-blend-mode: screen; }

/* ---------- Toolbox ----------
   Fourth and final layout. Worth keeping the history, because three of them lost on the
   same point: 3x2 card grid (741px) -> multi-column cards (428px) -> middot runs (336px)
   -> this. Shanu asked for plain bullets over density, so this one is deliberately a little
   taller than the runs were and much easier to read.

   Two levels: the topic is a bulleted heading (gold square), its detail sits beneath as
   sub-bullets (gold middot). Groups flow in three columns; `break-inside: avoid` is what
   stops a group being split across the column boundary — without it the layout shreds. */

.toolbox {
  columns: 3;
  column-gap: 2.6rem;
}

@media (max-width: 950px) { .toolbox { columns: 2; } }
@media (max-width: 620px) { .toolbox { columns: 1; } }

.tool-group {
  break-inside: avoid;
  margin-bottom: 1.15rem;
}

.tool-group h3 {
  position: relative;
  padding-left: 1rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.tool-group h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.tool-group ul { list-style: none; padding-left: 1rem; }

.tool-group li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.tool-group li::before {
  content: "·";
  position: absolute;
  left: 0.1rem;
  color: var(--accent);
  opacity: 0.75;
}

.tool-group em { font-style: normal; color: var(--accent); opacity: 0.85; }

/* ---------- Plain list — credentials and education ----------
   Replaced .cert-grid/.cert and .edu-grid/.edu (cards) on 2026-09-18. One component now
   serves both sections; the only difference is that a credential carries a gold lead-in
   (<b>) and an issuer (<em>), and a qualification is just its <span>. */

.plain-list { list-style: none; }

/* One item per row, at every width. It was two and three columns until 2026-09-18; Shanu
   asked for a single stacked list instead, so there is no column count to keep in step with
   the item count any more. Don't reintroduce `columns` here without asking. */

.plain-list li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: 0.85rem;
}

.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.plain-list b {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 0.55rem;
}

.plain-list span {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--text);
}

/* ONE ROW PER CERTIFICATION — changed 2026-09-19 on Shanu's instruction. The issuer used to
   be `display: block`, so every certification took two lines: the name, then the institute
   underneath. It now sits on the same row, separated by a gold middot.

   The separator is a ::before on the <em> rather than a character in the HTML, so it cannot
   be left behind if an item ever has no issuer — the Education list uses the same
   .plain-list and has no <em> at all. */
.plain-list em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.plain-list em::before {
  content: "·";
  margin: 0 0.5rem;
  color: var(--accent);
  opacity: 0.75;
}

/* ---------- Contact ---------- */

/* ---------- Closing band ----------
   Contact and the photography link were two stacked, centred bands; they are one row now
   (2026-09-18), contact left and photography right, divided by a hairline.

   The columns are flex so both button rows can be pushed to the bottom with `margin-top:
   auto`. Without that the left column's buttons would ride high, because only the right
   column carries a paragraph — the two kickers line up but nothing below them would. */

.closing-band {
  padding: 1.8rem 0;
  border-top: 1px solid var(--line);
}

.closing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.closing-col { display: flex; flex-direction: column; }

.closing-col + .closing-col {
  padding-left: 4rem;
  border-left: 1px solid var(--line);
}

.closing-col p {
  color: var(--muted);
  max-width: 42ch;
  margin: 0.9rem 0 0;
}

.closing-col .hero-actions { margin-top: auto; padding-top: 1.1rem; }

@media (max-width: 820px) {
  /* Too narrow for two columns: stack them and turn the divider through 90 degrees. */
  .closing-split { grid-template-columns: 1fr; gap: 0; }
  .closing-col + .closing-col {
    padding: 3rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .closing-col .hero-actions { margin-top: 0; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 1rem 0;
}

.footer-note {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}


/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}