/* Starlit Portraits — starlitportraits.co.uk
 *
 * Palette and typefaces are the "Inserts & reports" set from the brand
 * rules, section 4. This site is a companion to the printed guide, so it
 * should read as the same object, not as a separate brand.
 *
 * No JavaScript. No web fonts loaded from anyone else's server. The only
 * requests a visitor's browser makes are to starlitportraits.co.uk.
 */

/* ---------------------------------------------------------------- fonts
 * Self-hosted. The brand typefaces are on Google Fonts, but loading them
 * from Google would send every visitor's IP address to Google on every
 * page view — which would make both the "no third-party requests" rule and
 * the privacy notice untrue.
 *
 * These are variable fonts: one file covers every weight, which is why
 * font-weight below is a range rather than a single number.
 *
 * Georgia is not here on purpose. It ships with macOS and Windows, so
 * there is nothing to download, and section 4 requires it to stay put
 * because of its Cyrillic coverage.
 */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens
 * Colours are declared once here and referenced by name everywhere else.
 * If a hex value in the brand rules ever changes, it changes in one place.
 */
:root {
  --accent:      #6b4f6b;  /* headings, rules                    */
  --accent-soft: #6b6478;  /* subheadings                        */
  --ink:         #2c2c2c;  /* body text                          */
  --rule:        #d4c9b8;  /* divider lines, borders             */
  --paper:       #f7f3ee;  /* background, primary                */
  --panel:       #faf8f4;  /* background, light panels           */

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:  Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --measure: 34rem;        /* comfortable line length for reading */
}

/* ---------------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Percentage rather than px so the page honours a reader who has set a
     larger default text size in their phone's accessibility settings. */
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  /* Tapping a tile glides to the entry rather than teleporting, so it is
     obvious you have moved down the same page rather than loaded a new one.
     Turned off further down for anyone who has asked for reduced motion. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  /* Optical padding: someone reading this is holding a phone in one hand
     and a print in the other. Generous side margins, nothing near the
     screen edge — the same instinct as the 5mm trim margin on the prints. */
  padding: 0 1.4rem;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

/* --------------------------------------------------------------- header */
.brandbar {
  padding: 2.6rem 0 1.8rem;
  text-align: center;
}

/* Mirrors the brand header on the reading title page: DM Sans, very small,
   widely letterspaced. Section 4 gives letter spacing 500 in Canva units,
   which is 0.5em here. */
.brandmark {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  /* Letterspacing adds the gap after the last letter too, which visually
     shifts centred text left. This pulls it back. */
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--accent-soft);
  text-decoration: none;
  display: inline-block;
}

a.brandmark:hover,
a.brandmark:focus {
  color: var(--accent);
}

/* ----------------------------------------------------------- typography */
h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--accent);
  margin: 2.6rem 0 0.5rem;
  text-wrap: balance;
}

h3 {
  font-family: var(--body);
  font-weight: bold;
  font-size: 1rem;
  color: var(--accent-soft);
  margin: 1.8rem 0 0.3rem;
}

.standfirst {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--accent-soft);
  margin: 0 0 2rem;
}

p {
  margin: 0 0 1.1rem;
}

ul {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
}

li {
  margin-bottom: 0.45rem;
}

strong {
  font-weight: bold;
}

/* Examples and side notes: Georgia italic in the primary accent, matching
   the reading body style in section 4. */
.note {
  font-style: italic;
  color: var(--accent);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------- links
 * Underlined text, not buttons. Section 4 rules out pill shapes and
 * hard-edged UI elements — they belong to a different visual language than
 * the prints.
 */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus {
  text-decoration-thickness: 2px;
}

/* Visible keyboard focus. Removing this would make the site unusable for
   anyone navigating by keyboard. */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- panels */
.panel {
  background: var(--panel);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 1.3rem 1.5rem;
  margin: 2.2rem -0.3rem;
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel h2,
.panel h3 {
  margin-top: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.8rem 0;
}

/* -------------------------------------------------- editorial placeholder
 * Marks a section whose copy has not been written yet. Deliberately loud:
 * this must be impossible to publish by accident. Every one of these is
 * drafted in draft-content.md for review, then pasted in and the marker
 * deleted.
 */
.todo {
  border: 1px dashed #b4433a;
  background: #fdf6f5;
  color: #7c2f28;
  padding: 0.9rem 1rem;
  margin: 1rem 0 1.6rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
}

.todo::before {
  content: 'PLACEHOLDER — not for publication';
  display: block;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}


/* -------------------------------------------------------- colourways
 * Two across on a phone, four on a wide screen. The images are square
 * because the prints are, and they carry their own frame, so they sit on
 * the paper with nothing drawn around them.
 */
.colourways {
  list-style: none;
  margin: 1.4rem 0 2rem;
  padding: 0;
  display: grid;
  /* Two across on a phone, four on a wide screen. Below about 7.5rem the
     border detail on the frames stops being legible, which is the point of
     showing them at all. */
  grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr));
  gap: 1.2rem 0.9rem;
}

.colourways li {
  margin: 0;
  text-align: center;
}

.colourways img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.4rem;
}

.colourways span {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--accent-soft);
}

/* ------------------------------------------------------ contents list
 * Eleven links, one per row on a phone and two or three across on wider
 * screens. Rows rather than a run of middot-separated text, because a
 * finger needs a target with some height to it.
 */
.contents {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.1rem 1.4rem;
}

.contents li {
  margin: 0;
}

.contents a {
  display: block;
  padding: 0.32rem 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.contents a:hover,
.contents a:focus {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Landing on a section from the contents should not put its heading hard
   against the top edge of the screen. */
main h2[id] {
  scroll-margin-top: 1.2rem;
}

/* -------------------------------------------------- key and sign lists
 * Lists rather than tables. A five- or four-column table cannot fit a
 * 380px screen: it either overflows sideways or squashes each cell to one
 * character per line. A grid reflows to a single column instead.
 */
.keylist {
  list-style: none;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.1rem 1.4rem;
}

.keylist.wide {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.keylist li {
  margin: 0;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.94rem;
  /* A row rather than a run of inline text, so a name that wraps hangs
     under itself instead of running back under the number. Baseline
     alignment, or the number floats above the line it belongs to. */
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

/* The abbreviation or the number, held to a fixed width so every name
   starts at the same place down the column. Same size as the text beside
   it: smaller and it reads as a superscript rather than a label. */
.keylist .k {
  flex: 0 0 1.8rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--accent);
}

/* ------------------------------------------------ the twelve houses
 * Circled numbers, the same annotation the diagram uses, so the reference
 * and the picture read as one thing rather than two.
 */
.houselist {
  list-style: none;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
}

.houselist li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.hnum {
  flex: 0 0 1.65rem;
  height: 1.65rem;
  border: 1px solid var(--accent-soft);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.55rem;
  text-align: center;
  color: var(--accent-soft);
  /* The circle is a block, so its baseline is its bottom edge; this lifts
     it back onto the text baseline beside it. */
  align-self: flex-start;
  position: relative;
  top: 0.18rem;
}

/* ------------------------------------------------- the chart diagram
 * Inline SVG rather than an <img>, for two reasons: it inherits the page's
 * typefaces and colours, so it cannot drift out of the palette, and it
 * costs no extra request on a page that is going to be opened on mobile
 * data while someone stands holding a print.
 *
 * Everything is set in currentColor-adjacent tokens, so changing a hex in
 * :root changes the diagram too.
 */
.chartfig {
  margin: 1.6rem 0 2rem;
}

.chartfig svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The chart itself: hairlines, the same weight as the rules elsewhere. */
.chartfig .grid {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}

.chartfig .grid.big {
  stroke-width: 1.2;
}

/* The segment picked out for the enlargement. Filled rather than outlined,
   because a heavier outline would read as a different kind of line and the
   chart only has one kind. */
.chartfig .picked {
  fill: var(--accent);
  fill-opacity: 0.08;
  stroke: none;
}

.chartfig text {
  font-family: var(--sans);
  text-anchor: middle;
  /* y is the middle of the text rather than its baseline, so a label placed
     at a computed point inside a segment actually sits there. */
  dominant-baseline: middle;
}

/* Sign numbers: italic and small, as they are on the prints — and the
   smallest thing here, which is exactly why the guide explains them. */
.chartfig .sign text {
  font-size: 8.5px;
  font-style: italic;
  fill: var(--accent-soft);
}

.chartfig .planet text,
.chartfig text.planet {
  font-size: 11px;
  fill: var(--ink);
}

.chartfig .deg {
  font-size: 9px;
  fill: var(--accent-soft);
}

/* The rising sign is the one element given emphasis, per section 4. */
.chartfig .asc text {
  font-size: 13px;
  font-weight: 500;
  fill: var(--accent);
}

.chartfig .asc .deg {
  font-size: 10.5px;
  fill: var(--accent);
}

.chartfig text.big {
  font-size: 17px;
}

.chartfig text.big.deg {
  font-size: 13px;
}

.chartfig text.sign.big {
  font-size: 12px;
  font-style: italic;
  fill: var(--accent-soft);
}

/* House numbers. Dashed circles in the softer accent, so they read as an
   annotation laid over the chart rather than as anything printed on it —
   which is the single most confusing thing about a North Indian chart, since
   the houses are the one part with no marks of their own. */
.chartfig .house circle {
  fill: var(--paper);
  stroke: var(--accent-soft);
  stroke-width: 1;
  stroke-dasharray: 2.5 2;
}

.chartfig .house text {
  font-size: 10px;
  fill: var(--accent-soft);
}

.chartfig .rule {
  stroke: var(--rule);
  stroke-width: 1;
}

.chartfig .cue {
  font-size: 9.5px;
  font-style: italic;
  fill: var(--accent-soft);
  text-anchor: start;
}

.chartfig .leader path {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

.chartfig .callout text {
  font-size: 9.5px;
  fill: var(--accent-soft);
  text-anchor: start;
}

.chartfig figcaption {
  font-family: var(--body);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--accent-soft);
  margin-top: 0.6rem;
}

/* ------------------------------------------------- the Nakshatra tiles
 * A grid of twenty-seven links. Each one is an anchor to a heading further
 * down the page it points at — no JavaScript involved. A fragment link like
 * /nakshatras#ashwini is resolved entirely by the browser; the part
 * after the # is never sent to the server, which is why this works on a
 * static host with nothing running on it.
 *
 * Square tiles, thin rules, no rounded corners — section 4 rules out
 * pill shapes and hard-edged interface elements, and the prints are square.
 */
.tiles {
  list-style: none;
  margin: 1.6rem 0 2.4rem;
  padding: 0;
  display: grid;
  /* auto-fill rather than a fixed column count, so the grid reflows from
     three columns on a narrow phone to six on a laptop without a media
     query per size. */
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  /* Every tile the same height, set by the tallest name in the set — some
     wrap to two lines and some do not, and rows of different heights read as
     a fault rather than as a rhythm. In a grid whose own height is not
     fixed, 1fr rows all resolve to the tallest row's content, which is
     exactly the behaviour wanted here. The spare height falls below the name
     rather than around it, because the tile contents are packed to the top. */
  grid-auto-rows: 1fr;
  /* Hairlines come from a border on two sides of each tile, plus two sides
     on the grid itself. A background showing through a 1px gap would be
     simpler, but twenty-seven does not divide by six, and the leftover cells
     on a wide screen would show as a solid block of rule colour. This way an
     empty cell is simply empty. */
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.tiles li {
  margin: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.tiles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  gap: 0.25rem;
  padding: 0.7rem 0.35rem 0.8rem;
  background: var(--panel);
  text-decoration: none;
  text-align: center;
  color: var(--ink);
}

.tiles a:hover,
.tiles a:focus {
  background: var(--paper);
  color: var(--accent);
}

.tiles img {
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 0.15rem;
}

.tile-name {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
}

/* --------------------------------------------------- Nakshatra entries */
.nak {
  /* Without this, jumping to an entry puts its heading hard against the top
     edge of the screen with no breathing room above it. */
  scroll-margin-top: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.nak h2 {
  margin-top: 1.8rem;
}

.nak-num {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent-soft);
  /* On the baseline. Raised and shrunk, it read as a footnote marker
     rather than as the segment's number. */
  margin-right: 0.5rem;
}

.nak-meta {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--accent-soft);
  margin-bottom: 0.9rem;
}

.backlink {
  font-family: var(--sans);
  font-size: 0.72rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------- footer */
footer {
  margin: 3.5rem 0 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--accent-soft);
}

footer a {
  color: var(--accent-soft);
}

footer p {
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------- larger screens
 * Mobile-first: everything above is the phone layout, because most scans
 * happen on a phone. This is the only breakpoint — the page is a column of
 * text and does not need to become anything else on a laptop.
 */
@media (min-width: 40rem) {
  html {
    font-size: 118.75%;
  }

  h1 {
    font-size: 2.6rem;
  }

  .brandbar {
    padding-top: 3.4rem;
  }
}

/* Respect a reader who has asked their device for reduced motion. There is
   no animation here now; this is a guard against adding one carelessly. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* --------------------------------------------------------------- print
 * Someone may print the guide. Keep it legible and drop the backgrounds.
 */
@media print {
  body {
    background: #fff;
    font-size: 11pt;
  }

  .panel {
    background: none;
  }

  .todo {
    display: none;
  }

  a {
    text-decoration: none;
  }
}