:root {
  /* Swap this one line to change the whole page.
     serif : Charter, Georgia, serif
     mono  : ui-monospace, "SF Mono", Menlo, monospace
     times : "Times New Roman", Times, serif        (the aratame.me original) */
  --font: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;

  --bg:      #0a0a0a;
  --fg:      #e8e6e2;
  --muted:   #83807b;
  --link:    #8c8cff;
  --visited: #b9a0e8;
  --line:    #232323;
  --col:     720px;
  --pad:     32px;   /* side padding; the filmstrips bleed by exactly this much */
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--font);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: var(--col);
  margin: 0 auto;
  padding: 88px var(--pad) 200px;
}

h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
}

/* name row - the photo gets the same square hairline treatment as the video
   thumbnails so it reads as part of the page, not a bolted-on avatar */
.head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.head h1 { margin: 0; }

/* The frame stays put; the photo inside it drifts. Scaling the image rather
   than the box means the hairline border never moves. */
.pfp {
  display: block;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  animation: pfp-in .7s ease both;
  /* the box itself only moves on hover; transform doesn't reflow, so growing
     it can't push the name sideways */
  transition: transform .35s ease, border-color .35s ease;
}

.head:hover .pfp {
  transform: scale(1.2);
  border-color: var(--link);
}

.pfp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* desaturated at rest so the orange room behind him stops competing at 76px,
     full colour when the name row is hovered */
  filter: grayscale(1) contrast(1.06);
  transition: filter .5s ease;
  animation: pfp-drift 9s ease-in-out infinite alternate;
  will-change: transform;
}

.head:hover .pfp img { filter: none; }

@keyframes pfp-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* wide to close and back. 22% over 9s is enough to read as movement at 76px -
   the earlier 10% over 14s was technically running but invisible. */
@keyframes pfp-drift {
  from { transform: scale(1)    translate(0, 0); }
  to   { transform: scale(1.22) translate(-3%, -2.5%); }
}

/* section - "video", "a few things i've done" */
h2 {
  font-size: inherit;
  font-weight: 600;
  margin: 56px 0 4px;
}

/* subsection - "ad films & launches", "roles" */
h3 {
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 32px 0 14px;
  color: var(--muted);
}

p { margin: 0 0 14px; }

/* collapsible section - the summary is styled as an h3 with a bracket toggle,
   matching the [ link ] convention used everywhere else */
details.more { margin: 32px 0 22px; }

details.more > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

details.more > summary::-webkit-details-marker { display: none; }

details.more > summary::after {
  content: " [ + ]";
  color: var(--link);
  text-decoration: none;
}

details.more[open] > summary::after { content: " [ - ]"; }

details.more > p { margin-top: 14px; }

a          { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:visited  { color: var(--visited); }

strong { font-weight: 600; }

.links { margin-bottom: 10px; }
.note  { color: var(--muted); margin-bottom: 22px; }
.hint  { opacity: .7; }

/* --- entries ------------------------------------------------------------- */

.entry { margin: 0 0 22px; }

.entry .t { font-weight: 600; }
.entry .m { color: var(--muted); font-weight: 400; }
.entry .d { margin-top: 1px; }
.entry .l { margin-top: 1px; }

/* video entries that have something to preview become hoverable */

.v.has-preview {
  cursor: pointer;
  padding-left: 16px;
  margin-left: -17px;
  border-left: 1px solid transparent;
  transition: border-color .15s ease;
}

.v.has-preview:hover,
.v.has-preview:focus-visible {
  border-left-color: var(--link);
  outline: none;
}

/* inline preview - used on narrow screens and touch, where there is no gutter */

.v .inline {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: #000;
  border: 1px solid var(--line);
}

/* --- thumbnails ---------------------------------------------------------- */

/* The strip bleeds sideways by exactly the page padding, so cards can scroll to
   the screen edge while still starting flush with the text column. */
.strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 calc(-1 * var(--pad)) 26px;
  padding: 0 var(--pad) 12px;
  scroll-padding-left: var(--pad);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #2e2e2e transparent;
}

/* Once the window is wider than the text column, the column stops growing and
   gutters open up either side. Extend the strip's right edge across that gutter
   so it runs to the window edge instead of stopping short. --sbw is the
   scrollbar width, measured in main.js, so this can't overflow the page. */
@media (min-width: 721px) {
  .strip {
    margin-right: calc(
      (var(--col) / 2 - var(--pad)) - (100vw - var(--sbw, 0px)) / 2
    );
    padding-right: 44px;
  }
}

.strip::-webkit-scrollbar        { height: 6px; }
.strip::-webkit-scrollbar-track  { background: transparent; }
.strip::-webkit-scrollbar-thumb  { background: #2e2e2e; border-radius: 3px; }
.strip:hover::-webkit-scrollbar-thumb { background: #3d3d3d; }

.card {
  flex: 0 0 252px;
  scroll-snap-align: start;
  color: var(--fg);
  text-decoration: none;
}

.card[data-href] { cursor: pointer; }

.thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .15s ease;
}

.card[data-href]:hover .thumb,
.card:focus-within .thumb { border-color: var(--link); }
.card .ct a:focus-visible { outline: none; }

.thumb img,
.thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* vertical cuts sit inside the same 16:9 box rather than being cropped to a
   sliver - pillarboxed on black, which reads correctly as "this is vertical" */
.card[data-aspect="9/16"] .thumb img,
.card[data-aspect="9/16"] .thumb video { object-fit: contain; }

.thumb video { opacity: 0; transition: opacity .2s ease; }
.thumb video.on { opacity: 1; }

.ct { margin-top: 9px; font-weight: 600; }
.cm { color: var(--muted); }
.cn { color: var(--muted); }
.cl { margin-top: 2px; }

/* the title is a link so keyboard and right-click work, but it should read as
   a title, not a link - the thumbnail above it is the affordance */
.ct a          { color: inherit; text-decoration: none; }
.ct a:visited  { color: inherit; }

/* --- lightbox ------------------------------------------------------------ */

#lb {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6, 6, 6, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 24px;
}

#lb[hidden] { display: none; }

#lb .lb-box {
  width: 100%;
  max-width: 1100px;
  max-height: 100%;
}

#lb video {
  display: block;
  width: 100%;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);   /* dvh so a phone's toolbar can't clip it */
  background: #000;
}

#lb[data-aspect="9/16"] .lb-box { max-width: min(460px, 56vh); }

#lb .lb-x {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 9px 11px;                 /* ~44px tap target */
  background: none;
  border: 0;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --- gutter preview ------------------------------------------------------ */

#preview {
  position: fixed;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  background: #000;
  border: 1px solid var(--line);
  transition: opacity .18s ease;
}

#preview.on { opacity: 1; }

/* both absolutely positioned so they can never stack and double the panel's
   height - only one is ever unhidden anyway */
#preview img,
#preview video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#preview [hidden] { display: none; }

/* --- tablet --------------------------------------------------------------- */

/* Portrait tablets get the full column but a little less dead space above it,
   and slightly narrower cards so a third one always peeks into view. */
@media (min-width: 641px) and (max-width: 1024px) {
  :root { --pad: 28px; }
  body  { font-size: 16px; }             /* touch device, arm's length */
  main  { padding-top: 64px; padding-bottom: 140px; }
  .card { flex-basis: 236px; }
}

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --pad: 20px; }

  body { font-size: 16px; }              /* 15px is tight on a phone */
  main { padding-top: 44px; padding-bottom: 104px; }
  h1   { font-size: 26px; margin-bottom: 18px; }
  .head { gap: 14px; margin-bottom: 18px; }
  .pfp  { width: 64px; height: 64px; }
  h2   { margin-top: 44px; }
  h3   { margin-top: 28px; }

  /* Cards run near-full-width with the next one peeking, which is the only
     scroll affordance that survives iOS hiding its scrollbars. */
  .card  { flex-basis: min(78vw, 320px); }
  .strip { scroll-snap-type: x mandatory; padding-bottom: 8px; }

  /* fingers, not cursors */
  .links a { display: inline-block; padding: 4px 1px; }
  .entry   { margin-bottom: 24px; }

  #lb       { padding: 50px 12px 12px; }
  #lb video { max-height: calc(100dvh - 78px); }
  #lb[data-aspect="9/16"] .lb-box { max-width: min(100%, 50vh); }
}

/* Landscape phone: almost no vertical room, so give it all to the video. */
@media (max-height: 480px) and (orientation: landscape) {
  #lb       { padding: 42px 12px 10px; }
  #lb video { max-height: calc(100dvh - 58px); }
  #lb[data-aspect="9/16"] .lb-box { max-width: min(100%, 42vh); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .pfp     { opacity: 1; }
  .pfp img { transform: none; }
}