/* ==========================================================================
   Samia Studios — the parent site (the house). Components that only this site
   uses. Loaded after /brand/css/samia.css; tokens, type and motion come from
   there. Everything here is transform/opacity motion and stops under
   prefers-reduced-motion.
   ========================================================================== */

/* Division strip: seven compact linked cards (cover, studio page) --------- */
.div-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }
.div-card { --heading: var(--ink); --text: var(--ink-2); display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 16px; background: var(--paper-2); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--ink); color: var(--ink-2); min-width: 0; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.div-card h3 { color: var(--ink); }
/* Ink text on tints (brief rule 9); the dot alone carries the status colour */
.div-card .status.live::before { background: var(--green); } .div-card .status.soon::before { background: var(--blue); } .div-card .status.later::before { background: #6F6A7A; }
.div-card:hover { text-decoration: none; transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.div-card .icon-tile { width: 48px; height: 48px; box-shadow: 2px 2px 0 var(--ink); }
.div-card .icon-tile .icon { width: 28px; height: 28px; }
.div-card .txt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.div-card h3 { font-size: 1rem; margin: 0; }
.div-card h3 small { display: block; font-family: var(--sans); font-weight: 600; text-transform: none; font-size: .74rem; color: var(--ink-2); letter-spacing: 0; margin-top: 2px; }
.div-card .status { margin-top: auto; color: var(--ink); font-size: .74rem; letter-spacing: .04em; line-height: 1.3; align-items: flex-start; }
.div-card .status::before { margin-top: 4px; }
.div-card.sun { background: var(--sun); } .div-card.lemon { background: var(--lemon); } .div-card.rose { background: var(--rose); } .div-card.sky { background: var(--sky); } .div-card.lilac { background: var(--lilac); } .div-card.mint { background: var(--mint); } .div-card.peach { background: var(--peach); }
@media (max-width: 1100px) { .div-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .div-strip { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .div-card { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .div-card .txt { gap: 4px; }
  .div-card .status { margin-top: 0; }
}

/* Cover: keep the edition line's right-hand words clear of the globe ------- */
@media (min-width: 821px) { .edition span:last-child { padding-right: calc(clamp(3.6rem, 12.5vw, 11.5rem) * .78); } }

/* Who we are looking for (work with us): glyph beside the text on wide screens */
.who { display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--s3); row-gap: 8px; align-items: start; }
.who .glyph { grid-row: 1 / span 3; aspect-ratio: 1; margin: 0; }
.who h3 { grid-column: 2; margin: 0; }
.who p { grid-column: 2; }
.who .foot { grid-column: 2; margin-top: 0; padding-top: 8px; align-self: end; }
@media (max-width: 700px) {
  .who { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .who .glyph { grid-row: auto; aspect-ratio: 4 / 3; }
  .who h3, .who p, .who .foot { grid-column: 1; }
}

/* Night band on the cover: the sun disc, drawn stars and the mission ------ */
.night-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.night-sun { position: relative; display: grid; place-items: center; min-height: 300px; }
.night-sun .sunwheel { animation: spin-slow 90s linear infinite; }
.night-sun .stars { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.statement { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.5rem); line-height: .98; letter-spacing: -.02em; font-variation-settings: "wdth" 76; color: var(--paper); margin: 0 0 var(--s3); text-wrap: balance; }
.statement em { font-style: normal; color: var(--sun); }
.night-lines { display: grid; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s3); }
.night-lines > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--s2); }
.night-lines b { color: var(--sun); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; padding-top: .35em; }
.night-lines p { margin: 0; }
@media (max-width: 900px) {
  .night-grid { grid-template-columns: minmax(0, 1fr); }
  .night-sun { min-height: 0; justify-items: start; padding-block: var(--s2); }
  .night-lines > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Drawn scenes (inline SVG posters) --------------------------------------- */
.scene { display: block; width: 100%; height: auto; }
.art.framed .scene { height: auto; }
.poster { border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--sun); }
.poster svg { display: block; width: 100%; height: auto; }

/* What we make: five tiles with drawn glyphs ------------------------------- */
.make-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.glyph { width: 100%; aspect-ratio: 4 / 3; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); display: grid; place-items: center; overflow: hidden; flex: none; }
.glyph svg { width: 100%; height: 100%; display: block; }
.tile .glyph { margin-bottom: 4px; }
.make p { font-size: var(--fs-small); }
.make .foot { font-size: .8rem; font-weight: 700; color: var(--ink); }
@media (max-width: 1100px) { .make-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .make-grid { grid-template-columns: minmax(0, 1fr); }
  .make { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .make .glyph { width: 88px; aspect-ratio: 1; margin: 0; }
  .make .txt { flex: 1; min-width: 200px; display: grid; gap: 6px; }
  .make .txt h3 { margin: 0; }
  .make .foot { width: 100%; padding-top: 0; }
}
.make .txt { display: grid; gap: 6px; }

/* The family page: one row per division ----------------------------------- */
.fam { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(40px, 5vw, 72px); border-top: var(--bw) solid var(--ink); scroll-margin-top: calc(var(--header-h) + 16px); }
.fam:first-child { border-top: 0; padding-top: 0; }
.fam:last-child { padding-bottom: 0; }
.fam-art { border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--sun); transform: rotate(-1.2deg); }
.fam:nth-child(even) .fam-art { order: 2; transform: rotate(1.2deg); }
.fam-art svg { width: 100%; height: auto; display: block; }
.fam .status { margin-bottom: var(--s2); }
.fam h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.fam dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); margin: var(--s3) 0; }
.fam dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.fam dd { margin: 0; font-size: var(--fs-small); }
@media (max-width: 900px) {
  .fam { grid-template-columns: minmax(0, 1fr); }
  .fam:nth-child(even) .fam-art { order: 0; }
  .fam-art { max-width: 440px; }
}
@media (max-width: 520px) { .fam dl { grid-template-columns: minmax(0, 1fr); } }

/* Three words (mission) ---------------------------------------------------- */
.words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.words > div { padding: clamp(22px, 3vw, 36px); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); background: var(--paper-2); min-width: 0; }
.words > div:nth-child(1) { background: var(--lemon); } .words > div:nth-child(2) { background: var(--rose); } .words > div:nth-child(3) { background: var(--sky); }
.words .w { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: .9; letter-spacing: -.03em; font-variation-settings: "wdth" 72; color: var(--ink); margin: 0 0 var(--s2); }
.words p { margin: 0; }
@media (max-width: 900px) { .words { grid-template-columns: minmax(0, 1fr); } }

/* One-line principle band -------------------------------------------------- */
.principle { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 4.6rem); max-width: 14em; margin-inline: auto; }
.principle em { font-style: normal; color: var(--red); }

/* Numbered standards ------------------------------------------------------- */
.std { display: grid; gap: var(--s3); }
.std article { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3); padding: clamp(22px, 3vw, 34px); background: var(--paper-2); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); scroll-margin-top: calc(var(--header-h) + 16px); min-width: 0; }
.std .n { font-family: var(--display); font-weight: 900; font-size: 2rem; color: var(--red); line-height: 1; font-variation-settings: "wdth" 80; }
.std h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.std .stack p { max-width: 40em; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
a.pill:hover { text-decoration: none; background: var(--sun); }
@media (max-width: 600px) { .std article { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }

/* Links inside dark tiles, and the empty corrections log ------------------- */
.tile.ink .link-arrow { color: var(--paper); }
.tile.ink .link-arrow .arrow { color: var(--sun); }
.table-wrap.log table.data { min-width: 0; }

/* Mailboxes ---------------------------------------------------------------- */
.mailbox .addr { font-family: var(--display); font-weight: 900; font-size: clamp(1.1rem, .9rem + .9vw, 1.5rem); color: var(--ink); overflow-wrap: anywhere; line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "wdth" 80; display: inline-block; }
.mailbox .addr:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .14em; }
.mailbox p { font-size: var(--fs-small); }

/* Facts list (privacy) ----------------------------------------------------- */
.facts { display: grid; gap: var(--s2); }
.facts > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--s2); padding: 16px 0; border-top: 1.5px solid var(--line); }
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts b { color: var(--ink); }
.facts p { margin: 0; }
@media (max-width: 600px) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Centred forms inside .center blocks -------------------------------------- */
.center .inline-form { margin-inline: auto; }
.center .form-msg { max-width: 540px; margin-inline: auto; }

/* Quiet rows of small facts under a hero ----------------------------------- */
.facts-row { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-top: var(--s3); }
.facts-row span::before { content: "✦"; color: var(--red); margin-right: 8px; }

/* Honest-state panel ------------------------------------------------------- */
.truth { background: var(--paper-2); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--red); padding: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; }
.truth .seal { width: 84px; height: 84px; border-radius: 50%; background: var(--sun); border: var(--bw) solid var(--ink); display: grid; place-content: center; text-align: center; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: .78rem; line-height: .95; transform: rotate(-8deg); font-variation-settings: "wdth" 80; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.truth h3 { margin-bottom: 8px; }
@media (max-width: 600px) { .truth { grid-template-columns: minmax(0, 1fr); } .truth .seal { display: none; } }

/* Motion: stop everything we added under reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  .night-sun .sunwheel { animation: none !important; }
}

/* Standards on wide screens: heading left, text right, so each card hugs its text */
@media (min-width: 981px) {
  .std .body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s2) clamp(24px, 4vw, 64px); align-items: start; }
  .std .body h2 { margin-bottom: 0; }
}