@font-face{font-family:Archivo;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/archivo-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/archivo-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* SMYO Studio. The Smith Young house style: Archivo, black on white with one grey, hairline rules,
   square corners, no icons. Numbers come before words. */
:root {
  --ground: #F8F6F2; --tint: #ECE9E2; --ink: #141414; --ink2: #3a3a3a; --grey: #6b6b6b; --rule: #dadada;
  --top: env(safe-area-inset-top, 0px); --bottom: env(safe-area-inset-bottom, 0px);
  --navh: 50px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font-family: Archivo, system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.4; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overscroll-behavior-y: none; }
button, input, textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; }
a { color: var(--ink); }
img { max-width: 100%; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
h1, h2 { font-weight: 400; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cap { font-size: 0.8125rem; color: var(--grey); }
.grey { color: var(--grey); }
.empty { color: var(--grey); padding: 32px 0; text-align: center; font-size: 0.9375rem; margin: 0; }
.note { font-size: 0.8125rem; color: var(--grey); line-height: 1.45; margin: 14px 0 0; }
.lede { font-size: 1.0625rem; line-height: 1.45; color: var(--ink2); margin: 6px 0 14px; }
.pre { white-space: pre-line; }
.gap { margin: 18px 0 6px; display: block; }
.boot { min-height: 100dvh; display: grid; place-items: center; }
.boot img { opacity: .9; }

/* buttons and links */
.btn { display: inline-block; border: 1px solid var(--ink); background: var(--ground); padding: 13px 18px; font-size: 0.9375rem; min-height: 48px; text-align: center; text-decoration: none; }
.btn.primary { background: var(--ink); color: var(--ground); font-size: 1rem; font-weight: 500; }
.btn:disabled { background: var(--tint); border-color: var(--tint); color: var(--grey); }
.btn.sm { padding: 7px 11px; font-size: 0.8125rem; min-height: 0; white-space: nowrap; }
.wide { display: block; width: 100%; }
.link { border: 0; background: none; padding: 10px 0; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.link.sm { font-size: 0.8125rem; padding: 6px 0; }
.link.grey { color: var(--grey); text-decoration: none; font-size: 0.8125rem; }
.count { background: var(--ink); color: var(--ground); font-weight: 400; font-size: 0.75rem; padding: 1px 6px; }

/* header, bar and the job line */
.hd { position: sticky; top: 0; z-index: 5; background: var(--ground); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 20px; padding: calc(var(--top) + 12px) 0 10px; border-bottom: 1px solid var(--ink); min-height: 56px; }
.bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; min-height: 40px; }
.bar h2 { margin: 0; font-size: 0.9375rem; }
.bar .filing { align-self: center; }
.filing { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark { width: 30px; height: 30px; display: block; flex-shrink: 0; }
.fl { display: flex; flex-direction: column; min-width: 0; }
.job { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title { font-size: 1.75rem; font-weight: 300; margin: 14px 0 14px; line-height: 1.1; }

/* Add */
.capture { margin-top: 16px; aspect-ratio: 4 / 5; max-height: 60dvh; width: 100%; background: var(--tint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
label.btn, label.link { position: relative; cursor: pointer; }
label.btn { width: 220px; }
label input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.shot { position: relative; margin: 16px 0 0; }
.shot img { width: 100%; aspect-ratio: 4 / 5; max-height: 50dvh; object-fit: cover; display: block; background: var(--tint); }
.chip { position: absolute; left: 0; bottom: 0; border: 0; background: var(--ground); padding: 9px 12px; font-size: 0.8125rem; }
.fld { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.fld input, .fld textarea { font-size: 1.0625rem; border: 0; border-bottom: 1px solid var(--rule); padding: 9px 0; outline: none; background: transparent; width: 100%; -webkit-appearance: none; appearance: none; }
.fld input:focus { border-bottom-color: var(--ink); }
.fld.search { margin: 6px 0 10px; }
.lab { display: block; margin: 14px 0 6px; }
/* several photos: the choice, then a contact sheet */
.kind { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.kind .seg { margin-bottom: 0; border-bottom: 0; }
.sheetgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.sheetgrid .ph { position: relative; border: 0; padding: 0; background: var(--tint); aspect-ratio: 1; overflow: hidden; display: block; }
.sheetgrid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheetgrid .ph.add { display: grid; place-items: center; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sheetgrid .tag { position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--ground); font-size: 0.75rem; padding: 3px 6px; }
.sheetgrid .tag.w { left: auto; right: 0; background: var(--ground); color: var(--ink); }
.pickline { margin: 8px 0 0; }
.minis { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 22px; }
.minis img { width: 64px; height: 64px; object-fit: cover; display: block; }
@container (min-width: 520px) { .sheetgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--rule); background: var(--ground); padding: 9px 12px; font-size: 0.9375rem; min-height: 40px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips button[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.chips .other { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding-left: 4px; padding-right: 4px; }
.summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; }
.more { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.seg { display: flex; flex-wrap: wrap; column-gap: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.seg button { border: 0; background: none; padding: 11px 0; font-size: 0.9375rem; color: var(--grey); }
.seg [aria-pressed=true] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.check { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); margin-bottom: 6px; font-size: 0.9375rem; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); margin: 0; }
.send { margin-top: 16px; }
.sent .big { font-size: 2.75rem; font-weight: 300; margin: 36px 0 12px; line-height: 1; }
.sent .mini { width: 120px; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin: 4px 0 22px; }
.sent .link { display: inline-block; margin-top: 8px; }

/* rows: jobs, items, what was sent */
.rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rows.jobs { border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; text-decoration: none; color: var(--ink); font-size: 1.0625rem; min-height: 52px; }
.row .no { font-size: 0.9375rem; color: var(--grey); min-width: 54px; }
.row.item .no { font-size: 0.8125rem; min-width: 30px; }
.row .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row .tx > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.row .th { width: 44px; height: 55px; object-fit: cover; background: var(--tint); display: block; }
.row[aria-current=true] { box-shadow: inset 2px 0 0 var(--ink); padding-left: 10px; }
.row[aria-current=true] .tx > span:first-child { font-weight: 500; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.steps li { counter-increment: n; display: grid; grid-template-columns: 32px 1fr; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.steps li::before { content: counter(n, decimal-leading-zero); color: var(--grey); font-size: 0.8125rem; padding-top: 2px; }

/* an item, or a post, large */
.hero { width: 100%; max-height: 56dvh; object-fit: cover; display: block; margin: 14px 0 10px; background: var(--tint); }
.hero.q { aspect-ratio: 4 / 5; max-height: 48dvh; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.mid { align-self: center; text-align: center; }

/* queue */
.week { margin-top: 16px; }
.wk { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; min-height: 32px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; }
.tile { border: 0; background: none; padding: 0; text-align: left; }
.tile img, .tile .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--tint); }
.tile .tl { display: flex; flex-direction: column; font-size: 0.8125rem; padding-top: 5px; }
.tile[aria-pressed=true] img { outline: 2px solid var(--ink); outline-offset: 3px; }
.tile.held img { opacity: .35; }

/* tabs */
.nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); background: var(--ground); }
.nav a { text-decoration: none; color: var(--grey); text-align: center; padding: 13px 0 14px; font-size: 0.9375rem; }
.nav a[aria-current=page] { color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); }

/* sheets and messages */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(20, 20, 20, .45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--ground); width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto; padding: 0 20px calc(20px + var(--bottom)); }
.sh { position: sticky; top: 0; z-index: 1; background: var(--ground); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); padding: 14px 0 10px; margin-bottom: 8px; }
.sh b { font-weight: 400; font-size: 0.9375rem; }
.toast { position: fixed; z-index: 30; left: 16px; right: 16px; max-width: 520px; margin: 0 auto; top: calc(var(--top) + 10px); background: var(--ink); color: var(--ground); padding: 12px 14px; font-size: 0.875rem; }
.error { position: fixed; z-index: 25; left: 16px; right: 16px; max-width: 560px; margin: 0 auto; top: calc(var(--top) + 64px); background: var(--ground); border: 1px solid var(--ink); padding: 10px 12px; font-size: 0.875rem; }
.signin { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; grid-column: 1 / -1; }
.signin h1 { font-size: 1.75rem; font-weight: 300; margin: 4px 0 18px; }
.who { border: 0; background: none; text-align: left; padding: 14px 0 0; font-size: 0.8125rem; color: var(--grey); margin-top: auto; }

/* ---------- phone: iPhone, and the iPhone Duo closed ---------- */
.m-phone .main { padding: 0 20px calc(var(--navh) + var(--bottom) + 28px); }
.m-phone .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; margin: 0 20px; padding-bottom: var(--bottom); box-shadow: 0 0 0 20px var(--ground); }

/* the Duo closed is wide and short: photo and words side by side */
@media (max-width: 599px) and (min-width: 440px) and (max-height: 760px) {
  .picked { display: grid; grid-template-columns: 50% minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .picked .kind { grid-column: 1 / -1; }
  .picked .sheetgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picked .sheetgrid { grid-column: 1; grid-row: 2; }
  .picked .pickline { grid-column: 1; grid-row: 3; }
  .picked .fields { grid-column: 2; grid-row: 2 / span 2; }
  .picked .fields .fld:first-child { margin-top: 10px; }
  .capture { aspect-ratio: auto; height: 50dvh; }
}

/* ---------- two panes: iPhone Duo open, iPad in portrait ---------- */
.m-two .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: calc(100dvh - var(--navh) - var(--bottom)); }
.m-two .pane { overflow: auto; padding: calc(var(--top) + 14px) 20px 24px; }
.m-two .pane + .pane { border-left: 1px solid var(--rule); }
.m-two .nav { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 20px; padding-bottom: var(--bottom); }
.m-two .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-two .split:has(.pane.side) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

/* ---------- three: iPad in landscape and larger ---------- */
.m-three { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100dvh; overflow: hidden; }
.m-three .rail { border-right: 1px solid var(--rule); padding: calc(var(--top) + 28px) 22px 20px; overflow: auto; display: flex; flex-direction: column; }
.m-three .rail-top { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.m-three .rail .nav { grid-auto-flow: row; grid-auto-columns: auto; border-top: 0; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.m-three .rail .nav a { text-align: left; padding: 14px 0 14px 10px; font-size: 1.0625rem; border-bottom: 1px solid var(--rule); }
.m-three .rail .nav a:last-child { border-bottom: 0; }
.m-three .rail .nav a[aria-current=page] { box-shadow: inset 2px 0 0 var(--ink); font-weight: 500; }
.m-three .rail .row .no { min-width: 52px; }
.m-three .rail .rows.jobs { border-top: 0; }
.m-three .split { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: 100dvh; overflow: hidden; }
.m-three .split:has(.pane.add) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.m-three .split:has(.pane.side) { grid-template-columns: minmax(0, 1fr) 340px; }
.m-three .pane { overflow: auto; padding: calc(var(--top) + 28px) 28px 24px; }
.m-three .pane + .pane { border-left: 1px solid var(--rule); }
.m-three .pane.add .capture, .m-three .pane.add .shot img { max-height: 58dvh; }
.m-three .hero { max-height: 60dvh; }
.m-three .scrim, .m-two .scrim { align-items: center; }

/* ---------- orientation ----------
   Whenever the Add pane is wide enough (iPad in landscape, the Duo open on its side), photo and words
   sit side by side, so Send is never below the fold. */
.pane.add { container-type: inline-size; }
@media (max-height: 900px) {
  @container (min-width: 340px) {
    .picked { display: grid; grid-template-columns: 50% minmax(0, 1fr); column-gap: 20px; align-items: start; }
    .picked .kind { grid-column: 1 / -1; }
    .picked .sheetgrid { grid-column: 1; grid-row: 2; }
    .picked .pickline { grid-column: 1; grid-row: 3; }
    .picked .fields { grid-column: 2; grid-row: 2 / span 2; }
    .picked .fields .fld:first-child { margin-top: 10px; }
  }
}
/* short screens (any phone or fold on its side): tighter, and the photo never taller than the screen */
@media (max-height: 640px) {
  .m-two .pane, .m-three .pane { padding-top: calc(var(--top) + 10px); }
  .capture { max-height: 52dvh; aspect-ratio: auto; height: 52dvh; }
  .shot img, .hero, .hero.q { max-height: 52dvh; }
  .title { font-size: 1.5rem; margin: 10px 0; }
  .sent .big { margin-top: 16px; font-size: 2.25rem; }
  .nav a { padding: 10px 0 11px; }
}
@media (max-height: 520px) {
  /* a phone or the closed Duo on its side: Add takes the whole width so photo and words sit side by side */
  .m-two .split:has(.pane.add) { grid-template-columns: minmax(0, 1fr); }
  .m-two .split:has(.pane.add) .pane:not(.add) { display: none; }
}
@media (max-height: 480px) {
  :root { --navh: 42px; }
  .capture, .shot img, .hero, .hero.q { max-height: 44dvh; height: auto; }
  .capture { height: 44dvh; }
}

/* ---------- iPhone Duo: the tabs run down the side, under the status bar, as iOS does there ---------- */
.app[data-nav] { --side: 4.75rem; }
.app[data-nav=right] { padding-right: calc(var(--side) + env(safe-area-inset-right, 0px)); }
.app[data-nav=left] { padding-left: calc(var(--side) + env(safe-area-inset-left, 0px)); }
.app[data-nav] .nav { position: fixed; top: 0; bottom: 0; left: auto; right: auto; z-index: 6; margin: 0; width: var(--side); box-shadow: none; border-top: 0;
  grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: min-content; align-content: end; padding: calc(var(--top) + 12px) 0 calc(var(--bottom) + 16px); }
.app[data-nav=right] .nav { right: env(safe-area-inset-right, 0px); border-left: 1px solid var(--ink); }
.app[data-nav=left] .nav { left: env(safe-area-inset-left, 0px); border-right: 1px solid var(--ink); }
.app[data-nav] .nav a { padding: 16px 4px; font-size: 0.875rem; display: flex; flex-direction: column; align-items: center; gap: 4px; border-top: 1px solid var(--rule); }
.app[data-nav=right] .nav a[aria-current=page] { box-shadow: inset 2px 0 0 var(--ink); color: var(--ink); }
.app[data-nav=left] .nav a[aria-current=page] { box-shadow: inset -2px 0 0 var(--ink); color: var(--ink); }
.app[data-nav].m-phone .main { padding-bottom: calc(var(--bottom) + 24px); }
.app[data-nav].m-two .split { height: 100dvh; }
.app[data-nav=right] .hd { margin-right: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: in .2s ease-out; }
  @keyframes in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* with many photos the Send button stays in reach above the tabs */
.m-phone .send { position: sticky; bottom: calc(var(--navh) + var(--bottom) + 10px); z-index: 4; box-shadow: 0 0 0 10px var(--ground); }
.app[data-nav].m-phone .send { bottom: calc(var(--bottom) + 10px); }

/* ---------- home: words and numbers, no pictures ---------- */
.mark-link { display: block; }
.avatar { width: 36px; height: 36px; border: 1px solid var(--ink); background: var(--ink); color: var(--ground); font-size: 0.875rem; letter-spacing: .04em; display: grid; place-items: center; padding: 0; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hello h1 { font-size: 1.875rem; font-weight: 300; margin: 20px 0 18px; line-height: 1.1; text-wrap: balance; }
.flist { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.frow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 0; min-height: 72px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.frow .no { font-size: 0.8125rem; color: var(--grey); align-self: start; padding-top: 4px; }
.frow .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.frow .nm { font-size: 1.25rem; line-height: 1.2; }
.frow .go { font-size: 1.25rem; color: var(--ink); }
.frow .st { font-size: 0.8125rem; white-space: nowrap; }
.frow .st.hot { background: var(--ink); color: var(--ground); padding: 3px 8px; }
.frow.soon .nm { color: var(--grey); font-size: 1.0625rem; }
.frow.soon { min-height: 60px; padding: 12px 0; }
.onway { margin: 28px 0 8px; font-weight: 400; }
@media (hover: hover) { .frow:hover .nm { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }
.needs { margin-bottom: 26px; }
.needs h2, .lately h2 { font-weight: 400; margin: 0 0 8px; }
.needs .q { border-top: 1px solid var(--ink); padding: 14px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.needs .ask { font-size: 1.25rem; margin: 0; line-height: 1.2; }
.needs .cap { margin: 0; }
.qthumbs { display: flex; gap: 3px; }
.qthumbs img { width: 56px; height: 56px; object-fit: cover; display: block; }
.lately ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lately li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.lately { margin-top: 28px; }
.homegrid { display: block; }
.soonpage { max-width: 560px; }
.soonpage .btn { margin-top: 22px; }
.pane.home { container-type: inline-size; }
@container (min-width: 760px) {
  .homegrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .lately { margin-top: 0; }
  .hello h1 { font-size: 2.25rem; }
}
.m-two .split:has(.pane.home), .m-three .split:has(.pane.home) { grid-template-columns: minmax(0, 1fr); }
.offline { margin: 10px 20px 0; padding: 9px 12px; font-size: 0.875rem; border: 1px solid var(--ink); background: var(--ground); }
.m-two .offline, .m-three .offline { position: fixed; z-index: 25; left: 16px; right: 16px; max-width: 560px; margin: 0 auto; top: calc(var(--top) + 10px); }
.rows .row .link.sm { align-self: center; }

/* reminders and notifications */
.care { margin: 10px 0 0; padding: 9px 12px; border-left: 2px solid var(--ink); font-size: 0.875rem; line-height: 1.4; }
.notify { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.notify p { margin: 0; }

/* Home: the feature buttons. Square corners, hairline ink border, words and numbers only. */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); gap: 10px; margin-top: 6px; }
.fbtn { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; aspect-ratio: 1 / 0.86; min-height: 7.5rem; padding: 12px 14px 14px; border: 1px solid var(--ink); color: var(--ink); background: var(--ground); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.fbtn .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fbtn .no { font-size: 0.8125rem; color: var(--grey); }
.fbtn .st { font-size: 0.75rem; white-space: nowrap; color: var(--grey); }
.fbtn .st.hot { background: var(--ink); color: var(--ground); padding: 2px 7px; }
.fbtn .nm { font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.005em; }
.fbtn:active { background: var(--ink); color: var(--ground); }
.fbtn:active .no, .fbtn:active .st { color: var(--ground); }
.fbtn.soon { border-color: var(--rule); color: var(--grey); }
.fbtn.soon .nm { font-size: 1.0625rem; }
.fbtn.soon:active { background: var(--tint); color: var(--grey); }
@media (hover: hover) { .fbtn:hover { background: var(--ink); color: var(--ground); } .fbtn:hover .no, .fbtn:hover .st { color: var(--ground); } .fbtn.soon:hover { background: var(--tint); color: var(--ink); } .fbtn.soon:hover .no, .fbtn.soon:hover .st { color: var(--grey); } }

/* queue: caption editing */
.fld textarea.capedit { resize: vertical; min-height: 11em; line-height: 1.45; border: 1px solid var(--rule); padding: 10px; }

/* ---------- 0.5 (5 Nov 2026): the site's design language ----------
   The site's day paper and ink, Archivo self-hosted, SMYO set as type, the features as a numbered index with fine
   rules, and no filled panels or boxes: actions are words, the one strong action stays ink. */
.wm { font-family: Archivo, Arial, sans-serif; font-weight: 500; letter-spacing: -0.06em; line-height: 1; color: var(--ink); }
.mark.wm { width: auto; height: auto; font-size: 1.75rem; display: block; }
.boot-wm { font-size: 3rem; }
.filing { gap: 14px; }
.filing > span:last-child { font-size: 0.9375rem; color: var(--grey); }
.hd, .bar { border-bottom-color: var(--rule); }
.hello h1 { font-size: 2.5rem; letter-spacing: -0.02em; margin: 28px 0 26px; }
.title { font-size: 2.5rem; letter-spacing: -0.02em; }
.avatar { background: transparent; color: var(--ink); border-color: var(--ink); }
.frow { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 68px; }
.frow .no { font-size: 0.875rem; padding-top: 6px; }
.frow .nm { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.015em; }
.frow .st { color: var(--grey); font-size: 0.875rem; }
.frow .st.hot { background: none; color: var(--ink); padding: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.frow .go { font-size: 1.125rem; color: var(--grey); }
.frow.soon .nm { font-size: 1.125rem; font-weight: 400; letter-spacing: 0; }
.flist { border-top-color: var(--ink); }
.onway { margin: 34px 0 6px; }
.capture { background: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.btn { border-color: var(--ink); background: transparent; }
.btn.primary { background: var(--ink); color: var(--ground); }
.btn:disabled { background: transparent; border-color: var(--rule); color: var(--grey); }
.chips button { border: 0; border-bottom: 1px solid var(--rule); background: transparent; padding: 10px 2px; min-height: 44px; }
.chips button[aria-pressed=true] { background: transparent; color: var(--ink); border-bottom: 2px solid var(--ink); font-weight: 500; }
.chips { gap: 4px 18px; }
.count { background: none; color: var(--ink); padding: 0 0 0 4px; }
.offline { background: var(--ground); border-color: var(--rule); }
.nav, .m-phone .nav { background: var(--ground); border-top-color: var(--rule); }
.nav a[aria-current=page] { box-shadow: inset 0 1px 0 var(--ink); }
.m-phone .nav { box-shadow: 0 0 0 20px var(--ground); }
.fld textarea.capedit { border-color: var(--rule); background: transparent; }
.mark-link { text-decoration: none; }

/* ---------- 0.5: iPhone and iPad (5 Nov 2026) ---------- */
/* Dark mode follows the phone, in the site's night palette. */
@media (prefers-color-scheme: dark) {
  :root { --ground: #2C2922; --tint: #38342C; --ink: #F2EFE8; --ink2: #DDD8CE; --grey: #A9A397; --rule: #4A453B; }
  .tile img, .shot img, .qthumbs img { background: var(--tint); }
}
/* Back, top left, as iOS. */
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-right: 12px; text-decoration: none; color: var(--ink); font-size: 1.0625rem; }
.back span { font-size: 1.75rem; line-height: 0; margin-top: -3px; }
/* The top bar: the wordmark and you, nothing else; the screen's title is large in the page. */
.hd { min-height: 52px; padding: calc(var(--top) + 8px) 0 8px; }
.m-phone .mark.wm { font-size: 1.5rem; }
.filing > span:last-child:not(:first-child) { display: none; }
/* Add: what it's for at the top, the two actions at the bottom within reach of a thumb. */
.addintro { margin-top: 18px; }
.addintro .cap { margin: 0; }
.addintro .title { margin: 6px 0 12px; }
.capture { border: 0; aspect-ratio: auto; max-height: none; background: none; margin-top: 28px; gap: 12px; align-items: stretch; justify-content: flex-start; }
.capture label.btn { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.capture { width: auto; }
.m-phone .main:has(> .capture) { display: flex; flex-direction: column; min-height: calc(100dvh - var(--top) - 52px - var(--navh) - var(--bottom)); padding-bottom: calc(var(--navh) + var(--bottom) + 18px); }
.m-phone .main > .capture { margin-top: auto; padding-top: 28px; }
/* The tab bar: words only (the brand has no icons), full width, clear of the home indicator. */
.m-phone .nav, .m-two .nav { margin: 0; padding: 0 12px var(--bottom); box-shadow: none; border-top: 1px solid var(--rule); }
.nav a { padding: 14px 0 15px; font-size: 0.9375rem; min-height: 49px; }
.nav a[aria-current=page] { box-shadow: none; color: var(--ink); font-weight: 500; }
/* iPad: content in a readable measure; the sidebar in landscape reads as a list. */
.m-two .main, .m-two .split { padding-bottom: calc(var(--navh) + var(--bottom) + 20px); }
.m-three .rail-top { padding: calc(var(--top) + 18px) 0 18px; }
.m-three .rail .mark.wm { font-size: 2rem; }
.m-three .rail .nav a { font-size: 1.125rem; border-bottom-color: var(--rule); }
.m-three .rail .nav a[aria-current=page] { box-shadow: none; font-weight: 500; }
.pane.home .hello h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }

/* ---------- 0.5: native feel (5 Nov 2026) ---------- */
/* Bars are translucent over the page, as iOS: the page passes under them. */
.hd, .m-phone .nav, .m-two .nav { background: color-mix(in srgb, var(--ground) 84%, transparent); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
.m-phone .nav { box-shadow: none; }
/* The tab bar: a hairline mark over a small word, as every iPhone app; 49 points tall above the home indicator. */
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 0 4px; min-height: 49px; color: var(--grey); }
.nav .ti { position: relative; display: block; width: 28px; height: 28px; }
.nav .ti svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round; }
.nav .tl { font-size: 0.6875rem; letter-spacing: .01em; }
.nav a[aria-current=page] { color: var(--ink); font-weight: 400; }
.nav a[aria-current=page] .ti svg { stroke-width: 1.6; }
.nav .count { position: absolute; top: -2px; left: 20px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--ground); font-size: 0.6875rem; line-height: 18px; text-align: center; font-weight: 500; }
.m-three .rail .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; }
.m-three .rail .nav .tl { font-size: 1.125rem; }
.m-three .rail .nav .count { left: 18px; }
/* Movement between screens. */
.nav { view-transition-name: tabbar; }
::view-transition-group(root) { animation-duration: .38s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html[data-move=push]::view-transition-old(root) { animation-name: mv-out-left; }
html[data-move=push]::view-transition-new(root) { animation-name: mv-in-right; }
html[data-move=pop]::view-transition-old(root) { animation-name: mv-out-right; z-index: 2; }
html[data-move=pop]::view-transition-new(root) { animation-name: mv-in-left; }
html[data-move=swap]::view-transition-old(root), html[data-move=swap]::view-transition-new(root) { animation-duration: .2s; }
@keyframes mv-in-right { from { transform: translateX(100%); } }
@keyframes mv-out-left { to { transform: translateX(-30%); opacity: .6; } }
@keyframes mv-in-left { from { transform: translateX(-30%); opacity: .6; } }
@keyframes mv-out-right { to { transform: translateX(100%); } }
/* Rows that open something carry the iOS chevron. */
.frow .go { font-size: 1.5rem; line-height: 1; color: var(--grey); }
/* Lately: what happened to your photos, with the photo. */
.lately li { flex-direction: row; align-items: center; gap: 14px; }
.lately li img, .lately li .nothumb { width: 52px; height: 65px; object-fit: cover; flex-shrink: 0; background: var(--tint); display: block; }
.lately .lt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Pressed state, as a native list. */
.frow:active, .rows .row:active { background: var(--tint); }
.row .chev { font-size: 1.5rem; line-height: 1; color: var(--grey); }
.title.big { font-size: 2.5rem; margin: 18px 0 10px; }

/* ======================= 0.6 (5 Nov 2026): as if Apple made it, in SMYO's colours and type =======================
   Apple's grammar: grouped rounded sections on a slightly darker ground, a floating glass tab bar, large titles that
   fold into the bar, capsule buttons, circular avatar, edge-to-edge photo grids. SMYO's voice: Archivo, the site's
   paper and ink, the SMYO wordmark, job numbers before names. */
:root { --ground: #F1EEE8; --card: #FBFAF7; --tint: #E6E2DA; --rule: rgba(20,20,20,.12); --glass: rgba(251,250,247,.62); --press: rgba(20,20,20,.06); --r: 14px; }
@media (prefers-color-scheme: dark) {
  :root { --ground: #1C1A16; --card: #2A2721; --tint: #34302A; --ink: #F2EFE8; --ink2: #DDD8CE; --grey: #A39D91; --rule: rgba(242,239,232,.12); --glass: rgba(42,39,33,.6); --press: rgba(242,239,232,.08); }
}
body { background: var(--ground); }
/* Large title, 34 pt, Archivo Medium; folds into the bar. */
.hello h1, .title, .title.big { font-weight: 500; font-size: 2.125rem; letter-spacing: -0.025em; line-height: 1.1; margin: 6px 0 18px; }
.addintro .title { margin: 4px 0 10px; }
.m-phone .hd { position: sticky; top: 0; margin: 0; padding: calc(var(--top) + 6px) 20px 6px; min-height: 50px; border-bottom: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .2s, box-shadow .2s; }
.scrolled .m-phone .hd { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 0.5px 0 var(--rule); }
.m-phone .hd .inl { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 4px); font-weight: 500; font-size: 1.0625rem; opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.folded .m-phone .hd .inl { opacity: 1; transform: translate(-50%, 0); }
.m-phone .mark.wm { font-size: 1.375rem; transition: opacity .18s; }
.folded .m-phone .hd .mark.wm { opacity: 0; }
.back { font-size: 1.0625rem; color: var(--ink); font-weight: 400; }
/* Avatar: circular, as Apple's account button. */
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--tint); color: var(--ink); font-size: 0.8125rem; font-weight: 500; }
/* Grouped sections: rounded cards, separators inset from the leading edge. */
.flist { border-top: 0; background: var(--card); border-radius: var(--r); overflow: hidden; }
.frow { position: relative; padding: 12px 16px; min-height: 58px; border-bottom: 0; grid-template-columns: 30px minmax(0,1fr) auto; }
.frow + .frow::before { content: ''; position: absolute; top: 0; left: 62px; right: 0; border-top: 0.5px solid var(--rule); }
.frow .no { padding-top: 0; align-self: center; font-variant-numeric: tabular-nums; }
.frow .nm { font-size: 1.1875rem; font-weight: 400; letter-spacing: -0.01em; }
.frow.soon .nm { font-size: 1.0625rem; }
.frow .st { font-size: 0.9375rem; }
.frow .st.hot { text-decoration: none; color: var(--ground); background: var(--ink); border-radius: 999px; padding: 2px 9px; font-size: 0.8125rem; font-weight: 500; }
.frow:active { background: var(--press); }
.onway { margin: 28px 16px 8px; text-transform: uppercase; letter-spacing: .04em; font-size: 0.75rem; }
.needs h2, .lately h2 { margin: 0 16px 8px; text-transform: uppercase; letter-spacing: .04em; font-size: 0.75rem; font-weight: 400; color: var(--grey); }
.needs .q { background: var(--card); border-radius: var(--r); border-top: 0; padding: 16px; gap: 10px; }
.qthumbs { gap: 4px; } .qthumbs img { border-radius: 8px; width: 60px; height: 60px; }
.chips { gap: 8px; }
.chips button { border: 0; border-radius: 999px; background: var(--tint); padding: 8px 14px; min-height: 36px; font-size: 0.9375rem; }
.chips button[aria-pressed=true] { background: var(--ink); color: var(--ground); border: 0; font-weight: 400; }
.chips .other { background: transparent; text-decoration: none; color: var(--ink); }
.lately ul { background: var(--card); border-radius: var(--r); border-top: 0; padding: 0 16px; }
.lately li { border-bottom: 0.5px solid var(--rule); padding: 12px 0; }
.lately li:last-child { border-bottom: 0; }
.lately li img, .lately li .nothumb { border-radius: 8px; width: 48px; height: 48px; }
/* Capsule buttons. */
.btn { border-radius: 999px; border: 0; background: var(--tint); color: var(--ink); font-weight: 500; }
.btn.primary { background: var(--ink); color: var(--ground); }
.btn.sm { border-radius: 999px; padding: 6px 12px; background: var(--tint); }
.capture label.btn { min-height: 54px; font-size: 1.0625rem; }
.btn:disabled { background: var(--tint); color: var(--grey); }
/* Search: Apple's rounded field. */
.fld.search { margin: 0 0 14px; }
.fld.search input { background: var(--tint); border: 0; border-radius: 11px; padding: 9px 12px 9px 34px; font-size: 1.0625rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 17px; background-position: 10px 50%; }
/* Drawers: one grouped list. */
.rows.jobs { background: var(--card); border-radius: var(--r); overflow: hidden; }
.rows.jobs .row { padding: 10px 14px 10px 16px; border-bottom: 0; position: relative; min-height: 56px; }
.rows.jobs .row + .row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--rule); }
.rows.jobs .row .no { color: var(--grey); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.row:active { background: var(--press); }
/* Queue: edge-to-edge grid, as Photos. */
.m-phone .week .tiles { margin: 0 -20px; gap: 2px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.week .tile img, .week .tile .ph { aspect-ratio: 1; }
.week .tile .tl { padding: 6px 8px 10px; }
.wk { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 10px; }
/* Floating glass tab bar (iOS 26). */
.m-phone .nav { left: 20px; right: 20px; bottom: calc(var(--bottom) + 8px); margin: 0; padding: 4px; border-radius: 999px; border: 0; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 8px 28px rgba(0,0,0,.12), inset 0 0 0 0.5px rgba(255,255,255,.55), 0 0 0 0.5px var(--rule); }
.m-phone .nav a { border-radius: 999px; min-height: 54px; padding: 5px 0 4px; }
.m-phone .nav a[aria-current=page] { background: var(--press); }
.m-phone .main { padding-bottom: calc(var(--bottom) + 96px); }
.m-phone .main:has(> .capture) { padding-bottom: calc(var(--bottom) + 96px); min-height: calc(100dvh - var(--top) - 50px); }
.nav .count { top: -3px; left: 19px; }
/* iPad: sidebar as Apple's: a rounded selection, no rules. */
.m-three .rail { background: var(--ground); }
.m-three .rail .nav { border-bottom: 0; gap: 2px; }
.m-three .rail .nav a { border-bottom: 0; border-radius: 10px; padding: 10px 12px; }
.m-three .rail .nav a[aria-current=page] { background: var(--tint); }
.m-three .split { background: var(--ground); }
.pane { background: transparent; }
.frow.soon { padding: 11px 16px; min-height: 50px; }
.rows.jobs { border-top: 0; }
.fld.search { border-bottom: 0; }

/* ======================= 0.7 (5 Nov 2026): deeper into Apple's grammar ======================= */
/* Apple's text styles in Archivo: Body 17, Subheadline 15, Footnote 13. */
body { font-size: 1.0625rem; letter-spacing: -0.01em; }
.cap { font-size: 0.8125rem; letter-spacing: 0; }
/* Settings-style glyphs: the feature's number in a small rounded square. */
.frow { grid-template-columns: 30px minmax(0,1fr) auto; gap: 14px; }
.frow .no.glyph { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--ground); display: grid; place-items: center; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; padding: 0; }
.frow.soon .no.glyph { background: var(--tint); color: var(--grey); }
.frow + .frow::before { left: 60px; }
/* Sheets: rise from the bottom with a grabber, rounded top, title centred, Done in medium. */
.scrim { background: rgba(0,0,0,.28); animation: sc-in .25s ease-out; }
.sheet { background: var(--ground); border-radius: 14px 14px 0 0; padding: 0 16px calc(24px + var(--bottom)); animation: sh-in .38s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 40px rgba(0,0,0,.12); }
.m-three .sheet, .m-two .sheet { border-radius: 14px; max-width: 540px; }
@keyframes sh-in { from { transform: translateY(100%); } }
@keyframes sc-in { from { opacity: 0; } }
.grab { width: 36px; height: 5px; border-radius: 3px; background: var(--rule); margin: 6px auto 0; }
.sh { display: grid; grid-template-columns: 1fr auto 1fr; border-bottom: 0; padding: 10px 0 12px; background: var(--ground); }
.sh b { font-weight: 500; font-size: 1.0625rem; text-align: center; }
.sh .done { justify-self: end; border: 0; background: none; font-weight: 500; font-size: 1.0625rem; color: var(--ink); padding: 8px 0; min-height: 44px; }
/* Segmented control. */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 0; border-bottom: 0; background: var(--tint); border-radius: 9px; padding: 2px; margin: 6px 0 12px; column-gap: 0; }
.seg button { flex: 1; border-radius: 7px; padding: 7px 14px; font-size: 0.875rem; color: var(--ink); white-space: nowrap; }
.seg [aria-pressed=true] { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 0.5px rgba(0,0,0,.04); font-weight: 500; }
/* Activity indicator, pull to refresh. */
.spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.2px solid var(--rule); border-top-color: var(--grey); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty.loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 60px; }
.ptr { position: fixed; top: calc(var(--top) + 54px); left: 50%; transform: translate(-50%, 0); z-index: 3; opacity: 0; pointer-events: none; }
.ptr .spin { animation-play-state: paused; } .ptr.on .spin { animation-play-state: running; }
/* Toast: a capsule HUD under the Dynamic Island. */
.toast { border-radius: 999px; left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100% - 40px); width: max-content; padding: 11px 18px; font-size: 0.9375rem; text-align: center; background: var(--glass); color: var(--ink); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 8px 30px rgba(0,0,0,.14), 0 0 0 0.5px var(--rule); }
/* Drawer contents: a grouped list with rounded thumbnails. */
.rows:not(.jobs) { background: var(--card); border-radius: var(--r); overflow: hidden; }
.row.item { padding: 10px 14px 10px 16px; border-bottom: 0; position: relative; }
.row.item + .row.item::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--rule); }
.row.item img { border-radius: 8px; }
/* The item: its photo first, full width, then its details. */
.m-phone .itempane img:first-child, .m-phone .item-photo img { margin: 0 -20px; width: calc(100% + 40px); max-width: none; }
/* Add with photos: Photos' grid, and the questions as a grouped card. */
.sheetgrid { gap: 2px; margin: 8px -20px 0; }
.m-two .sheetgrid, .m-three .sheetgrid { margin: 8px 0 0; }
.sheetgrid .ph.add { background: var(--card); text-decoration: none; font-weight: 500; }
.sheetgrid .tag { border-radius: 6px; margin: 6px; }
.fld input, .fld textarea { font-size: 1.0625rem; }
/* Press feedback on buttons: a slight give, as UIKit. */
.btn:active, .chips button:active, .seg button:active { transform: scale(.97); transition: transform .08s; }
.btn { transition: transform .15s; }
.m-phone img.hero { margin: 4px -20px 12px; width: calc(100% + 40px); max-width: none; display: block; }
.bar { border-bottom: 0; }
.sheet .rows .row { padding: 10px 14px 10px 16px; border-bottom: 0; position: relative; }
.sheet .rows .row + .row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--rule); }
.sheetgrid .ph.add { aspect-ratio: 1; }

/* ======================= 0.8 (5 Nov 2026): Liquid Glass ======================= */
/* Apple's rule: glass only on the functional layer (bars, floating controls, sheets); the content layer stays solid.
   One material, used everywhere it belongs: a light, refracting pane with a bright rim, a specular highlight along the
   top, and a soft lift shadow. It frosts fully under Reduce Transparency. */
:root {
  --glass-bg: rgba(255, 255, 255, .38);
  --glass-rim: rgba(255, 255, 255, .75);
  --glass-edge: rgba(0, 0, 0, .06);
  --glass-shadow: 0 10px 30px rgba(40, 30, 10, .14), 0 2px 6px rgba(40, 30, 10, .06);
  --glass-blur: blur(14px) saturate(190%) brightness(1.06);
  --card-r: 22px;
}
@media (prefers-color-scheme: dark) {
  :root { --glass-bg: rgba(60, 56, 48, .42); --glass-rim: rgba(255, 255, 255, .16); --glass-edge: rgba(0, 0, 0, .35); --glass-shadow: 0 10px 30px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3); --glass-blur: blur(14px) saturate(170%) brightness(.92); }
}
.glass, .m-phone .nav, .fab, .back, .avatar, .m-phone .hd .done, .seg, .toast {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 0.5px var(--glass-rim), 0 0 0 0.5px var(--glass-edge), var(--glass-shadow);
  border: 0;
}
/* Specular highlight: light caught along the upper edge. */
.m-phone .nav::after, .fab::after, .back::after, .avatar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 42%); mix-blend-mode: soft-light; }
.m-phone .nav, .fab, .back, .avatar { position: fixed; }
.back, .avatar { position: relative; }
/* Touch: glass swells and brightens under the finger, as iOS 26. */
.fab, .back, .avatar, .m-phone .nav a { transition: transform .22s cubic-bezier(.3,1.4,.5,1), filter .2s; }
.fab:active, .back:active, .avatar:active { transform: scale(1.1); filter: brightness(1.08); }

/* The tab bar: a floating capsule; the current tab sits in a lens of brighter glass. Room at the right for the action. */
.m-phone .nav { left: 16px; right: 84px; bottom: calc(var(--bottom) + 10px); padding: 4px; border-radius: 999px; }
.m-phone .nav a { border-radius: 999px; min-height: 54px; }
.m-phone .nav a[aria-current=page] { background: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 4px rgba(0,0,0,.08); color: var(--ink); }
@media (prefers-color-scheme: dark) { .m-phone .nav a[aria-current=page] { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); } }
.m-phone .nav a:active { transform: scale(1.06); }
.m-phone.app:not(:has(.fab)) .nav { right: 16px; }
/* The main action: one glass circle, tinted with SMYO's ink (Apple: tint signals the primary action). */
.fab { right: 16px; bottom: calc(var(--bottom) + 10px); width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; z-index: 7; color: var(--ground);
  background: color-mix(in srgb, var(--ink) 86%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 0.5px rgba(0,0,0,.2), var(--glass-shadow); }
.fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* The top bar: no bar at all. Controls float as glass; the page fades softly under them (scroll edge effect). */
.m-phone .hd, .scrolled .m-phone .hd { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.m-phone .hd::before { content: ''; position: absolute; inset: 0 0 -18px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .2s;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: linear-gradient(180deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 60%, transparent) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.scrolled .m-phone .hd::before { opacity: 1; }
.back { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--ink); }
.back span { font-size: 1.875rem; line-height: 1; margin: -4px 2px 0 0; }
.avatar { width: 40px; height: 40px; background: var(--glass-bg); color: var(--ink); font-weight: 500; }

/* Content layer: solid, generous corners (Apple: 20–28 pt for top-level cards). */
.flist, .needs .q, .lately ul, .rows.jobs, .rows:not(.jobs) { border-radius: var(--card-r); }
.chips button { background: var(--card); box-shadow: 0 0 0 0.5px var(--rule); }

/* Primary and secondary actions: prominent tinted glass and regular glass, capsules. */
.btn.primary { background: color-mix(in srgb, var(--ink) 90%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(0,0,0,.14); }
.btn:not(.primary) { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 var(--glass-rim), 0 0 0 0.5px var(--glass-edge), 0 4px 12px rgba(0,0,0,.06); }
.btn:active { transform: scale(1.03); filter: brightness(1.05); }

/* Segmented control: a glass track, the choice in a brighter lens. */
.seg { border-radius: 999px; padding: 3px; }
.seg button { border-radius: 999px; }
.seg [aria-pressed=true] { background: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff, 0 1px 4px rgba(0,0,0,.1); }
@media (prefers-color-scheme: dark) { .seg [aria-pressed=true] { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); } }

/* Sheets: glass, floating in from the edges with the phone's own corner radius (concentric with the device). */
.m-phone .scrim { padding: 0 8px calc(var(--bottom) + 8px); background: rgba(0,0,0,.18); }
.m-phone .sheet { border-radius: 34px; background: color-mix(in srgb, var(--ground) 72%, transparent); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 0 0 0.5px var(--glass-edge), 0 20px 60px rgba(0,0,0,.25); padding: 0 16px 20px; }
.sh { background: transparent; }
.sh .done { width: auto; padding: 0 16px; border-radius: 999px; min-height: 36px; align-self: center; }
.sheet .fld.search input { background: rgba(255,255,255,.55); }

/* Under Reduce Transparency the glass frosts to solid, as the system does. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--card); }
  .glass, .m-phone .nav, .fab, .back, .avatar, .seg, .toast, .btn, .m-phone .sheet { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .m-phone .sheet { background: var(--ground); }
}

/* ======================= 0.9 (5 Nov 2026): subtraction ======================= */
/* One title per screen: the wordmark leaves the iPhone's top bar (the icon and the paper already say SMYO). */
.m-phone .hd .mark.wm, .m-phone .hd .filing > span:not(.mark) { display: none; }
/* Three text levels and one grey: title, body, footnote. */
.needs h2, .lately h2 { text-transform: none; letter-spacing: -0.01em; font-size: 1.0625rem; font-weight: 500; color: var(--ink); margin: 0 4px 8px; }
.cap, .sub, .later, .note { color: var(--grey); }
.sub { margin: -10px 0 18px; font-size: 0.9375rem; }
.later { margin: 14px 4px 0; font-size: 0.875rem; line-height: 1.45; }
/* Feature numbers: quiet, as on the site. */
.frow .no.glyph { background: none; color: var(--grey); width: auto; height: auto; border-radius: 0; font-size: 0.9375rem; font-weight: 400; display: block; }
.frow + .frow::before { left: 60px; }
/* Needs you: one row, photos, the question, a chevron. */
.qlist { background: var(--card); border-radius: var(--card-r); overflow: hidden; }
.qrow { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 12px 14px 12px 16px; text-align: left; color: var(--ink); min-height: 64px; }
.qrow:active { background: var(--press); }
.qrow .qthumbs { display: flex; flex-shrink: 0; }
.qrow .qthumbs img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--tint); box-shadow: 0 0 0 2px var(--card); }
.qrow .qthumbs img + img { margin-left: -14px; }
.qrow .qtx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.qrow .ask { font-size: 1.0625rem; }
.qrow .chev, .row .chev, .frow .go { font-size: 1.375rem; color: var(--grey); opacity: .7; }
.needs { margin-bottom: 22px; }
/* Queue: the pictures only, as Photos. A dot marks the ones waiting for you; details are a tap away. */
.m-phone .week .tile .tl { display: none; }
.week .tile { position: relative; }
.week .tile.waiting::after { content: ''; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 1px 4px rgba(0,0,0,.3); }
.wk .cap { color: var(--ink); font-size: 0.9375rem; }
/* Drawer: title, one line, contents. */
.m-phone .rows:not(.jobs) { margin-top: 4px; }
.addintro .cap { display: none; }

/* ======================= 0.9.1 (5 Nov 2026): iPad ======================= */
/* iPad portrait: the same floating glass capsule as the phone, sized to its three tabs and centred, not a full-width strip. */
.m-two .nav { position: fixed; left: 50%; right: auto; transform: translateX(-50%); width: min(420px, calc(100% - 48px)); bottom: calc(var(--bottom) + 14px);
  margin: 0; padding: 4px; border-radius: 999px; border: 0; z-index: 6;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 0.5px var(--glass-rim), 0 0 0 0.5px var(--glass-edge), var(--glass-shadow); }
.m-two .nav::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 42%); mix-blend-mode: soft-light; }
.m-two .nav a { border-radius: 999px; min-height: 54px; transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.m-two .nav a[aria-current=page] { background: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 4px rgba(0,0,0,.08); color: var(--ink); }
@media (prefers-color-scheme: dark) { .m-two .nav a[aria-current=page] { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); } }
.m-two .nav a:active { transform: scale(1.06); }
@media (prefers-reduced-transparency: reduce) { .m-two .nav { -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* iPad landscape: job names in the sidebar wrap rather than cut off. */
.m-three .rail .row .tx > span:first-child { white-space: normal; overflow: visible; text-overflow: clip; }
.m-three .rail .job { white-space: normal; }
/* A picture that fails to load (an expired link, no signal) shows as a plain tile, never a broken-image icon. */
img.nopic { visibility: hidden; }

/* 0.9.2 (5 Nov 2026): Instagram carousels in the queue */
.tile { position: relative; }
.tile .ncar { position: absolute; top: 6px; left: 6px; font-size: 0.6875rem; line-height: 1; padding: 4px 6px; border-radius: 999px;
  background: rgba(20, 20, 20, 0.62); color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.carousel { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 14px 0 6px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .hero.q { flex: 0 0 88%; width: 88%; margin: 0; scroll-snap-align: start; }

/* 0.9.3 (5 Nov 2026): Server finds, the weekly sweep */
.review .lede, .main .lede { max-width: 38rem; }
.sweep { margin-top: 18px; }
.sweep .sec { font-size: 1rem; font-weight: 500; margin: 26px 0 10px; padding-top: 10px; border-top: 1px solid var(--rule, #dadada); }
.rjobs { list-style: none; margin: 0; padding: 0; }
.rjob { padding: 12px 0 14px; border-bottom: 1px solid var(--rule, #dadada); }
.rj-h { font-size: 1.0625rem; margin: 0 0 4px; } .rj-h .no { color: var(--grey, #6b6b6b); font-variant-numeric: tabular-nums; margin-right: 6px; }
.rj-r { margin: 6px 0; line-height: 1.4; }
.rjob .seg { margin-top: 10px; }
.rtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rfind { position: relative; }
.rfind img, .rfind .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--tint); transition: opacity .2s; }
.rfind.off img { opacity: .38; }
.rfind .tick { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; line-height: 1; border: 1.5px solid #fff; background: rgba(20, 20, 20, .25); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.rfind.on .tick { background: #141414; border-color: #141414; }
.rfind .rcap { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .8125rem; line-height: 1.3; }
.rdone { position: sticky; bottom: calc(var(--bottom, 0px) + 84px); margin-top: 22px; padding: 12px 0; background: var(--ground); }
.m-three .rdone, .m-two .rdone { bottom: 0; }
.rdone .cap { margin: 0 0 8px; }
a.qrow { text-decoration: none; }
a.qrow .ask, a.qrow .cap { text-decoration: none; }
.qlist a.qrow + .qrow, .qlist .qrow + a.qrow { border-top: 1px solid var(--rule); }

/* ====================================================================================================
   The 'studio' look (6 Nov 2026, in the demo for Michael first). Everything below only applies when
   CONFIG.look is 'studio'; the live app keeps the classic look until he approves it.
   Home opens on the work: the week's photograph in black and white, full width, the greeting over it,
   as the website's Making; then the week in numbers, the next post as it will look, the features as
   pictures, and what happened to yours. Photographs settle in as they do on the website.
   ==================================================================================================== */
html[data-look=studio] { --ease: cubic-bezier(.22,1,.36,1); --sx-dark: #2F2C27; }
html[data-look=studio] .r-home .hd { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: calc(var(--top) + 10px) 16px 0; border: 0; background: none; z-index: 7; justify-content: flex-end; min-height: 0; pointer-events: none; }
html[data-look=studio] .r-home .hd > * { pointer-events: auto; }
html[data-look=studio] .r-home .hd .inl { display: none; }
html[data-look=studio] .r-home .hd .avatar { background: rgba(20,20,20,.28); color: #fff; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35); }

/* The photograph */
html[data-look=studio] .sx-hero { position: relative; margin: 0 -20px 0; height: min(74svh, 132vw); min-height: 420px; background: var(--sx-dark); color: #F8F6F2; overflow: hidden; }
html[data-look=studio] .sx-hero.plain { height: auto; min-height: 0; padding: calc(var(--top) + 64px) 20px 28px; }
html[data-look=studio] .sx-ph { position: absolute; inset: 0; display: block; }
html[data-look=studio] .sx-ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06); opacity: 0; transform: scale(1.045); transition: opacity 1.1s var(--ease), transform 1.6s var(--ease), filter .9s ease; }
html[data-look=studio] .sx-ph img.in { opacity: 1; transform: none; }
html[data-look=studio] .sx-hero.colour .sx-ph img { filter: none; }
html[data-look=studio] .sx-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(20,18,15,.38) 0, rgba(20,18,15,0) 22%, rgba(20,18,15,0) 46%, rgba(20,18,15,.72) 100%); }
html[data-look=studio] .sx-hero.plain::after { display: none; }
html[data-look=studio] .sx-wm { position: absolute; z-index: 2; top: calc(var(--top) + 14px); left: 20px; color: #F8F6F2; font-size: 1.625rem; }
html[data-look=studio] .sx-hero.plain .sx-wm { position: static; display: block; margin-bottom: 28px; color: var(--ink); }
html[data-look=studio] .sx-hero.plain { background: none; color: var(--ink); }
html[data-look=studio] .sx-lab { position: absolute; z-index: 2; top: calc(var(--top) + 62px); left: 20px; font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
html[data-look=studio] .sx-words { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 22px; }
html[data-look=studio] .sx-hero.plain .sx-words { position: static; }
html[data-look=studio] .sx-words h1 { font-size: clamp(2.5rem, 11vw, 3.75rem); font-weight: 400; letter-spacing: -0.045em; line-height: .98; margin: 0 0 14px; text-wrap: balance; }
html[data-look=studio] .sx-cap { margin: 0; font-size: 1.0625rem; line-height: 1.3; max-width: 30ch; }
html[data-look=studio] .sx-no { font-variant-numeric: tabular-nums; opacity: .8; margin-right: 4px; }
html[data-look=studio] .sx-by { margin: 4px 0 0; font-size: 0.8125rem; opacity: .78; padding-right: 110px; }
html[data-look=studio] .sx-colour { position: absolute; z-index: 3; right: 16px; bottom: 16px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; font-size: 0.8125rem; color: #fff; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35); }
html[data-look=studio] .sx-colour::before { content: ''; position: absolute; inset: -4px; }

/* Sections */
html[data-look=studio] .sx-grid { display: block; padding-top: 26px; }
html[data-look=studio] .sx-h { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--grey); margin: 0 2px 12px; }
html[data-look=studio] .sx-a > section, html[data-look=studio] .sx-b > section, html[data-look=studio] .sx-a > .needs { margin-bottom: 34px; }

/* The week in numbers, as the website's indexes: big light figures over small words */
html[data-look=studio] .sx-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
html[data-look=studio] .sx-n { padding: 12px 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
html[data-look=studio] .sx-n + .sx-n { padding-left: 12px; border-left: 1px solid var(--rule); }
html[data-look=studio] .sx-n b { font-size: clamp(2.5rem, 12vw, 3.25rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
html[data-look=studio] .sx-n span { font-size: 0.8125rem; color: var(--grey); line-height: 1.25; }
html[data-look=studio] .sx-line { margin: 14px 2px 0; font-size: 0.9375rem; color: var(--ink2); }
html[data-look=studio] .sx-line a { color: var(--ink); text-underline-offset: 3px; }

/* Features as pictures */
html[data-look=studio] .sx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-look=studio] .sx-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--sx-dark); color: #F8F6F2; text-decoration: none; isolation: isolate; }
html[data-look=studio] .sx-tile.t-instagram { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
html[data-look=studio] .sx-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1); opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
html[data-look=studio] .sx-tile.colour img { filter: none; }
html[data-look=studio] .sx-tile img.in { opacity: 1; transform: none; }
html[data-look=studio] .sx-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(20,18,15,.35), rgba(20,18,15,0) 30%, rgba(20,18,15,0) 45%, rgba(20,18,15,.75)); }
html[data-look=studio] .sx-tile.nopic { background: var(--card); color: var(--ink); }
html[data-look=studio] .sx-tile.nopic::after { display: none; }
html[data-look=studio] .sx-tile:active { transform: scale(.98); transition: transform .15s ease; }
html[data-look=studio] .sx-tno { position: absolute; top: 12px; left: 14px; font-size: 0.8125rem; opacity: .9; }
html[data-look=studio] .sx-tst { position: absolute; top: 10px; right: 10px; font-size: 0.75rem; padding: 4px 9px; border-radius: 12px; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-look=studio] .sx-tst.hot { background: #F8F6F2; color: #141414; font-weight: 500; }
html[data-look=studio] .sx-tnm { position: absolute; left: 14px; right: 12px; bottom: 34px; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.1; }
html[data-look=studio] .sx-tsub { position: absolute; left: 14px; right: 12px; bottom: 12px; font-size: 0.75rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-look=studio] .sx-later { margin: 0 0 34px; }
html[data-look=studio] .sx-lrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; border-top: 1px solid var(--rule); text-decoration: none; color: var(--grey); font-size: 1rem; }
html[data-look=studio] .sx-lrow .no { font-size: 0.8125rem; }
html[data-look=studio] .sx-lrow:last-child { border-bottom: 1px solid var(--rule); }

/* The next post, as it will look on Instagram */
html[data-look=studio] .ig { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); }
html[data-look=studio] .ig-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px; }
html[data-look=studio] .ig-ac { font-weight: 500; font-size: 0.9375rem; }
html[data-look=studio] .ig-ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tint); }
html[data-look=studio] .ig-ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .9s var(--ease); }
html[data-look=studio] .ig-ph img.in { opacity: 1; }
html[data-look=studio] .ig-cap { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 12px 14px 0; font-size: 0.9375rem; line-height: 1.4; }
html[data-look=studio] .ig-cap b { font-weight: 500; }
html[data-look=studio] .ig-st { padding: 10px 14px 14px; font-size: 0.8125rem; color: var(--grey); }
html[data-look=studio] .ig-st.hot { color: var(--ink); font-weight: 500; }

/* What happened to yours */
html[data-look=studio] .sx-yours ul { list-style: none; margin: 0; padding: 0 16px; background: var(--card); border-radius: var(--r); }
html[data-look=studio] .sx-yours li { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: .5px solid var(--rule); }
html[data-look=studio] .sx-yours li:last-child { border-bottom: 0; }
html[data-look=studio] .sx-yours img, html[data-look=studio] .sx-yours .nothumb { width: 56px; height: 70px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--tint); }
html[data-look=studio] .sx-yours .lt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.9375rem; }
html[data-look=studio] .sx-yours .lt > span:first-child { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
html[data-look=studio] .sx-yours .st-posted { color: var(--ink) !important; }

/* iPad and the open fold: the photograph across the top, then two columns */
html[data-look=studio] .pane.home.sx { position: relative; padding-top: 0; }
html[data-look=studio] .pane.home.sx > .avatar { position: absolute; z-index: 7; top: calc(var(--top) + 14px); right: 20px; background: rgba(20,20,20,.28); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-look=studio] .pane.home.sx .sx-hero { margin: 0 -28px; height: min(56vh, 620px); }
html[data-look=studio] .m-two .pane.home.sx .sx-hero { margin: 0 -20px; }
html[data-look=studio] .pane.home.sx .sx-wm, html[data-look=studio] .pane.home.sx .sx-lab, html[data-look=studio] .pane.home.sx .sx-words { left: 28px; }
html[data-look=studio] .pane.home.sx .sx-words { bottom: 30px; }
html[data-look=studio] .pane.home.sx .sx-words h1 { font-size: clamp(3rem, 6vw, 4.75rem); }
@container (min-width: 760px) {
  html[data-look=studio] .sx-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 34px; }
  html[data-look=studio] .sx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-look=studio] .sx-tile.t-instagram { grid-column: auto; aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-look=studio] .sx-ph img, html[data-look=studio] .sx-tile img, html[data-look=studio] .ig-ph img { transition: none; transform: none; opacity: 1; }
}

/* The 'studio' look: after Send, the photo's journey (sent, filed with its number, in the queue) */
html[data-look=studio] .sx-sent { padding-top: 8px; }
html[data-look=studio] .sx-sentph { position: relative; margin: 0 auto 22px; aspect-ratio: 4 / 5; height: min(44svh, 125vw); max-width: 100%; }
html[data-look=studio] .sx-sentph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); background: var(--tint); box-shadow: 0 10px 30px rgba(0,0,0,.14); transform: rotate(calc(var(--i) * -2.4deg)) translateY(calc(var(--i) * -6px)); transform-origin: 50% 100%; animation: sx-drop .7s var(--ease) both; }
html[data-look=studio] .sx-sentph img[style*="--i:0"] { transform: none; }
html[data-look=studio] .sx-sentph.filed img[style*="--i:0"] { animation: sx-file .9s var(--ease) both; }
html[data-look=studio] .sx-sentph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; display: flex; flex-direction: column; gap: 2px; color: #F8F6F2; border-radius: 0 0 var(--r) var(--r); background: linear-gradient(to bottom, rgba(20,18,15,0), rgba(20,18,15,.7)); animation: sx-rise .8s var(--ease) .15s both; }
html[data-look=studio] .sx-fno { font-size: clamp(2.25rem, 10vw, 3rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
html[data-look=studio] .sx-sent .title { margin: 0 0 14px; }
html[data-look=studio] .sx-steps { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--ink); }
html[data-look=studio] .sx-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--grey); transition: color .5s ease; }
html[data-look=studio] .sx-steps li .no { font-size: 0.8125rem; padding-top: 3px; }
html[data-look=studio] .sx-steps li .tx { display: flex; flex-direction: column; gap: 2px; }
html[data-look=studio] .sx-steps li b { font-weight: 400; font-size: 1.125rem; }
html[data-look=studio] .sx-steps li.done { color: var(--ink); }
html[data-look=studio] .sx-steps li.done b { animation: sx-rise .6s var(--ease) both; }
html[data-look=studio] .sx-steps li.next b::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; animation: sx-pulse 1.2s ease-in-out infinite; }
html[data-look=studio] .sx-sent .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@keyframes sx-drop { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes sx-file { 0% { transform: scale(1); } 40% { transform: scale(.965); } 100% { transform: scale(1); } }
@keyframes sx-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes sx-pulse { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  html[data-look=studio] .sx-sentph img, html[data-look=studio] .sx-sentph figcaption, html[data-look=studio] .sx-steps li b, html[data-look=studio] .sx-steps li.next b::after { animation: none; }
}
/* The 'studio' look elsewhere: the website's editorial headings */
html[data-look=studio] .title, html[data-look=studio] .title.big { font-weight: 400; font-size: clamp(2.25rem, 9vw, 2.75rem); letter-spacing: -0.04em; line-height: 1.02; }
html[data-look=studio] .pane.home.sx .sx-wm { display: none; }
html[data-look=studio] .pane.home.sx .sx-lab { top: calc(var(--top) + 26px); }
html[data-look=studio] .sx-a > .needs h2 { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--grey); margin: 0 2px 12px; }