/* UTS Product Design Graduates
   Values measured from the live Squarespace site (1440px viewport, 26 Sept 2026).
   Font: Proxima Nova via Adobe Fonts when a kit ID is set in src/_data/site.js; Albert Sans otherwise.
   Single light theme, as on the live site. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #666666;      /* body copy, captions, quotes */
  --head: #121212;      /* titles and headings */
  --black: #000000;     /* site subtitle, card titles */
  --nav: #808080;       /* main navigation */
  --nav2: #1f1f1f;      /* archive navigation */
  --red: #c20000;       /* current page, current sort */
  --btn: #272727;
  --soft: #f2f2f2;
  --sans: "proxima-nova", "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --gut: 34px;          /* Squarespace 7.0 grid: 17px padding each side of every block */
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.6 var(--sans); letter-spacing: .02em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.poc { margin: 0; padding: 7px 16px; background: var(--soft); color: var(--text); font-size: 12px; text-align: center; }

/* ---------- frame: 80px margin, 190px fixed sidebar, 20px gap, content up to 863px ---------- */
.canvas { display: grid; grid-template-columns: 190px minmax(0, 863px); column-gap: 20px; max-width: 1233px; padding: 80px; }
.side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 80px); align-self: start; }
.logo img { display: block; width: 150px; height: auto; }
.logo-sub { margin: 13px 0 0; color: var(--black); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: .04em; }
.menu > summary { display: none; }
.nav-main { display: flex; flex-direction: column; margin-top: 30px; }
.nav-main a { padding: 3.2px 0; color: var(--nav); font-size: 16px; font-weight: 500; line-height: 25.6px; letter-spacing: normal; }
.nav-main a:hover { color: var(--head); }
.nav-main a.on { color: var(--red); }
.nav-arch { display: flex; flex-direction: column; margin-top: 20px; }
.nav-arch a { padding: 2.6px 0; color: var(--nav2); font-size: 13px; line-height: 20.8px; }
.nav-arch a:hover, .nav-arch a.on { color: var(--red); }
.page { min-width: 0; padding-top: 17px; }
.copy { margin: var(--gut) 0 0; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; color: var(--head); font-weight: 500; letter-spacing: normal; text-wrap: balance; }
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 20.8px; line-height: 1.2; }
h3 { font-size: 15.6px; line-height: 1.2; }
p { margin: 0 0 14px; }
.btn { display: inline-block; padding: 13px 26px; border: 2px solid var(--btn); color: var(--btn); font-size: 12px; font-weight: 600; line-height: 17px; letter-spacing: 1px; text-transform: uppercase; }
.btn:hover { background: var(--btn); color: var(--bg); }
.btn-sm { padding: 10px 22px; }
.btn-row { margin: var(--gut) 0 0; }
.btn-row.center { text-align: center; }
.btn-row.right { text-align: right; }
.btn-row.two { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gut); }  /* previous year: buttons side by side, centred */

/* ---------- student page ---------- */
.student { display: flex; flex-direction: column; gap: var(--gut); }
.student > .btn-row { margin: 0; }
.title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gut); }
.title h1 { margin-bottom: 26px; }
.title .subtitle { margin: -14px 0 26px; color: var(--head); font-size: 20.8px; font-weight: 500; line-height: 1.2; letter-spacing: normal; }
.socials { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.socials a { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--black); color: var(--black); }
.socials a:hover { background: var(--black); color: var(--bg); }
.socials svg { width: 14px; height: 14px; }
/* share row at the end of each student page (no third-party service) */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.share-label { color: var(--head); font-size: 15.6px; font-weight: 500; letter-spacing: normal; }
.share button { font: inherit; background: none; cursor: pointer; padding: 0; }
.share .share-copy { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--black); color: var(--black); }
.share .share-copy:hover { background: var(--black); color: var(--bg); }
.share-native { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px !important; border: 1px solid var(--black); color: var(--black); font-size: 12px !important; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.share-native[hidden], .share-links[hidden] { display: none; }
.share-native svg { width: 14px; height: 14px; }
.share-done { color: var(--text); font-size: 12px; }
.full figure, .pair figure { margin: 0; }
.full img, .pair img { display: block; width: 100%; height: auto; }
/* small round logos some 2020–2021 students had next to their name or bio (Squarespace 1- and 2-column image blocks) */
.badge { display: block; height: auto; }
.title .badge { margin-top: 20px; }
.badge-row { margin: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); align-items: start; }
.pair.equal { grid-template-columns: var(--cols); } /* "row": "equal": both images whole at the same height */
figcaption { margin: 18px 0 12px; color: var(--text); font-size: 12px; line-height: 1.68; }
.t-b6 figcaption { font-size: 14px; line-height: 1.6; }
.text h2 { margin-bottom: 20.8px; }
.text p:last-of-type { margin-bottom: 0; }
.text .pn { margin-top: 29.6px; font-size: 15.6px; }
.text .pn a { color: var(--head); }
.text .pn a:hover { color: var(--red); }
.text.half { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); align-items: start; }
.aside blockquote, .card blockquote { margin: 0; color: var(--text); font: italic 400 21px/1.6 var(--serif); letter-spacing: .02em; }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--soft); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- cohort index ---------- */
.index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 17px; }
.index-head h1 { font-weight: 700; }
.sort { margin: 0; color: var(--nav); font-size: 15.6px; font-weight: 500; letter-spacing: normal; }
.sort a { color: var(--nav); }
.sort a:hover { color: var(--black); }
.sort-current { color: var(--red); }
.index-foot { display: flex; justify-content: flex-end; margin-top: var(--gut); }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mosaic a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--soft); }
.mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mosaic .tip { position: absolute; inset: auto 0 0 0; padding: 8px 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; line-height: 1.3; opacity: 0; transition: opacity .2s; }
.mosaic a:hover .tip, .mosaic a:focus-visible .tip { opacity: 1; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); align-items: start; }  /* rows: cards side by side, tops aligned */
.card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }  /* one shape for every card */
.card-title { margin: 20px 0 0; color: var(--black); font-size: 26px; font-weight: 700; line-height: 1.1; }
.card-name { margin: 8px 0 20px; color: var(--black); font-size: 21px; font-weight: 500; line-height: 1; letter-spacing: normal; }
.card blockquote { margin-top: var(--gut); }
.names { display: grid; grid-template-columns: 2fr 4fr 1fr 5fr; column-gap: 0; padding-top: 17px; }
.names ul { margin: 0; padding: 0; list-style: none; }
.names ul:first-child { grid-column: 2; }
.names ul:last-child { grid-column: 4; }
.names li { margin-bottom: 21px; }
.names a:hover { color: var(--red); }

/* ---------- home (as the live Squarespace homepage, Oct 2026): one slideshow with a thumbnail strip,
   two buttons, then the introduction and acknowledgements between grey rules ---------- */
.home { max-width: 639px; }
/* carousel: one image per swipe, every image the same 16:9 box (cropped to fill, centred on the image's focus) */
.slider { position: relative; margin-top: -17px; }  /* starts at the top of the content area, as the live slideshow */
.track { position: relative; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track a { flex: none; width: 100%; aspect-ratio: 16 / 9; scroll-snap-align: center; background: var(--bg); }  /* white around images shown whole */
.track img { display: block; width: 100%; height: 100%; object-fit: cover; }
.track a.whole img { object-fit: contain; }  /* "show the whole image": white space instead of cropping */
.slider.moving .track { scroll-snap-type: none; } /* scripted slide in progress */
/* arrows as on the live galleries: 44 x 60 box, faint dark tint, white chevron */
.arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 60px; padding: 0; border: 0; background: rgba(0, 0, 0, .12); color: #fff; cursor: pointer; transition: background-color .2s cubic-bezier(.25, .46, .45, .94); }
.arrow:hover { background: rgba(0, 0, 0, .35); }
.arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.arrow.prev { left: 0; } .arrow.next { right: 0; }
.slider.single .arrow { display: none; }
.home .btn-row { margin-top: var(--gut); }
.btn-dark { padding: 21px 34px; border: 0; background: var(--btn); color: var(--bg); font-size: 15px; line-height: 21px; }
.btn-dark:hover { background: var(--btn); color: var(--bg); opacity: .8; }
.home hr { height: 1px; margin: 48px 0; border: 0; background: #bbb; }
/* same 48px spacing when a grey line is switched off (site editor: Homepage) */
.home .intro { margin-top: 48px; }
.home hr + .intro { margin-top: 0; }
.home > .intro:last-child { margin-bottom: 48px; }
.intro p:last-child { margin-bottom: 0; }
.intro .ack { margin: 0 0 26px; font-weight: 700; }
.intro h3 { margin: 15.6px 0 15.6px; font-weight: 700; }
/* homepage sections added in the site editor (content/home.json "sections"); spacing as the rest of the homepage */
.home > .slider:not(:first-child) { margin-top: var(--gut); }  /* a carousel lower down the page */
.home > .intro:first-child, .home > .btn-row:first-child, .home > .home-img:first-child { margin-top: 0; }
.home-img { margin: var(--gut) 0 0; }
.home-img img { display: block; width: 100%; height: auto; }
.home-img.wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.home-img figcaption { margin-bottom: 0; }
.home-img .img-empty { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--soft); color: #a0a0a0; }
.home .spacer { height: 48px; }
.home .spacer.s { height: 24px; }
.home .spacer.l { height: 96px; }

/* ---------- phones (live site: 20px margins, small logo, Menu link) ---------- */
@media (max-width: 800px) {
  .canvas { display: block; padding: 20px; }
  .side { position: relative; top: 0; margin-bottom: 54px; }
  .logo img { width: 80px; }
  .logo-sub { margin-top: 13px; max-width: 255px; }
  .menu > summary { display: block; position: absolute; top: 0; right: 0; color: var(--text); font-size: 16px; list-style: none; cursor: pointer; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { color: var(--red); }
  .nav-main { margin-top: 24px; }
  .title-row { flex-direction: column-reverse; align-items: flex-end; gap: 17px; }
  .title-row .title { align-self: stretch; }
  .pair, .pair.equal, .text.half, .cards { grid-template-columns: minmax(0, 1fr); row-gap: var(--gut); }
  .aside blockquote { margin-top: 0 !important; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .names { grid-template-columns: minmax(0, 1fr); }
  .names ul:first-child, .names ul:last-child { grid-column: 1; }
  .home { max-width: none; }
  .slider { margin-top: -29px; }  /* live phone layout: slideshow 17px below the top of the content area */
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* year introduction pages (migrated) */
.intro-page { display: flex; flex-direction: column; gap: var(--gut); max-width: 598px; }
.intro-page img { display: block; width: 100%; height: auto; }
.intro-page p, .intro-page h1, .intro-page h2, .intro-page h3 { margin: 0; }
/* contact page */
.contact { display: flex; flex-direction: column; gap: var(--gut); max-width: 640px; }
.contact h1 { margin-bottom: 26px; }
.contact h2 { margin: 30px 0 16px; }
.contact .copytext a { color: var(--head); text-decoration: underline; }
.contact > .btn-row { margin: 0; }
.contact-email { margin: 0; }
.contact-email a { color: var(--head); }
/* mailing list page: the Microsoft Form shown inside the page */
.form-embed { display: block; width: 100%; border: 0; }