/* ==========================================================
   HOME PAGE
   Loaded after the live styles and system.css. Layout and
   components for the portfolio home page only.
========================================================== */

/* ----------------------------------------------------------
   1. HOME: HEADLINE LAYER
   Tokens, textures, and the accent split live in system.css.
---------------------------------------------------------- */

/* Pure white headline layer (dark theme), for contrast against body text. */
html[data-theme="dark"] .masthead__name,
html[data-theme="dark"] .rw-heading h2,
html[data-theme="dark"] .case-list h3,
html[data-theme="dark"] .shot h3,
html[data-theme="dark"] .bookshelf__list cite,
html[data-theme="dark"] .rw-about__lede {
  color: var(--headline);
}

/* Dark theme blurb a step brighter than the other soft grey text. */
html[data-theme="dark"] .masthead__intro {
  color: #dcdfe0;
}


/* ----------------------------------------------------------
   2. TYPE + SPACING SCALE
   Smaller display sizes and a steadier rhythm (8px-based).
---------------------------------------------------------- */

.masthead {
  --mast-pad-top: 72px;
  --name-size: clamp(3rem, 5vw, 4.25rem);
  /* Minimum room reserved for the portrait beside the blurb. */
  --portrait-col: 300px;
  --intro-max: 820px;

  position: relative;
  grid-template-columns: minmax(0, 1fr) var(--portrait-col);
  gap: 48px;
  min-height: 0;
  padding: var(--mast-pad-top) 0 40px;
}

/* On wide screens the portrait stays pinned to the right edge of the
   content column, in line with the menu band and sections below, so
   extra width falls between the blurb (capped at --intro-max) and the
   photo instead of leaving a heavy right margin. */
@media (min-width: 1051px) {
  .masthead__content {
    max-width: none;
  }
}

/* Portrait stands on the menu band and runs up to the top of the page.
   The PNG's transparent left margin sits in the 48px gap, so the
   visible silhouette still clears the bio. */
.masthead__portrait {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
}

/* Sized by height; width follows the image's 984:917 ratio. The grid
   column (--portrait-col) reserves room for it beside the text. */
.masthead__portrait .portrait-image {
  width: auto;
  height: 100%;
}

.masthead__name {
  margin-bottom: 20px;
  font-family: "Gloock", Georgia, serif;
  font-size: var(--name-size);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
}


.masthead__intro {
  max-width: var(--intro-max);
  /* Avoid stranded last lines like a lone ":)". */
  text-wrap: pretty;
  margin-bottom: 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
}

/* Menu band under the header: a full-bleed 15% black tint instead of
   rules above and below. */
.masthead {
  border-bottom: 0;
}

.rw-nav {
  gap: 12px 28px;
  padding: 18px 0;
  background: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.15);
  clip-path: inset(0 -100vmax);
}

.rw-nav + main > .rw-section:first-child {
  border-top: 0;
}

.rw-nav a,
.rw-nav .theme-toggle {
  top: 0;
}


/* Menu, contact links, and footer in the accent (text step). */
.rw-nav a,
.rw-nav .theme-toggle,
.about-panel__links a,
.site-footer {
  color: var(--accent-text);
}

/* Theme toggle in a lighter tint of the light theme's orange,
   softened so it doesn't vibrate against the dark band. */
.rw-nav .theme-toggle {
  color: #f5946f;
}

/* Light theme: toggle (reads "Dark theme") in the theme's muted grey,
   and the menu band is a soft, transparent dirty orange. */
html:not([data-theme="dark"]) .rw-nav .theme-toggle {
  color: var(--muted);
}

html:not([data-theme="dark"]) .rw-nav {
  background: rgba(190, 112, 62, 0.12);
  box-shadow: 0 0 0 100vmax rgba(190, 112, 62, 0.12);
}

.rw-nav .theme-toggle:hover,
.rw-nav .theme-toggle:focus-visible {
  color: var(--text);
}

.eyebrow {
  margin-bottom: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}


/* ----------------------------------------------------------
   3. SECTIONS
---------------------------------------------------------- */

.rw-section {
  padding: 64px 0;
  border-top: 1px solid var(--border);
}

/* Headings: the masthead's Gloock at section scale, no ornaments. */
.rw-heading {
  margin-bottom: 32px;
}

.rw-heading h2 {
  margin: 0;
  font-family: "Gloock", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.rw-heading--split {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-end;
  justify-content: space-between;
}

.rw-heading--split .filter-bar {
  margin-bottom: 2px;
}


/* ----------------------------------------------------------
   4. CASE STUDIES: text-led 2x2, no fake image tiles
---------------------------------------------------------- */

.case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-list a {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 16px;
  height: 100%;
  padding: 24px 0 28px;
  border-top: 1px solid var(--border);
}

.case-list a > * {
  grid-column: 2;
}

.case-list__icon {
  grid-column: 1 !important;
  grid-row: 1 / span 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
}

.case-list__icon svg {
  width: 14px;
  height: 14px;
}

.case-list__meta,
.case-list__tags {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-list h3 {
  margin: 8px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  transition: color 180ms ease;
}

.case-list p {
  max-width: 52ch;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.case-list a:hover h3,
.case-list a:focus-visible h3 {
  color: var(--accent-text);
}



/* ----------------------------------------------------------
   5. PORTFOLIO: image-led; filter by what was built
---------------------------------------------------------- */

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}

.shot {
  min-width: 0;
}

.shot a {
  display: block;
}

/* Signature motif: the portrait's cut-paper offset. On hover the image
   lifts up and right, revealing an accent silhouette on the left. */
.shot__img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  border-radius: 2px;
  background: var(--surface-secondary);
  box-shadow: 0 0 0 var(--accent);
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.shot a:hover .shot__img,
.shot a:focus-visible .shot__img {
  transform: translate(4px, -4px);
  box-shadow: -8px 6px 0 var(--accent);
}

.shot__img img {
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.shot a:hover .shot__img img {
  transform: scale(1.03);
}

.shot__meta {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shot h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  transition: color 180ms ease;
}

.shot a:hover h3,
.shot a:focus-visible h3 {
  color: var(--accent-text);
}

.shot__tags {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}


/* ----------------------------------------------------------
   6. ABOUT + CONDENSED BOOKSHELF
---------------------------------------------------------- */

.rw-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  padding-bottom: 80px;
}

.rw-about__lede {
  margin-bottom: 24px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-style: italic;
}

.rw-about__main p:not(.eyebrow):not(.rw-about__lede) {
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.7;
}

.bookshelf {
  padding-top: 48px;
  border-top: 1px solid var(--border);
}

.bookshelf__list {
  margin: 0;
  list-style: none;
  columns: 2;
  column-gap: 56px;
}

.bookshelf__list li {
  break-inside: avoid;
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.bookshelf__list cite {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.02rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
}

.bookshelf__list span {
  flex: none;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: uppercase;
}


/* ----------------------------------------------------------
   7. RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 1050px) {
  /* Portrait moves to the left and stays large; the name and blurb wrap
     around its cut-out silhouette (shape-outside follows the PNG's alpha).
     Flow layout instead of grid so the float can shape the text. */
  .masthead {
    --portrait-h: 280px;
    display: flow-root;
    padding-bottom: 0;
  }

  .masthead__portrait {
    display: contents;
  }

  .masthead__portrait .portrait-image {
    float: left;
    width: auto;
    height: var(--portrait-h);
    /* top: level with the name's letters; left: pull the PNG's transparent
       margin (~11% of its height) out so the green edge meets the gutter */
    margin: calc(var(--name-size) * 0.0875) 8px 0 calc(var(--portrait-h) * -0.113);
    object-fit: initial;
    shape-outside: url("../images/portrait3-dark.png");
    shape-image-threshold: 0.4;
    shape-margin: 20px;
  }

  .masthead__intro {
    margin-bottom: 40px;
  }

  .shelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .masthead {
    --mast-pad-top: 48px;
    --name-size: clamp(2.4rem, 10.5vw, 3rem);
    --portrait-h: 200px;
    padding-bottom: 0;
  }

  .masthead__portrait .portrait-image {
    shape-margin: 12px;
  }

  .masthead__intro {
    margin-bottom: 28px;
  }

  .masthead__name {
    line-height: 1.02;
  }

  .masthead__intro {
    font-size: 0.95rem;
  }

  .rw-section {
    padding: 48px 0;
  }

  .rw-heading {
    margin-bottom: 24px;
  }

  .rw-heading h2 {
    font-size: 1.5rem;
  }

  /* live responsive.css hides filters outside its old accordion */
  .rw-heading--split .filter-bar {
    display: flex;
    justify-content: flex-start;
    margin: 0;
  }

  .case-list {
    grid-template-columns: 1fr;
  }

  .case-list h3 {
    font-size: 1.3rem;
  }

  .shelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }

  .shot h3 {
    font-size: 1.05rem;
  }

  .bookshelf__list {
    columns: 1;
  }
}


/* ----------------------------------------------------------
   8. MOBILE MENU TRAY (≤760px)
   The menu band becomes a tray in the CTA color that lives above the
   top of the screen. A tab hangs from its bottom edge; tapping it
   pulls the tray (and the tab with it) down. mobile-menu.js closes it
   on any link, outside tap, or Escape.
   Text on the tray is #141414 in both themes: 10.3:1 on the teal,
   6.1:1 on the orange (white on the orange would be only 3.0:1).
---------------------------------------------------------- */

.menu-tab {
  display: none;
}

@media (max-width: 760px) {
  html[data-theme] .rw-nav--tray {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 20px var(--page-padding) 24px;
    background: var(--accent);
    box-shadow: none;
    clip-path: none;
    visibility: hidden;
    transform: translateY(-100%);
    transition:
      transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 320ms ease,
      visibility 0s linear 320ms;
  }

  html[data-theme] .rw-nav--tray.is-open {
    visibility: visible;
    transform: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition:
      transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 320ms ease,
      visibility 0s;
  }

  /* 48px rows: comfortably above the 44px minimum touch target. */
  html[data-theme] .rw-nav--tray a,
  html[data-theme] .rw-nav--tray .theme-toggle {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
    color: #141414;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
  }

  html[data-theme] .rw-nav--tray .theme-toggle {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid rgba(20, 20, 20, 0.2);
    width: 100%;
    text-align: left;
    opacity: 0.75;
  }

  html[data-theme] .rw-nav--tray a::after {
    display: none;
  }

  /* The tab hangs from the tray's bottom edge, so it rides along. */
  .menu-tab {
    position: absolute;
    top: 100%;
    right: var(--page-padding);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 120px;
    min-height: 52px;
    padding: 4px 22px 6px;
    border: 0;
    border-radius: 0 0 10px 10px;
    background: var(--accent);
    color: #141414;
    font: 600 0.82rem/1 "Inter", sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    visibility: visible;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .menu-tab__chevron {
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 220ms ease;
  }

  .rw-nav--tray.is-open .menu-tab__chevron {
    margin-top: 3px;
    transform: rotate(225deg);
  }

  .menu-tab:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  /* Room for the tab above the name. */
  .masthead {
    --mast-pad-top: 76px;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html[data-theme] .rw-nav--tray,
  html[data-theme] .rw-nav--tray.is-open {
    transition: none;
  }
}


/* ----------------------------------------------------------
   9. COLLAPSIBLE SECTIONS (≤760px)
   Each heading is a button (mobile-sections.js). Above 760px the button
   is disabled and styled as plain heading text; on phones the whole
   heading row is the tap target, with a chevron that flips when open.
---------------------------------------------------------- */

.section-toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}

.section-toggle:disabled {
  color: inherit;
  cursor: inherit;
  opacity: 1;
}

.section-toggle__chevron {
  display: none;
}

@media (max-width: 760px) {
  .section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 48px;
    cursor: pointer;
  }

  .section-toggle:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 4px;
  }

  .section-toggle__chevron {
    display: block;
    flex: none;
    width: 11px;
    height: 11px;
    margin: -6px 6px 0 0;
    border-right: 2px solid var(--accent-text);
    border-bottom: 2px solid var(--accent-text);
    transform: rotate(45deg);
    transition: transform 220ms ease, margin 220ms ease;
  }

  .section-toggle[aria-expanded="true"] .section-toggle__chevron {
    margin-top: 6px;
    transform: rotate(225deg);
  }

  /* Every collapsible unit gets the same rule and rhythm. */
  .rw-about {
    gap: 0;
    padding: 0;
  }

  .rw-section:not(.rw-about),
  .rw-about__main,
  .bookshelf {
    padding: 14px 0;
    border-top: 1px solid var(--border);
  }

  .rw-nav + main > .rw-section:first-child {
    border-top: 1px solid var(--border);
  }

  /* Jumps from the menu land below the pinned tab (52px). */
  .rw-section,
  .rw-about__main,
  .bookshelf {
    scroll-margin-top: 64px;
  }

  .rw-section:not(.rw-about):not(.is-collapsed),
  .rw-about__main:not(.is-collapsed),
  .bookshelf:not(.is-collapsed) {
    padding-bottom: 40px;
  }

  .is-collapsed > .rw-heading {
    margin-bottom: 0;
  }

  /* The portfolio heading shares a flex row with its filters. */
  .rw-heading--split h2 {
    flex: 1 1 100%;
  }

  .is-collapsed > .section-body,
  .is-collapsed > .rw-heading .filter-bar {
    display: none !important;
  }

  .site-footer {
    border-top: 1px solid var(--border);
  }
}


/* ----------------------------------------------------------
   10. DESIGN SYSTEM CALLOUT
   One link to the design-system page. Sits directly under the menu
   band on desktop and tablet; on phones it moves to the end of <main>,
   just above the footer. Icon tile matches the case-study icon,
   scaled up, with a palette glyph.
---------------------------------------------------------- */

.ds-callout {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 0;
}

.ds-callout__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-contrast);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ds-callout__icon svg {
  width: 26px;
  height: 26px;
}

.ds-callout__text {
  display: grid;
  gap: 4px;
}

.ds-callout__title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  transition: color 180ms ease;
}

.ds-callout__sub {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ds-callout:hover .ds-callout__title,
.ds-callout:focus-visible .ds-callout__title {
  color: var(--accent-text);
}

.ds-callout:hover .ds-callout__icon,
.ds-callout:focus-visible .ds-callout__icon {
  transform: rotate(15deg);
}

html[data-theme="dark"] .ds-callout__title {
  color: var(--headline);
}

html[data-theme="dark"] .ds-callout:hover .ds-callout__title,
html[data-theme="dark"] .ds-callout:focus-visible .ds-callout__title {
  color: var(--accent-text);
}

/* The callout takes the first slot, so Case Studies gets its rule back:
   a 3px strip in the menu band's color, echoing the band above. (At 1px
   the band tint is invisible on the dark background.) */
.ds-callout + .rw-section {
  border-top: 3px solid rgba(190, 112, 62, 0.12);
}

html[data-theme="dark"] .ds-callout + .rw-section {
  border-top-color: rgba(0, 0, 0, 0.15);
}

@media (max-width: 760px) {
  main:has(> .ds-callout) {
    display: flex;
    flex-direction: column;
  }

  main > .ds-callout {
    order: 99;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 0 36px;
    border-top: 1px solid var(--border);
  }

  .ds-callout__title {
    font-size: 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-callout__icon {
    transition: none;
  }
}