/* Alpha60 season report.
   Colours are sampled from alpha60.com.au: #303234 ink, #CCC8C6 and #E7E3DF
   warm greys, #F3EFEC paper. The one accent, a muted oxblood, comes from the
   AW26 photography and is used only for the revenue line and for warnings.

   Type is the brand's own pairing. ABC Diatype is loaded from Alpha60's own
   licensed CDN rather than copied into this project, so if that ever moves the
   page falls back to Assistant, which the site also uses. */

@font-face {
  font-family: 'ABCDiatype';
  src: url('https://www.alpha60.com.au/cdn/shop/t/387/assets/ABCDiatype-Regular.woff2?v=5561109062559576631753235186') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ABCDiatype';
  src: url('https://www.alpha60.com.au/cdn/shop/t/387/assets/ABCDiatype-Medium.woff2?v=151890551741830742821753235185') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ABCDiatype';
  src: url('https://www.alpha60.com.au/cdn/shop/t/387/assets/ABCDiatype-Bold.woff2?v=60337405117595853561753235184') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ABCDiatype';
  src: url('https://www.alpha60.com.au/cdn/shop/t/387/assets/ABCDiatype-Light.woff2?v=63185859227669276671753235184') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  --ink: #303234;
  --ink-soft: #5C5F62;
  --muted: #818181;
  --line: #E7E3DF;
  --line-firm: #CCC8C6;
  --paper: #F3EFEC;
  --card: #FFFFFF;
  --accent: #7A2E1E;
  --accent-soft: #F4EAE6;
  --sans: 'ABCDiatype', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --w: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 28px 72px; }

/* The loading line shown while the report is fetched. It is replaced by the
   report itself, so it only ever appears for a moment. */
.loading {
  max-width: 1120px; margin: 0 auto; padding: 54px 28px;
  color: var(--muted); font-size: 14px;
}

/* ------------------------------------------------------------- password gate.
   The gate was removed on 3 September 2026. These rules are kept because
   putting it back is a revert rather than a rewrite. */

.gate {
  min-height: 100vh; display: grid; place-items: center;
  padding: 28px; background: var(--paper);
}
.gate-card {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid var(--line); padding: 44px 38px 38px; text-align: center;
}
.gate-card img { width: 132px; height: auto; margin-bottom: 30px; }
.gate-card h1 {
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 8px;
}
.gate-card .hint { color: var(--muted); font-size: 13px; margin: 0 0 26px; }
.gate-card input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-firm);
  background: var(--card); font: inherit; font-size: 14px; color: var(--ink);
  margin-bottom: 12px;
}
.gate-card input:focus { outline: none; border-color: var(--ink); }
.gate-card button {
  width: 100%; padding: 12px; border: 0; background: var(--ink); color: #fff;
  font: inherit; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}
.gate-card button:hover { background: #000; }
.gate-card button:disabled { opacity: 0.55; cursor: default; }
.gate-card .err { color: var(--accent); font-size: 13px; min-height: 20px; margin: 12px 0 0; }

/* ----------------------------------------------------------------- masthead */

.toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0 0; font-size: 13px;
}
.toolbar .spacer { flex: 1; }
.toolbar label { color: var(--muted); }
.toolbar select {
  font: inherit; padding: 7px 10px; border: 1px solid var(--line-firm);
  background: var(--card); color: var(--ink);
}
.toolbar .print {
  font: inherit; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--ink); background: none;
  color: var(--ink); cursor: pointer;
}
.toolbar .print:hover { background: var(--ink); color: #fff; }

.masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 54px 0 26px; border-bottom: 1px solid var(--ink);
  flex-wrap: wrap;
}
.masthead .client-logo { width: 190px; height: auto; }
.masthead .meta { text-align: right; }
.masthead .doc-kind {
  margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.masthead .period { margin: 4px 0 0; font-size: 26px; font-weight: 300; letter-spacing: -0.01em; }
.masthead .range { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------- tabs */

.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line-firm);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 16px 22px 14px; cursor: pointer; text-align: left; font: inherit;
  color: var(--muted); margin-bottom: -1px; white-space: nowrap;
}
.tab .tl {
  display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.tab .ts { display: block; font-size: 12px; margin-top: 3px; opacity: 0.75; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.panel { padding-top: 8px; }

/* ----------------------------------------------------------------- sections */

section { padding: 40px 0; border-bottom: 1px solid var(--line); }
section:last-child { border-bottom: 0; }

h2 {
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 18px; color: var(--ink);
}
.sub-h {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 34px 0 12px;
}
.lede { font-size: 17px; font-weight: 300; line-height: 1.55; margin: 0 0 24px; }
/* Commentary runs the full width of the page, same as the tables it sits
   under, so a paragraph and the figures it describes line up. */
.prose { max-width: none; }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }

/* ------------------------------------------------------------------ banners */

.banner {
  display: flex; gap: 16px; align-items: baseline;
  padding: 16px 20px; margin: 26px 0 0; background: var(--card);
  border-left: 2px solid var(--line-firm);
}
.banner.sand { border-left-color: var(--accent); background: var(--accent-soft); }
.banner .flag {
  flex: 0 0 auto; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500;
}
.banner p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.banner.sand p { color: var(--ink); }

/* --------------------------------------------------------------------- KPIs */

.kpis { display: grid; gap: 1px; background: var(--line); margin: 26px 0 0; }
.kpis.four { grid-template-columns: repeat(4, 1fr); }
.kpi { background: var(--card); padding: 22px 20px; }
.kpi .label {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.kpi .value { font-size: 27px; font-weight: 300; letter-spacing: -0.02em; margin: 8px 0 2px; }
.kpi .sub { font-size: 12.5px; color: var(--muted); }
.kpis.quiet .kpi .value { font-size: 21px; }

/* -------------------------------------------------------------------- chart */

.chart-card { background: var(--card); padding: 26px 24px 18px; margin: 26px 0 0; }
.chart-card .ct {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.chart-card svg { width: 100%; height: auto; display: block; }
.legend {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px;
  font-size: 12px; color: var(--muted);
}
.legend span { display: flex; align-items: center; gap: 7px; }
.legend .sw { width: 11px; height: 11px; display: inline-block; }
.legend .sw.google { background: #303234; }
.legend .sw.meta { background: #CCC8C6; }
.legend .sw.line { height: 2px; width: 16px; background: var(--accent); }
.cnote { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------- tables */

.tbl-wrap { overflow-x: auto; margin: 0 0 4px; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--ink); background: var(--card);
}
th.n, td.n { text-align: right; }
td.lbl { white-space: normal; min-width: 190px; }
tbody tr:hover { background: #FAF8F6; }
tfoot td {
  font-weight: 500; border-top: 1px solid var(--ink); border-bottom: 0; background: #FAF8F6;
}

/* ----------------------------------------------------------------- callouts */

.callout {
  background: var(--card); border-left: 2px solid var(--ink); padding: 24px 26px;
}
.callout .ct {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; margin: 0 0 12px;
}
.callout p { margin: 0 0 12px; font-size: 14px; }
.callout .tbl-wrap { margin-top: 18px; }

.fault {
  background: var(--accent-soft); border-left: 2px solid var(--accent);
  padding: 20px 24px; margin: 20px 0 0;
}
.fault .flag {
  margin: 0; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.fault .ft { margin: 6px 0 0; font-size: 17px; font-weight: 300; }
.fault .fs { margin: 6px 0 12px; font-size: 13px; color: var(--ink-soft); }
.fault p:last-child { margin-bottom: 0; }
.fault .prose, .fault > p { font-size: 14px; }

/* ----------------------------------------------------------- creative grid */

.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px;
}
.shot { margin: 0; background: var(--card); display: flex; flex-direction: column; }
.shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.shot .noimg {
  width: 100%; aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 0 30px; background: var(--paper); color: var(--muted);
  font-size: 12px; line-height: 1.5;
}
.shot .noimg span {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.shot figcaption { padding: 16px 18px 18px; }
.shot .nm { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.shot .tags { margin: 8px 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.shot .tag {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; background: var(--ink); color: #fff;
}
.shot .tag.alt { background: none; color: var(--ink-soft); border: 1px solid var(--line-firm); }
.shot dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.shot dl > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.shot dt { font-size: 11px; color: var(--muted); }
.shot dd { margin: 0; font-size: 12.5px; font-weight: 500; }

/* -------------------------------------------------------------- status board */

.board { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.col { background: var(--card); }
.col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--ink);
}
.col-head .t { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.col-head .n { font-size: 12px; color: var(--muted); }
.items { list-style: none; margin: 0; padding: 0; }
.items li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.items li:last-child { border-bottom: 0; }
.items .tick { color: var(--muted); margin-right: 8px; }
.items .when { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.chip {
  flex: 0 0 auto; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--line-firm); color: var(--ink-soft);
}
.chip.isadora { border-color: var(--ink); color: var(--ink); }
.chip.client { background: var(--ink); color: #fff; border-color: var(--ink); }

.steps { margin: 0; padding-left: 20px; }
.steps li { margin-bottom: 12px; }

/* ------------------------------------------------------------------- footer */

footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 34px 0 0; margin-top: 30px; border-top: 1px solid var(--line-firm);
  flex-wrap: wrap;
}
footer .ib-logo { height: 34px; width: auto; }
footer .fine { margin: 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .kpis.four { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .board { grid-template-columns: 1fr; }
  .masthead { padding-top: 34px; }
  .masthead .meta { text-align: left; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px 48px; }
  .kpis.four { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .masthead .period { font-size: 22px; }
}

/* ------------------------------------------------------------------ printing */

/* Every panel opens for print, so a PDF carries the whole report rather than
   whichever tab happened to be showing. */
@media print {
  body { background: #fff; }
  .toolbar, .tabs, .gate { display: none !important; }
  .panel[hidden] { display: block !important; }
  .wrap { max-width: none; padding: 0; }
  section { break-inside: avoid; }
  .shot, .kpi, .chart-card, .callout, .fault { break-inside: avoid; }
  .tbl-wrap { overflow: visible; }
}