/* ============================================================
   CSS Reset
   ============================================================ */

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

a, abbr, address, article, aside, audio, b, blockquote, body, canvas, cite, code,
dd, del, details, div, dl, dt, em, embed, fieldset, figcaption, figure, footer,
form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, ins, kbd, label, legend,
li, main, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section,
small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time,
tr, u, ul, var, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section { display: block; }

body { line-height: 1; }

menu, ol, ul { list-style: none; }

a { text-decoration: none; color: inherit; }

button { appearance: none; background: transparent; border: 0; border-radius: 0; cursor: pointer; font-family: inherit; font-size: inherit; color: inherit; }

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

/* ============================================================
   Design Tokens — Light Theme (default)
   ============================================================ */

:root {
  --font-size-body: 12.5px;
  --font-size-button: var(--font-size-body);
  --font-size-date: 22px;
  --font-size-heading: var(--font-size-body);
  --border-radius: 10px;
  --spacing: 9px;
  --background: #f8f8f8;
  --text-color-heading: #000;
  --text-color-body: #3f3f3f;
  --text-color-link-hover: #000;
  --module-bg-color: #e9e9e9;
  --module-bg-color-hover: #e0e0e0;
  --switch-bg-color: #e9e9e9;
  --switch-knob-color: #fff;
}

/* ============================================================
   Design Tokens — Dark Theme
   ============================================================ */

[data-theme="dark"] {
  --background: #000;
  --text-color-heading: #e9e9e9;
  --text-color-body: #9b9b9b;
  --text-color-link-hover: #707070;
  --module-bg-color: #222;
  --module-bg-color-hover: #2e2e2e;
  --switch-bg-color: #222;
  --switch-knob-color: #444;
}

/* ============================================================
   Base Styles
   ============================================================ */

html {
  background-color: var(--background);
  color: var(--text-color-body);
  font-family: sf-pro-text, 'Inter', sans-serif;
  font-size: var(--font-size-body);
}

body { line-height: 1.2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5, h6 { color: var(--text-color-heading); font-weight: 600; }

.layout { display: flex; }

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {
  padding: var(--spacing);
  overflow: hidden;
  flex: 1 1 auto;
}

@media (min-width: 701px) {
  .sidebar {
    flex: 0 0 360px;
    height: 100vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
  }
  .sidebar::-webkit-scrollbar { width: 0; }
  .header { margin-bottom: 46px; padding-top: 66px; }
  .site-name { margin-bottom: 32px; }
}

/* ============================================================
   Header
   ============================================================ */

.header {
  margin-bottom: 46px;
  padding-top: 66px;
  position: relative;
  text-align: center;
}

/* Show All Projects pill */
.pill {
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--module-bg-color);
  border-radius: 28px;
  height: 28px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-button);
  color: var(--text-color-body);
  letter-spacing: -0.028em;
  line-height: 1;
  width: auto;
}

/* Dark mode toggle switch */
.switch {
  position: absolute;
  right: 0;
  top: 0;
  width: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--switch-bg-color);
  border-radius: 31px;
  padding: 2px;
}

.switch-knob {
  width: 24px;
  height: 24px;
  background-color: var(--switch-knob-color);
  border-radius: 27px;
  transform: translateX(-12px);
  transition: transform 0.3s;
  display: block;
}

.switch[aria-checked="true"] .switch-knob {
  transform: translateX(12px);
}

/* Site name */
.site-name { display: block; margin-bottom: 32px; }
.wordmark {
  color: var(--text-color-heading);
  fill: var(--text-color-heading);
  width: 124px;
  height: auto;
}

/* Clock */
.date-time {
  font-family: sf-pro-display, 'Inter', sans-serif;
  font-size: var(--font-size-date);
  color: var(--text-color-heading);
  line-height: 1.18;
  letter-spacing: 0.01455em;
}

/* ============================================================
   Feed Cards
   ============================================================ */

.feed-item { cursor: pointer; }

.feed-item-inner {
  background-color: var(--module-bg-color);
  border-radius: var(--border-radius);
  padding: 13px 12px;
  margin: 8px auto;
}

.feed-item-inner:hover {
  background-color: var(--module-bg-color-hover);
}


.feed-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  color: var(--text-color-body);
}

.feed-item-more { color: var(--text-color-body); }

.feed-item-body { display: flex; }

.feed-item-title {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-color-heading);
  letter-spacing: -0.0015em;
  margin-bottom: 0;
}

.feed-item-thumbnail {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  margin-right: 15px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--background);
}

.feed-item-thumbnail img,
.feed-item-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Content Area
   ============================================================ */

.content { display: none; }

@media (min-width: 701px) {
  .content {
    display: block;
    flex: 0 0 calc(100% - 360px);
    overflow-y: auto;
    height: 100vh;
    padding: var(--spacing);
    padding-left: 0;
  }
  .content::-webkit-scrollbar { width: 0; }
}

/* ============================================================
   Landing Video
   ============================================================ */

.landing-video {
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 0;
  padding-bottom: 66.6667%;
  background-color: #0a0a0a;
  position: relative;
}

.landing-video video,
.landing-video img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slideshow: all slides hidden, active one visible */
.slideshow-slide {
  opacity: 0;
  pointer-events: none;
}

.slideshow-slide.slideshow-active {
  opacity: 1;
  pointer-events: auto;
}

.landing-video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: var(--font-size-date);
  letter-spacing: 0.05em;
}

/* ============================================================
   News Feed (desktop — masonry columns below hero)
   ============================================================ */

.news-feed {
  columns: 3;
  column-gap: var(--spacing);
  margin-top: var(--spacing);
}

.news-card {
  display: block;
  background-color: var(--module-bg-color);
  border-radius: var(--border-radius);
  padding: 13px 12px;
  break-inside: avoid;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
}

a.news-card:hover {
  background-color: var(--module-bg-color-hover);
  transition: background-color 0.15s;
}

.news-card-date {
  font-size: var(--font-size-body);
  color: var(--text-color-body);
  line-height: 1.2;
  margin-bottom: 10px;
}

.news-card-heading {
  font-size: 22px;
  font-weight: 400;
  color: var(--text-color-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

.news-card-body {
  font-size: var(--font-size-body);
  color: var(--text-color-body);
  line-height: 1.2;
  margin-bottom: 15px;
}

.news-card-body:last-child {
  margin-bottom: 0;
}

.news-card-image {
  overflow: hidden;
}

.news-card-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: 3 → 2 → 1 columns (matching Porto breakpoints) */
@media (min-width: 1101px) and (max-width: 1400px) {
  .news-feed { columns: 2; }
}

@media (max-width: 1100px) {
  .news-feed { columns: 1; }
}

/* Mobile: desktop news-feed is hidden (content area hidden), news renders inline in sidebar */
.news-inline { display: none; }

@media (max-width: 700px) {
  /* When news is expanded: show inline cards, hide the feed card itself */
  .feed-item.news-expanded .feed-item-inner {
    display: none;
  }

  .feed-item.news-expanded .show-less-pill {
    display: none;
  }

  .feed-item.news-expanded .news-inline {
    display: block;
  }

  .news-inline .news-card {
    display: block;
    margin-bottom: var(--spacing);
  }

  /* When news is expanded, hide all other feed items */
  #feed.news-active .feed-item:not(.news-expanded) {
    display: none;
  }

  /* News expanded: hide wordmark+clock, kill dead space above pill/toggle */
  .sidebar.news-active .site-name,
  .sidebar.news-active .date-time {
    display: none !important;
  }

  .sidebar.news-active .header {
    padding-top: 0;
    margin-bottom: 32px;
    min-height: 28px;
  }
}

/* ============================================================
   Project View
   ============================================================ */

.project-hero {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: var(--spacing);
  background-color: var(--module-bg-color);
}

.project-hero img,
.project-hero video {
  width: 100%;
  height: auto;
  display: block;
}

.project-title-section {
  padding: var(--spacing) 0;
}

.project-title-section h2 {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-color-heading);
}

.project-title-section p {
  color: var(--text-color-body);
  margin-top: 4px;
}

.project-image {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: var(--spacing);
}

.project-image img,
.project-image video {
  width: 100%;
  height: auto;
  display: block;
}

.project-split {
  display: flex;
  gap: var(--spacing);
  margin-bottom: var(--spacing);
  aspect-ratio: 16 / 10;
}

.project-split-image {
  flex: 0 0 calc(50% - var(--spacing) / 2);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.project-split-image img,
.project-split-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-video {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: var(--spacing);
  background-color: var(--module-bg-color);
}

.project-video video {
  display: block;
  width: 100%;
  height: auto;
}

/* Tap to unmute */
.tap-unmute {
  position: relative;
  cursor: pointer;
}

.tap-unmute-icon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 6px;
  transition: opacity 0.2s;
}

.tap-unmute-icon svg {
  width: 100%;
  height: 100%;
}

.tap-unmute.is-unmuted .tap-unmute-icon {
  opacity: 0.6;
}

.tap-unmute.is-unmuted .tap-unmute-icon:hover {
  opacity: 1;
}

/* Plyr theme overrides — global */
.plyr {
  --plyr-color-main: rgba(0, 0, 0, 0.6);
}

.plyr--video {
  background: var(--module-bg-color);
  border-radius: 0;
}

.plyr__control--overlaid {
  padding: 18px;
}

.plyr--full-ui input[type=range] {
  color: #fff;
}

.plyr__controls {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.plyr__controls__item.plyr__control,
.plyr__controls__item.plyr__time {
  color: #fff;
}


/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 700px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; }
  .content { display: none; width: 100%; padding: var(--spacing); }
  .content.mobile-active { display: block; }
  .sidebar.mobile-hidden { display: none; }
  .mobile-back {
    display: flex;
    align-items: center;
    border-radius: 28px;
    height: 28px;
    padding: 12px;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--text-color-heading);
    cursor: pointer;
  }
}

@media (min-width: 701px) {
  .mobile-back { display: none; }
}

/* ============================================================
   Inline Sidebar Expansion (mobile-only, Porto Rocha style)
   ============================================================ */

/* Show Less pill + inline containers — hidden by default */
.show-less-pill { display: none; }
.about-inline { display: none; }
.project-inline { display: none; }

/* Mobile: show inline expansion when expanded */
@media (max-width: 700px) {
  .feed-item.about-expanded .show-less-pill,
  .feed-item.project-expanded .show-less-pill {
    display: flex;
    float: right;
    background-color: var(--module-bg-color);
    border-radius: 20px;
    padding: 7px 9px;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-button);
    color: var(--text-color-body);
    cursor: pointer;
    margin-bottom: 8px;
    line-height: 1;
  }

  .show-less-pill:hover {
    background-color: var(--module-bg-color-hover);
  }

  .show-less-pill svg {
    width: 8px;
    height: 5px;
  }

  .feed-item.about-expanded .feed-item-more,
  .feed-item.project-expanded .feed-item-more {
    display: none;
  }

  .feed-item.about-expanded .feed-item-inner,
  .feed-item.project-expanded .feed-item-inner {
    clear: both;
  }

  .feed-item.about-expanded .about-inline {
    display: block;
    clear: both;
  }

  .feed-item.project-expanded .project-inline {
    display: block;
    clear: both;
  }
}

/* Card used inside inline about and content area about */
.about-card {
  background-color: var(--module-bg-color);
  border-radius: var(--border-radius);
  padding: 13px 12px;
  margin: 8px auto;
}

.about-card h2 {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-color-heading);
  margin-bottom: 10px;
}

.about-card p {
  color: var(--text-color-body);
  line-height: 1.2;
}

.about-card p + p { margin-top: 0; }

.about-card h3 {
  font-weight: 600;
  color: var(--text-color-heading);
  margin-top: 1.2em;
}

.about-card h3:first-child { margin-top: 0; }

.about-card a {
  color: var(--text-color-body);
  line-height: 1.5;
}

.about-card a:hover {
  color: var(--text-color-heading);
}

/* Portable Text inline styles */
.about-card strong { font-weight: 600; }
.about-card em { font-style: italic; }
.about-card ul, .about-card ol { margin-top: 0.5em; padding-left: 1.5em; }
.about-card ul { list-style: disc; }
.about-card ol { list-style: decimal; }
.about-card li { margin-top: 0.25em; line-height: 1.5; }
.about-card blockquote { border-left: 2px solid var(--text-color-body); padding-left: 1em; margin-top: 0.5em; }

/* Column layouts */
.about-columns {
  display: flex;
  gap: var(--spacing);
}

.about-columns > div {
  flex: 1;
  min-width: 0;
}

/* 2-column layout: 60/40 split (Porto style) */
.about-columns > div:first-child:nth-last-child(2) {
  flex: 0 0 60%;
  padding-right: 60px;
}

.about-columns > div:first-child:nth-last-child(2) ~ div {
  flex: 0 0 calc(40% - var(--spacing));
}

.about-columns a {
  display: block;
}

@media (max-width: 700px) {
  .about-columns {
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .about-columns > div:first-child:nth-last-child(2) {
    flex: 1;
    padding-right: 0;
  }
  .about-columns > div:first-child:nth-last-child(2) ~ div {
    flex: 1;
  }
}

/* Image card (3:2 ratio matching Porto Rocha's slideshow images) */
.about-image-card {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 8px auto;
  background-color: var(--module-bg-color);
  position: relative;
}

.about-image-card .aspect-spacer {
  width: 100%;
  padding-bottom: 66.6667%;
}

.about-image-card img,
.about-image-card video {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   About — Page-Level Layout (Porto-style 2/3 + 1/3)
   ============================================================ */

.about-layout {
  display: flex;
  align-items: flex-start;
}

.about-left {
  flex: 0 0 66.6667%;
  padding-right: var(--spacing);
  overflow: hidden;
}

.about-right {
  flex: 0 0 33.3333%;
}

@media (max-width: 1100px) {
  .about-layout {
    display: block;
  }

  .about-left {
    padding-right: 0;
  }
}

/* ============================================================
   Scroll + Selection
   ============================================================ */

html { scroll-behavior: smooth; }

::selection {
  background-color: var(--text-color-heading);
  color: var(--background);
}