/*
Theme Name: Southern Cross
Theme URI: https://southerncrossdigital.com.au/
Author: Southern Cross Digital
Description: Deliberately minimal dark theme for Southern Cross Digital. No page builder, no framework, no build step. Content lives in WordPress pages so it stays editable in the admin and readable over the REST API. The previous stack could white-screen the whole site; there is almost nothing here to break.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: southern-cross
*/

/* ==============================================================
   SOUTHERN CROSS — black ground, one pink.

   Committed single-theme design: there is no light mode, so every
   colour is painted explicitly and nothing is left to inherit.

   The visual metaphor is an instrument readout, not a brochure —
   monospace carries every number, hairlines separate every cell,
   and the one accent is spent on the thing you're meant to act on.
   ============================================================== */

:root{
  --ground:#0B0B0F;
  --surface:#15151D;
  --raised:#1D1D27;
  --edge:#2A2A38;
  --hair:#20202B;

  --ink:#F4F2F7;
  --ink-2:#C9C6D6;
  --body:#918EA1;
  --faint:#868399;   /* was #67647A — 3.44:1 on the ground, which fails AA.
                        These are the small uppercase labels on every stat
                        cell, so it was the smallest text on the site sitting
                        at the worst contrast. #868399 clears 4.5:1 against
                        ground, surface AND raised. */

  --pink:#FF2E88;
  --pink-deep:#C21F66;
  --pink-ink:#0B0B0F;
  --pink-wash:rgba(255,46,136,.10);

  --good:#35D69A;
  --warn:#F5A65B;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground)}
body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Layout primitives ---- */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:640px}
.pad{padding:clamp(60px,9vw,120px) 0}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.stack-lg{display:flex;flex-direction:column;gap:40px}
section{border-top:1px solid var(--hair)}
.no-rule{border-top:none}

/* ---- Type ---- */
h1,h2,h3,h4{
  font-family:Archivo,"Arial Narrow",system-ui,sans-serif;
  color:var(--ink);
  text-wrap:balance;
  margin:0;
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.02;
}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.2rem;letter-spacing:-.012em;line-height:1.25}
h4{font-size:1rem;letter-spacing:0}
p{margin:0}
a{color:inherit}
em{color:var(--ink-2)}
strong{color:var(--ink);font-weight:600}

.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pink);
}
.lede{font-size:1.24rem;color:var(--ink-2);line-height:1.5}
.fine{font-size:.86rem;color:var(--body)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ---- Buttons.
   Offset shadows disappear on black, so the device here is a solid
   pink slab against a hairline ghost. ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--pink);color:var(--pink-ink);
  font-family:Archivo,sans-serif;font-weight:800;font-size:1rem;
  letter-spacing:-.01em;text-decoration:none;
  padding:16px 28px;border:2px solid var(--pink);
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.btn:hover,.btn:focus-visible{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.btn-ghost{
  background:transparent;color:var(--ink);
  border-color:var(--edge);
}
.btn-ghost:hover,.btn-ghost:focus-visible{background:transparent;border-color:var(--pink);color:var(--pink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---- Nav ---- */
.nav{
  border-bottom:1px solid var(--hair);
  background:rgba(11,11,15,.88);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:15px 24px;max-width:1080px;margin:0 auto;
}
.brand{
  font-family:Archivo,sans-serif;font-weight:800;color:var(--ink);
  text-decoration:none;letter-spacing:-.03em;font-size:1.02rem;
  display:flex;align-items:center;gap:11px;line-height:1;
}
.brand .mark{
  width:28px;height:28px;flex:none;
  background:var(--pink);color:var(--pink-ink);
  display:grid;place-items:center;
}
.nav-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav-links a{
  text-decoration:none;color:var(--body);
  font-family:"JetBrains Mono",monospace;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 0;border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--pink)}
.nav-links a[aria-current="page"]{color:var(--pink);border-bottom-color:var(--pink)}
.nav-cta{
  text-decoration:none;font-family:Archivo,sans-serif;font-weight:800;
  font-size:.88rem;background:var(--pink);color:var(--pink-ink);
  border:2px solid var(--pink);padding:10px 18px;white-space:nowrap;
  transition:background .14s ease;
}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--pink-deep);color:#fff}

/* ---- Hero ---- */
.hero{border-top:none;position:relative;overflow:hidden}
/* A single wash behind the headline. No gradient hero, no glow. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 12% 0%,var(--pink-wash),transparent 60%);
  pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:60px;align-items:center;position:relative;
}
.hero .lede{max-width:34ch}
.cred{
  font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.02em;
  color:var(--faint);border-left:2px solid var(--pink);padding-left:14px;line-height:1.65;
}
/* Portrait.
   The photograph is very dark along its top edge, and a 1px --edge border
   on a near-black ground is invisible, so the image was dissolving into the
   page and reading as a flat square.

   Fixed with an offset frame rather than a drop shadow: this site has square
   corners, hairlines and flat fills throughout, and a soft shadow would be
   the one blurred thing on it. An offset rule is a print device — it says
   the photo was placed, not dropped in.

   height:auto is load-bearing. The img width/height attributes map to a
   presentational height rule, and aspect-ratio is ignored unless height
   is auto — without this the hero renders at the file's full pixel height. */
.hero-grid picture{
  position:relative;
  display:block;
  isolation:isolate;
}

/* The frame sits down and to the right, so it reads as depth without
   moving the image off the grid line the headline is aligned to. */
.hero-grid picture::before{
  content:"";
  position:absolute;
  inset:20px -20px -20px 20px;
  border:1px solid var(--pink);
  z-index:0;
  pointer-events:none;
}

.portrait{
  position:relative;z-index:1;
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  background:var(--surface);
  /* A lifted edge the dark photograph cannot swallow, plus a hairline of
     ground colour so the frame behind never touches the image itself. */
  border:1px solid var(--faint);
  outline:6px solid var(--ground);
  outline-offset:0;
  filter:grayscale(.25) contrast(1.05);
}

/* Below the breakpoint the grid is one column and the image goes full
   width — an outward offset would push the page sideways, so the frame
   turns inward and tightens. */
@media (max-width:860px){
  .hero-grid picture{max-width:420px}
  .hero-grid picture::before{inset:14px -14px -14px 14px}
}
@media (max-width:520px){
  .hero-grid picture::before{inset:10px -10px -10px 10px}
}

/* ---- Docket: the instrument readout ---- */
.docket{border:1px solid var(--edge);background:var(--surface)}
.docket-head{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:baseline;
  padding:12px 20px;background:var(--pink);
}
.docket-head span{
  font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-ink);font-weight:700;
}
.readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.readout-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cell{padding:26px 20px;border-right:1px solid var(--hair)}
.cell:last-child{border-right:none}
.cell .k{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
.cell .v{
  font-family:"JetBrains Mono",monospace;font-weight:700;
  font-size:clamp(1.55rem,3.4vw,2.3rem);color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:8px;line-height:1;
}
.cell .d{
  font-family:"JetBrains Mono",monospace;font-size:.76rem;
  color:var(--good);margin-top:9px;font-variant-numeric:tabular-nums;
}
.cell .d.flat{color:var(--faint)}

/* The one hero number — used once per page, never twice. */
.bignum{
  font-family:"JetBrains Mono",monospace;font-weight:700;
  font-size:clamp(3.2rem,10vw,6.5rem);line-height:.9;
  color:var(--pink);font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}

/* ---- Evidence image ---- */
.evidence{margin:0;display:flex;flex-direction:column;gap:12px}
.evidence img{
  display:block;width:100%;height:auto;
  border:1px solid var(--edge);background:var(--surface);
}
.evidence figcaption{
  font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.04em;
  color:var(--faint);line-height:1.6;
}

/* ---- Grids ---- */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.item{border-top:1px solid var(--pink);padding-top:18px;display:flex;flex-direction:column;gap:9px}
.item p{font-size:.97rem}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--edge)}
.step{padding:28px 24px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:11px}
.step:last-child{border-right:none}
.step .n{
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.72rem;
  color:var(--pink);letter-spacing:.16em;
}

/* ---- Quotes ---- */
blockquote{
  margin:0;padding:26px;background:var(--surface);border:1px solid var(--hair);
  display:flex;flex-direction:column;gap:16px;
}
blockquote p{font-size:.99rem;color:var(--ink-2)}
blockquote cite{
  font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}

/* ---- Fit lists ---- */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.fit ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:11px;font-size:1rem}
.fit li::marker{color:var(--pink)}

/* ---- Case study ---- */
.case{border:1px solid var(--edge);background:var(--surface);display:flex;flex-direction:column}
.case-head{
  padding:22px;border-bottom:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline;
}
.case-head h3{font-size:1.55rem}
.case-tag{
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink);
  border:1px solid var(--pink);padding:5px 10px;white-space:nowrap;
}
.case-body{padding:26px 22px;display:flex;flex-direction:column;gap:26px}
.case-body p{font-size:1rem}
.case-body .docket{background:var(--raised)}

.beat{display:grid;grid-template-columns:120px minmax(0,1fr);gap:26px;align-items:start}
.beat > .label{
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pink);padding-top:6px;
}
.beat .content{display:flex;flex-direction:column;gap:14px}

/* Numbered defect list. Markers are positioned, NOT grid columns —
   a grid list item turns each text run into its own grid item and
   spills prose into the marker column one word per line. */
.defects{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:20px;counter-reset:d}
.defects li{position:relative;padding-left:48px;font-size:1rem;counter-increment:d}
.defects li::before{
  content:counter(d,decimal-leading-zero);
  position:absolute;left:0;top:.3em;
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.78rem;
  color:var(--pink);font-variant-numeric:tabular-nums;
}
.defects b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}

.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:1rem}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{
  content:"→";position:absolute;left:0;top:0;color:var(--pink);font-weight:700;
}

.caveat{
  border-left:2px solid var(--warn);background:var(--raised);
  padding:18px 20px;font-size:.95rem;
}
.caveat b{color:var(--ink)}

/* ---- Search-term table ---- */
.table-scroll{overflow-x:auto}
.terms{width:100%;border-collapse:collapse;font-size:.97rem}
.terms th,.terms td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair)}
.terms th{
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:500;
}
.terms td{color:var(--ink-2)}
.terms td:last-child,.terms th:last-child{
  text-align:right;font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.terms tr:last-child td{border-bottom:none}

/* ---- Form ---- */
form.enquiry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field > .btn{align-self:flex-start}
label{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
input,select,textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--edge);padding:13px 15px;border-radius:0;width:100%;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--pink);outline:none}
select{appearance:none;background-image:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* ---- Footer ---- */
footer{border-top:1px solid var(--hair);padding:40px 0;font-size:.9rem}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:34px;
}
.foot-grid a{text-decoration:none;color:var(--body)}
.foot-grid a:hover{color:var(--pink)}
.foot-grid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-head{
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin-bottom:5px;
}

/* ---- WordPress bits ---- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--pink);color:var(--pink-ink);padding:12px 18px;
  font-family:"JetBrains Mono",monospace;font-size:.78rem;text-decoration:none;
}
.skip:focus{left:0}
.entry{display:flex;flex-direction:column;gap:22px}
.entry p{font-size:1.05rem}
.entry h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:18px}
.entry h3{font-size:1.2rem;margin-top:10px}
.entry ul,.entry ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.entry a{color:var(--pink)}
.entry img{max-width:100%;height:auto;border:1px solid var(--edge)}
.entry code{
  font-family:"JetBrains Mono",monospace;font-size:.9em;
  background:var(--raised);padding:2px 6px;color:var(--ink);
}
.page-numbers{
  font-family:"JetBrains Mono",monospace;font-size:.82rem;text-decoration:none;
  border:1px solid var(--edge);padding:9px 14px;color:var(--body);
}
.page-numbers.current,.page-numbers:hover{border-color:var(--pink);color:var(--pink)}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  body{font-size:17px}
  .hero-grid,.two,.three,.steps,.fit,form.enquiry{grid-template-columns:minmax(0,1fr)}
  .readout,.readout-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beat{grid-template-columns:minmax(0,1fr);gap:10px}
  .cell{border-bottom:1px solid var(--hair)}
  .cell:nth-child(even){border-right:none}
  .step{border-right:none;border-bottom:1px solid var(--hair)}
  .step:last-child{border-bottom:none}
  .nav{position:static}
  .nav-in{flex-wrap:wrap;gap:12px}
  .nav-links{order:3;width:100%;border-top:1px solid var(--hair);padding-top:12px;gap:18px}
}
@media (max-width:520px){
  .readout,.readout-4{grid-template-columns:minmax(0,1fr)}
  .cell{border-right:none}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}