/* ==========================================================================
   Aachman's Website — shared styles for every page
   --------------------------------------------------------------------------
   1. Fonts
   2. Colours (light + dark mode)       <- change colours here
   3. Basics
   4. Header / navigation
   5. Shared building blocks (rows, titles, text)
   6. Work cards (Artrivi / Leadnics / PeakEaze)
   7. Page-specific bits (home, about, art, what-am-i-doing, case studies)
   8. Footer
   9. Mobile tweaks
   ========================================================================== */


/* 1. FONTS ---------------------------------------------------------------- */

/* Sansman — Aachman's own typeface, all 7 weights */
@font-face { font-family: "Sansman"; src: url("fonts/sansman-thin.woff2") format("woff2");      font-weight: 100; font-display: swap; }
@font-face { font-family: "Sansman"; src: url("fonts/sansman-light.woff2") format("woff2");     font-weight: 300; font-display: swap; }
@font-face { font-family: "Sansman"; src: url("fonts/sansman-regular.woff2") format("woff2");   font-weight: 400; font-display: swap; }
@font-face { font-family: "Sansman"; src: url("fonts/sansman-medium.woff2") format("woff2");    font-weight: 500; font-display: swap; }
@font-face { font-family: "Sansman"; src: url("fonts/sansman-bold.woff2") format("woff2");      font-weight: 700; font-display: swap; }
@font-face { font-family: "Sansman"; src: url("fonts/sansman-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Sansman"; src: url("fonts/sansman-black.woff2") format("woff2");     font-weight: 900; font-display: swap; }
@font-face {
  font-family: "Aspekta";
  src: url("fonts/aspekta-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
/* Serifman — Aachman's own serif, 5 weights with italics */
@font-face { font-family: "Serifman"; src: url("fonts/serifman-light.woff2") format("woff2");           font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-regular.woff2") format("woff2");         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-medium.woff2") format("woff2");          font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-semibold.woff2") format("woff2");        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-bold.woff2") format("woff2");            font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-light-italic.woff2") format("woff2");    font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-regular-italic.woff2") format("woff2");  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-medium-italic.woff2") format("woff2");   font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-semibold-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Serifman"; src: url("fonts/serifman-bold-italic.woff2") format("woff2");     font-weight: 700; font-style: italic; font-display: swap; }
/* "Bad Script" (the handwriting font on the About page) is loaded from
   Google Fonts in about/index.html */


/* 2. COLOURS -------------------------------------------------------------- */

:root {
  --background: #ffffff;
  --text: #262626;
  --muted: #8a8a8a;          /* grey text, e.g. "Art & Science Museum, Singapore" */
  --line: #4f4f4f40;         /* thin divider lines */
  --card: #000000;           /* background behind the work logos */
  --panel-soft: #f2f2f2;     /* light grey panels, e.g. "I'm writing" */

  --page-gutter: 32px;       /* space on the left/right edge of the page */
  --gap: 16px;               /* space between columns */
}

/* Dark mode: used automatically when the visitor's device is in dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --text: #e5e5e5;
    --muted: #7a7a7a;
    --line: #80808080;
    --card: #121212;
    --panel-soft: #161616;
  }
}


/* 3. BASICS --------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--text);
  font-family: "Sansman", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.6; }

main { padding: 0 var(--page-gutter); }

.muted { color: var(--muted); }


/* 4. HEADER / NAVIGATION -------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--page-gutter);
  background: var(--background);
}

.site-header nav {
  display: flex;
  gap: 32px;
}

/* The ☰ button only shows on small screens (see section 9) */
.menu-button {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}


/* 5. SHARED BUILDING BLOCKS ----------------------------------------------- */

/* A "row" is a full-width band with a thin line on top and two halves:
   a small label on the left and the content on the right. */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  border-top: 1px solid var(--line);
  padding: 16px 0 120px;
}

/* The big title band at the top of most pages */
.page-title {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: 260px;
  padding: 16px 0 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 64px;
}
.page-title .note { padding-left: 33%; }   /* the small grey note on the right */

.big-title {
  font-weight: 500;
  font-size: 80px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

/* Normal paragraphs inside the right-hand column */
.text p + p { margin-top: 24px; }
.text { max-width: 680px; }


/* 6. WORK CARDS ----------------------------------------------------------- */

.work-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.work-card .info {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.work-card .image {
  aspect-ratio: 3 / 2;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.work-card .image img {
  height: 80%;
  width: auto;
  transition: transform 0.4s ease;
}

/* Typeface cards show big letters instead of a logo image */
.work-card .type-thumb {
  color: #fff;
  font-size: 120px;
  letter-spacing: -0.05em;
  font-weight: 100;
  transition: font-weight 0.4s ease;
}

/* Wide logos (e.g. Thrones of Gandhar) fit by width instead of height */
.work-card .image img.wide { width: 80%; height: auto; }

.work-card:hover { opacity: 1; }
.work-card:hover .image img { transform: scale(1.08); }
.work-card:hover .type-thumb { font-weight: 900; }


/* 7. PAGE-SPECIFIC BITS --------------------------------------------------- */

/* --- Home: intro with photo --- */
.intro {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 80px;
  align-items: center;
  min-height: 100vh;
  padding-top: 120px;
}
.intro .photo img { width: 100%; }
.intro .photo p:first-of-type { margin-top: 8px; }
.intro .hello { font-size: 40px; line-height: 1; }
.intro .spare-time { font-size: 24px; margin-top: 48px; }

/* --- Home: "Selected Work 2026" heading --- */
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin: 120px 0 64px;
}
.section-heading .big-title { display: flex; justify-content: space-between; align-items: end; }

/* --- Home: "I'm writing / listening / reading" ---
   Swiss-style: three equal columns in one row, each hung from a
   heavy rule. The heading leads; note, content and link follow. */
.influences { margin: 240px 0; }
.influences-head {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  font-size: 16px;
  margin-bottom: 64px;
}
.influences-head p:last-child { text-align: right; }

.influence-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.influence {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-top: 2px solid var(--text);
  padding-top: 20px;
}
.influence:hover { opacity: 1; }
.influence-body { flex: 1; }

.influence-title {
  font-weight: 500;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.influence-note { font-size: 16px; color: var(--muted); max-width: 320px; }
.influence-link {
  font-size: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.influence-link .arrow { display: inline-block; transition: transform 0.3s ease; }
a.influence:hover .arrow,
a.influence-link:hover .arrow { transform: translateX(6px); }
a.influence-link:hover { opacity: 1; }

.spotify { border: 0; border-radius: 12px; display: block; margin-top: 16px; }

.influence-preview { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
.influence-preview li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.influence-preview li:last-child { border-bottom: 0; }

/* --- Reading list page --- */
.reading-head, .reading-item {
  display: grid;
  grid-template-columns: 80px 1fr 200px 120px;
  gap: var(--gap);
  align-items: baseline;
}
.reading-head { font-size: 14px; color: var(--muted); padding-bottom: 8px; }
.reading-list { border-top: 2px solid var(--text); }
.reading-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s ease, background 0.3s ease;
}
.reading-item:hover { opacity: 1; background: var(--panel-soft); padding-left: 16px; padding-right: 16px; }
.reading-num { font-weight: 100; font-size: 48px; line-height: 0.9; letter-spacing: -0.04em; }
.reading-title { font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.04em; }
.reading-desc { margin-top: 12px; max-width: 560px; color: var(--muted); font-size: 18px; }
.reading-desc:empty { display: none; }
.reading-source, .reading-topic { font-size: 16px; }
.reading-topic { color: var(--muted); }
.reading-count { margin: 32px 0 200px; }

/* --- About --- */
.profile-photo { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.about-name { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); }

.i-am-word {
  font-family: "Bad Script", cursive;
  font-size: 80px;
  color: var(--muted);
  margin-top: 16px;
  min-height: 1.4em;
}

.clients-labels { display: grid; grid-template-columns: 1fr 1fr; }
.client-logo {
  width: 240px;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 48px 0 0 32px;
  mix-blend-mode: multiply;   /* hides the logo's white square in light mode */
}
@media (prefers-color-scheme: dark) {
  .client-logo { mix-blend-mode: normal; border-radius: 4px; }
}
.client-names { list-style: none; font-size: 53px; line-height: 0.9; letter-spacing: -0.04em; }

/* --- Art --- */
.art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px var(--gap);
  padding-bottom: 120px;
}
.art-grid img {
  margin-top: 8px;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

/* --- What am I doing --- */
.story { padding-bottom: 160px; }
.story img { width: 85%; margin: 0 auto 16px; }
.story .text { margin-left: 50%; max-width: 600px; font-size: 16px; }
.poem { font-family: "Serifman", Georgia, serif; font-weight: 500; }

/* --- Case studies (Artrivi, Leadnics, PeakEaze) --- */
.case-title {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  margin-top: 260px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.case-image { width: 100%; margin: 64px 0 16px; }
.case-text { margin-left: 50%; max-width: 680px; padding-bottom: 32px; }
.case-text p + p { margin-top: 24px; }
.next-work .work-card { max-width: 452px; }

/* Case study extras (Thrones of Gandhar): a facts strip, a two-up
   image pair, a small table and a ruled list. Same grid and rules
   as the rest of the site. */
.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  border-top: 2px solid var(--text);
  padding: 16px 0 0;
  margin: 120px 0;
  font-size: 16px;
}
.case-facts p + p { margin-top: 8px; }

.case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin: 0 0 16px;
}
.case-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.case-pair + .case-text { margin-top: 32px; }
.case-pair figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; max-width: 520px; }

.case-list { list-style: none; margin-top: 24px; border-top: 1px solid var(--line); }
.case-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }

.case-table { margin: 0 0 48px 50%; max-width: 680px; border-top: 2px solid var(--text); font-size: 16px; }
.case-table > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.case-table > div p:last-child { font-weight: 500; }
.case-table .case-table-head { color: var(--muted); }
.case-table .case-table-head p:last-child { font-weight: inherit; }

/* --- UI/UX: other projects gallery --- */
.gallery { columns: 2; column-gap: var(--gap); padding-bottom: 120px; }
.gallery img { width: 100%; margin-bottom: var(--gap); break-inside: avoid; }


/* 8. FOOTER --------------------------------------------------------------- */

.site-footer { padding: 0 var(--page-gutter) 24px; }

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.footer-email {
  display: block;
  margin: 160px 0 24px;
  font-size: 7.5vw;
  letter-spacing: -0.05em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.footer-bottom { display: flex; justify-content: space-between; }


/* 9. MOBILE TWEAKS (screens narrower than 810px) -------------------------- */

@media (max-width: 810px) {
  :root { --page-gutter: 16px; }
  body { font-size: 16px; }

  /* Navigation becomes a ☰ menu */
  .menu-button { display: block; font-size: 24px; }
  .site-header nav {
    display: none;
    position: fixed;
    inset: 72px 0 0 0;
    flex-direction: column;
    gap: 16px;
    padding: 24px var(--page-gutter);
    background: var(--background);
    font-size: 32px;
  }
  .site-header.menu-open nav { display: flex; }

  /* Everything stacks into one column */
  .row, .page-title, .section-heading, .intro, .case-title,
  .footer-links, .about-name, .clients-labels { grid-template-columns: 1fr; }
  .work-list, .art-grid { grid-template-columns: 1fr; }
  .gallery { columns: 1; }

  .big-title { font-size: 48px; }
  .page-title, .case-title { margin-top: 120px; }
  .page-title .note { padding-left: 0; }
  .intro { min-height: 0; gap: 32px; }
  .intro .hello { font-size: 32px; }
  .intro .spare-time { font-size: 20px; }
  .intro .photo { order: 2; width: 60%; }
  .section-heading { gap: 16px; }
  .influences { margin: 120px 0; }
  .influences-head, .influence-list { grid-template-columns: 1fr; }
  .influences-head { margin-bottom: 32px; }
  .influences-head p:last-child { text-align: left; }
  .influence-list { gap: 64px; }
  .influence-title { font-size: 40px; }
  .reading-head { display: none; }
  .reading-item { grid-template-columns: 48px 1fr; row-gap: 8px; }
  .reading-source, .reading-topic { grid-column: 2; }
  .reading-num { font-size: 32px; }
  .reading-title { font-size: 28px; }
  .i-am-word { font-size: 56px; }
  .client-names { font-size: 36px; margin-top: 24px; }
  .client-logo { width: 160px; margin: 24px 0; }
  .story img { width: 100%; }
  .story .text, .case-text { margin-left: 0; }
  .case-facts, .case-pair { grid-template-columns: 1fr; }
  .case-facts { margin: 64px 0; row-gap: 24px; }
  .case-table { margin-left: 0; font-size: 14px; }
  .footer-links { font-size: 28px; gap: 24px; }
  .footer-email { margin-top: 96px; font-size: 7.1vw; }
  .footer-bottom { flex-direction: column-reverse; gap: 8px; }
}