.studio-updates {
  --paper: #ebe8e3;
  --sheet: #f2f0ec;
  --panel: #eceae6;
  --light: #f7f4ee;
  --ink: #3d3d39;
  --ink-soft: #6b6b66;
  --muted: #818178;
  --line: rgba(96, 88, 80, 0.24);
  --line-soft: rgba(96, 88, 80, 0.14);
  --grid: rgba(183, 176, 165, 0.2);
  --cta: #908077;
}

.studio-updates * { box-sizing: border-box; }

.studio-updates button { font: inherit; font-weight: 400; }
.studio-updates h1, .studio-updates h2, .studio-updates h3, .studio-updates p { margin-top: 0; }
.studio-updates a { color: inherit; }

.studio-updates .updates-wrap {
  max-width: 1460px;
  margin: 0 auto;
  padding: 40px 30px 76px;
}

.studio-updates .sheet {
  min-height: calc(100vh - 116px);
  padding: 44px 48px 42px;
  background: var(--sheet);
  border: 1px solid var(--line);
}

.studio-updates .masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
  padding-bottom: 42px;
}

.studio-updates .brand {
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-updates h1 {
  max-width: 870px;
  margin: 8px 0 0;
  font-family: "Viaoda Libre", serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.08;
}

.studio-updates .week {
  color: var(--ink-soft);
  font-size: 14px;
  text-align: right;
}

.studio-updates .week span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.studio-updates .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 16px;
}

.studio-updates .section-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-updates .section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.studio-updates .feature-card,
.studio-updates .update-row,
.studio-updates .filter-button,
.studio-updates .tool-door {
  --tool: #908077;
}

.studio-updates .library { --tool: #745b43; }
.studio-updates .edit { --tool: #403128; }
.studio-updates .frame { --tool: #55544c; }
.studio-updates .social { --tool: #6e7b83; }
.studio-updates .writer { --tool: #756f65; }
.studio-updates .concept { --tool: #8a8478; }
.studio-updates .postcard { --tool: #9e8378; }
.studio-updates .prompt { --tool: #908077; }
.studio-updates .proof { --tool: #7d6a5d; }
.studio-updates .zine { --tool: #6f7160; }
.studio-updates .studio { --tool: #908077; }

.studio-updates .feature-card {
  display: grid;
  grid-template-columns: minmax(310px, 0.82fr) minmax(420px, 1.18fr);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}

.studio-updates .feature-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  align-self: start;
  padding: 13px 22px;
  color: var(--light);
  background: var(--tool);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Copy and picture start on the same line; the picture sits at the right
   edge with the same breathing room as the copy has on the left. */
.studio-updates .feature-copy {
  align-self: start;
  padding: 38px 38px 38px;
}

.studio-updates .eyebrow {
  margin-bottom: 18px;
  color: var(--tool);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-updates .feature-copy h3 {
  max-width: 24ch;
  margin-bottom: 19px;
  font-family: "Viaoda Libre", serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.22;
}

/* Home14: the line under the title. Upright and muted, never italic. */
.studio-updates .feature-line {
  max-width: 62ch;
  margin: -7px 0 17px;
  color: var(--muted);
  font-size: 15px;
}

.studio-updates .feature-detail {
  max-width: 62ch;
  margin-bottom: 29px;
  color: var(--ink-soft);
  font-size: 15px;
}

.studio-updates .text-link {
  display: inline-block;
  padding-bottom: 3px;
  color: var(--tool);
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.studio-updates .text-link:hover { color: var(--ink); }

.studio-updates .seamless-preview {
  align-self: start;
  justify-self: end;
  margin: 38px 38px 34px 0;
}

.studio-updates .seamless-preview > img,
.studio-updates .seamless-preview > a > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
}

/* Same 460px height as the picture it replaces. The cover photo shows until
   the video is really playing, so an offline or slow video never shows a gap. */
/* The photo sizes the frame, so it narrows on a phone the way the old picture did. */
.studio-updates .feature-video {
  position: relative;
  overflow: hidden;
}

.studio-updates .feature-video > img {
  display: block;
  width: 345px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.studio-updates .feature-video > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.studio-updates .feature-video.is-playing > iframe { opacity: 1; }

.studio-updates .seamless-preview figcaption {
  text-align: center;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-updates .recent { margin-top: 62px; }
.studio-updates .recent-head { margin-bottom: 17px; }

.studio-updates .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.studio-updates .filter-button {
  min-height: 40px;
  padding: 8px 12px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
}

.studio-updates .filter-button:not(.all)::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: var(--tool);
  content: "";
}

.studio-updates .filter-button:hover,
.studio-updates .filter-button[aria-pressed="true"] {
  color: var(--light);
  background: var(--tool);
  border-color: var(--tool);
}

.studio-updates .filter-button:not(.all)[aria-pressed="true"]::before,
.studio-updates .filter-button:not(.all):hover::before { background: var(--light); }
.studio-updates .filter-button.all[aria-pressed="true"],
.studio-updates .filter-button.all:hover { background: var(--cta); border-color: var(--cta); }

/* Recent updates filters · the same attached tabs as the highlights above,
   sitting on one ink line. No tool squares (Kim, September 26); nothing fills with colour. */
.studio-updates .update-filters {
  gap: 6px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--ink);
}

.studio-updates .update-filters .filter-button {
  min-height: 0;
  margin-bottom: -1px;
  padding: 6.5px 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-updates .update-filters .filter-button:hover,
.studio-updates .update-filters .filter-button.all:hover {
  color: var(--ink);
  background: var(--sheet);
  border-color: var(--ink);
}

.studio-updates .update-filters .filter-button[aria-pressed="true"],
.studio-updates .update-filters .filter-button.all[aria-pressed="true"] {
  color: var(--ink);
  background: var(--sheet);
  border-color: var(--ink);
  border-bottom-color: var(--sheet);
}

.studio-updates .update-filters .filter-button:not(.all)::before { content: none; }

/* The chosen tool's tab wears that tool's colour, like the feature bar.
   ALL stays plain (Kim, September 26). */
.studio-updates .update-filters .filter-button:not(.all)[aria-pressed="true"] {
  color: var(--light);
  background: var(--tool);
  border-color: var(--tool);
  border-bottom-color: var(--tool);
}

/* Releases · the date once, in a label column, with its updates as ruled rows */
.studio-updates .release {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  column-gap: 44px;
  padding: 28px 0 26px;
  border-bottom: 1px solid var(--line);
}

.studio-updates .release-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
  padding-top: 2px;
}

.studio-updates .release-date {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-updates .release-count {
  color: var(--muted);
  font-size: 12px;
}

.studio-updates .release-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-updates .update-row {
  --tool: #908077;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 40px;
  padding: 20px 0 21px;
  border-top: 1px solid var(--line-soft);
}

.studio-updates .update-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.studio-updates .update-row:last-child { padding-bottom: 0; }

.studio-updates .update-row.library { --tool: #745b43; }
.studio-updates .update-row.edit { --tool: #403128; }
.studio-updates .update-row.frame { --tool: #55544c; }
.studio-updates .update-row.social { --tool: #6e7b83; }
.studio-updates .update-row.writer { --tool: #756f65; }
.studio-updates .update-row.concept { --tool: #8a8478; }
.studio-updates .update-row.postcard { --tool: #9e8378; }
.studio-updates .update-row.proof { --tool: #7d6a5d; }
.studio-updates .update-row.zine { --tool: #6f7160; }

.studio-updates .update-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--tool);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


.studio-updates .update-row h3 {
  margin: 0 0 6px;
  font-family: "Viaoda Libre", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

.studio-updates .update-row p {
  max-width: 70ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.studio-updates .update-row .text-link {
  margin-bottom: 3px;
  white-space: nowrap;
}

.studio-updates .tool-doorways { margin-top: 62px; }

.studio-updates .tool-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.studio-updates .tool-door {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 12px;
  padding: 14px 16px;
  color: var(--light);
  background: color-mix(in srgb, var(--tool) 80%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--tool) 80%, var(--ink));
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
}

.studio-updates .tool-door:hover { filter: brightness(0.93); }
.studio-updates .tool-door span:last-child { color: rgba(247, 244, 238, 0.72); }

.studio-updates footer {
  margin-top: 56px;
  padding-top: 19px;
  border-top: 1px solid var(--line-soft);
}

.studio-updates footer p { margin: 0; color: var(--muted); font-size: 12px; }

.studio-updates .filter-button:focus-visible,
.studio-updates .text-link:focus-visible,
.studio-updates .tool-door:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .studio-updates .feature-card { grid-template-columns: 1fr; }
  .studio-updates .feature-label { grid-column: 1; }
  .studio-updates .seamless-preview { justify-self: center; margin: 0 30px 30px; }
  .studio-updates .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 790px) {
  .studio-updates .release { grid-template-columns: 1fr; row-gap: 16px; }
  .studio-updates .release-label { flex-direction: row; align-items: baseline; gap: 12px; }
  .studio-updates .update-row { grid-template-columns: 1fr; row-gap: 12px; }
  .studio-updates .update-row .text-link { justify-self: start; }

  /* the filter tabs stay on one line and swipe sideways, still on the ink line */
  .studio-updates .update-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--ink);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .studio-updates .update-filters::-webkit-scrollbar { display: none; }
  .studio-updates .update-filters .filter-button { flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; }
}

@media (max-width: 700px) {
  .studio-updates .updates-wrap { padding: 20px 12px 48px; }
  .studio-updates .sheet { padding: 31px 21px 34px; }
  .studio-updates .masthead { grid-template-columns: 1fr; gap: 20px; }
  .studio-updates .week, .studio-updates .section-head p { text-align: left; }
  .studio-updates .section-head { display: block; }
  .studio-updates .section-head p { margin-top: 8px; }
  .studio-updates .feature-label { align-items: flex-start; flex-direction: column; gap: 4px; }
  .studio-updates .feature-copy { padding: 34px 25px 33px; }
  .studio-updates .seamless-preview { margin: 0 20px 24px; }
  .studio-updates .tool-grid { grid-template-columns: 1fr; }
  .studio-updates h1 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-updates * { scroll-behavior: auto !important; }
}

/* Attached tabs: Kim's Squarespace design-services precedent. */
.studio-updates .filters[role="tablist"] {
  gap: 6px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}
.studio-updates .filters[role="tablist"] .filter-button {
  min-height: 0;
  margin-bottom: -1px;
  padding: 6.5px 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--ink);
  border-radius: 0;
  text-transform: uppercase;
}
.studio-updates .filters[role="tablist"] .filter-button:hover,
.studio-updates .filters[role="tablist"] .filter-button[aria-selected="true"] {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--ink);
}
.studio-updates .filters[role="tablist"] .filter-button[aria-selected="true"] {
  border-bottom-color: var(--panel);
}
.studio-updates [role="tabpanel"] .feature-card { border-color: var(--ink); padding-top: 12px; }

.studio-updates .seamless-preview > img.print-guide-photo { width: min(100%, 345px); height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; margin-inline: auto; }

/* Print Guide accent from kimklassen.com/print-guide. */
.studio-updates #print-panel .feature-label { background: #8f8077; }

/* Home15, Kim Oct 13: on wide windows the featured card is two equal halves, words left and picture right,
   with the card's own 38px padding as the gutter. The picture (video or still) fills its half, centred, and
   its height is capped so the card fits a 1440x900 window. The words sit centred against it.
   Halves start at 990px, the narrowest window where the words still get 360px; below that the card stacks as before. */
@media (min-width: 990px) {
  .studio-updates .feature-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .studio-updates .feature-label { grid-column: 1 / -1; }
  .studio-updates .feature-copy { align-self: center; padding: 38px 19px 38px 38px; }
  .studio-updates .seamless-preview { align-self: start; justify-self: stretch; margin: 38px 38px 34px 19px; }
  .studio-updates .seamless-preview > a { display: block; }
  .studio-updates .feature-video,
  .studio-updates .seamless-preview > img,
  .studio-updates .seamless-preview > a > img,
  .studio-updates .seamless-preview > img.print-guide-photo {
    width: 100%;
    max-width: min(480px, max(260px, calc((100vh - 260px) * 0.75)));
    max-height: none;
    margin-inline: auto;
  }
  .studio-updates .feature-video > img { width: 100%; }
}

.studio-updates [hidden]{display:none!important}
.home-sheet{width:min(1400px,100%);padding:44px 48px 42px}
.home-sheet .your-work{max-width:none;margin-top:0;border-top:0}
.studio-updates{font:400 17px/1.58 var(--mono)}
.studio-updates .brand{display:none}
.studio-updates h1{margin-top:0}
@media(max-width:700px){.home-sheet{padding:31px 21px 34px}}