/* ============================================================
   home-preview.css — EXPERIMENT. Scoped to /home-preview only.

   Colours: none are defined here. Every colour is a var() from ../css/tokens.css (the
   site's own palette), so nothing new can creep in; the only literals are `transparent`
   and `currentColor`. Fonts likewise come from tokens.css.

   Text is the darkest ink (--ink, 12.67:1 on --ground) throughout. Colour comes from the
   company palette (blue / green / orange, the 700 stops), each measured at 5.9:1 or better
   against cream, and from the marker orange and apricot on the role chips.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-padding-block:6rem;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul{margin:0;padding:0;}
ul{list-style:none;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px;}

.skip-link{
  position:absolute;left:var(--step);top:-4rem;z-index:300;
  background:var(--ink);color:var(--apricot-50);
  font-family:var(--ui);font-size:.95rem;padding:.6rem .9rem;border-radius:.4rem;
}
.skip-link:focus{top:var(--step);}

/* --- the one grid everything hangs on --------------------------------
   A container with the site's own gutter, a label column on the left and the content on
   the right. Every section, and the wordmark and hero above them, share this left edge. */
.container{
  max-width:96rem;
  margin-inline:auto;
  padding-inline:var(--step);
}
:root{
  --label-col:clamp(11rem,19vw,17rem);   /* wide enough for a company's name and its full description */
  --gap:clamp(1.25rem,3vw,3rem);
  --col-gap:clamp(2.5rem,7.5vw,7.5rem);   /* space between the side column and the content: generous, so a company's text never crowds its rows */
  --section-space:clamp(4.5rem,11vw,9rem);
  --row-pad:clamp(.75rem,2vw,1.5rem);
}
.section-grid{
  display:grid;
  grid-template-columns:var(--label-col) minmax(0,1fr);
  column-gap:var(--col-gap);
  align-items:start;
}
.section{padding-block:var(--section-space) 0;}
.section-label{padding-top:.35rem;}
@font-face{font-family:"GT America Condensed";src:url("../fonts/gt-america-condensed-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
:root{--gt:"GT America Condensed",var(--ui);}

.pill{
  display:inline-block;
  font-family:var(--gt);font-weight:500;
  font-size:.9rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--ink);
  border:1px solid currentColor;border-radius:999px;
  padding:.55rem .95rem;
  white-space:nowrap;
}
@media (max-width:47.99rem){
  .section-grid{grid-template-columns:minmax(0,1fr);row-gap:1.5rem;}   /* the label stacks above the content */
  .section-label{padding-top:0;}
}

/* ============================================================
   MASTHEAD — "ronny", large across the top.
   font-size is the container's width divided by the word's own width-to-size ratio, so the
   word always spans the content box. The intro overlay uses these same rules in the same
   box, which is what makes the handoff land without a jump.
   ============================================================ */
.masthead{padding-top:clamp(1rem,2.6vw,2.25rem);}
.masthead .container{container-type:inline-size;}
.wordmark{
  font-family:var(--display);
  font-size:calc(100cqw / var(--wm-ratio,2.6));   /* "ronny" spans 2.446 x its font size in Harry Obese, plus 4 gaps of tracking */
  line-height:.78;
  /* Tracking opens the gaps between the letters. At the font's default spacing the n-n-y
     joints close up into one dark mass on cream and the word is hard to read; light-on-dark
     (the intro) hides that, dark-on-light does not. Used by the intro's wordmark too, so
     the two stay identical. */
  letter-spacing:.035em;
  margin-right:-.035em;           /* the last letter's trailing tracking, so the ink still reaches the edge */
  font-kerning:none;              /* the intro splits the word into letters; kerning off keeps both identical */
  white-space:nowrap;
  color:var(--ink);
  padding-bottom:.16em;           /* room for the y's descender below the tight line box */
}

/* ============================================================
   ROLES — tucked under "ronn"
   The y's tail leaves a band free under the first four letters. Measured in Harry Obese, in
   units of the wordmark's font size (--fs): the baseline sits 0.62 from the top of the word,
   the y's tail reaches 0.87, and the tail starts about 2.05 from the left. So the band is
   ~0.23 tall and ~2.0 wide, and the three chips are sized to sit inside it.
   ============================================================ */
.wm-wrap{
  position:relative;
  --fs:calc(100cqw / var(--wm-ratio,2.6));
}
.roles{
  position:absolute;
  left:calc(var(--fs) * .015);
  top:calc(var(--fs) * .685);
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:calc(var(--fs) * .02);
  font-size:calc(var(--fs) * .075);
}
.chip{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--display-alt);font-weight:400;
  line-height:1;letter-spacing:.01em;white-space:nowrap;
  padding:.46em .9em .5em;
  border:2px solid var(--ink);border-radius:999px;
  transform:rotate(var(--tilt,0deg));
  transition:transform .2s ease;
  animation:chipPop .5s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i,0) * 90ms + 150ms);
}
.chip:nth-child(1){background:var(--ink);color:var(--apricot-50);}       /* 12.67:1 */
.chip:nth-child(2){background:var(--highlight);color:var(--ink);}          /* 5.21:1, the site's own marker orange */
.chip:nth-child(3){background:var(--apricot-200);color:var(--ink);}
.chip-icon{width:1.05em;height:1.05em;flex:none;}
@media (hover:hover){
  .chip:hover{transform:rotate(0deg) translateY(-.12em);}
}
@keyframes chipPop{
  from{opacity:0;transform:translateY(-.5em) rotate(calc(var(--tilt,0deg) * 4)) scale(.6);}
}
/* Held back until the intro has finished (the head script sets roles-wait; home-preview.js
   removes it). The failsafe animation shows them anyway if the script never loads. */
html.roles-wait .chip{opacity:0;animation:chipFailsafe 0s linear 5s forwards;}
@keyframes chipFailsafe{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .chip{animation:none;transition:none;}
}
html.reduce-motion .chip{animation:none;transition:none;}

/* Narrow screens have no band to tuck into: a plain right-aligned list under the word. */
@media (max-width:47.99rem){
  .roles{
    position:static;
    display:block;
    margin-top:clamp(.25rem,2vw,.75rem);
    font-family:var(--body);
    font-size:clamp(1.5rem,6.4vw,2rem);
    line-height:1.14;
    text-align:right;
  }
  .chip{
    display:block;padding:0;border:0;border-radius:0;background:transparent;transform:none;
    animation:none;color:var(--ink);font-family:var(--body);letter-spacing:0;
  }
  .chip:nth-child(n){background:transparent;color:var(--ink);}
  .chip-icon{display:none;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-block:clamp(3.5rem,9vw,8rem) 0;}
/* One block, one size, left-aligned on the page's left edge (the wordmark's edge): the whole intro sentence reads as a single statement. */
.hero-statement{
  font-family:var(--statement);
  font-weight:400;
  font-size:clamp(1.75rem,3.7vw,3.5rem);
  line-height:1.16;
  letter-spacing:.005em;
  text-align:left;
  max-width:21em;
  color:var(--ink);                /* one colour, the darkest ink: 12.67:1 on the page ground */
  text-wrap:balance;
}

/* ============================================================
   WORK LIST
   Each company is a block: its name and full description sit in the side (label) column and
   its projects run to the right, with generous space between the two. Every company
   keeps its own colour from the current home page, through two properties set on the
   .company in the HTML:
     --co-fill  the 700 stop: the company's name and the row's hover fill. Cream text on it
                is 6.2:1 (OCLC blue), 5.9:1 (CAS green) and 6.6:1 (Craft orange).
     --co-rail  the rail colour: the rule above the company's rows.
   ============================================================ */
.section--work{--row-ink:var(--apricot-50);}

.company{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:var(--label-col) minmax(0,1fr);
  column-gap:var(--col-gap);
  align-items:start;
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
.section-label + .company{margin-top:clamp(1.75rem,3vw,2.5rem);}

.co-info{padding-top:clamp(1rem,1.8vw,1.35rem);}
.co-name{
  font-family:var(--display-alt);font-weight:400;
  font-size:clamp(1.9rem,3.2vw,3rem);
  line-height:.98;letter-spacing:-.005em;text-transform:uppercase;
  color:var(--co-fill);
}
.co-icon{
  display:inline-block;
  width:.82em;height:.82em;
  margin-right:.3em;
  vertical-align:-.06em;
}
.co-desc{
  margin-top:clamp(.7rem,1.2vw,1rem);
  max-width:36ch;
  font-family:var(--body-text);
  font-size:clamp(1rem,1.1vw,1.1rem);
  line-height:1.42;letter-spacing:.022em;
  color:var(--ink);
}

.rows{border-top:3px solid var(--co-rail);}
.rows li{border-bottom:1px solid var(--rule);}

.row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--gap);
  align-items:center;
  /* padding + equal negative margin: the text sits on the grid edge at rest, and the fill
     that appears on hover reaches a little past it */
  padding:clamp(1.1rem,2.2vw,1.7rem) var(--row-pad);
  margin-inline:calc(-1 * var(--row-pad));
  color:var(--ink);
  text-decoration:none;
  background:transparent;
  transition:background-color .2s ease,color .2s ease;
}
.row-title{
  font-family:var(--display-alt);font-weight:400;
  font-size:clamp(1.7rem,4.2vw,3.4rem);
  line-height:.95;letter-spacing:-.005em;text-transform:uppercase;
  text-wrap:balance;
}
.row-tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end;}
.tag{
  font-family:var(--gt);font-weight:500;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  border:1px solid currentColor;border-radius:999px;
  padding:.4rem .7rem;
  color:inherit;
  background:transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}

/* Hover (on devices that have it) and keyboard focus fill the row with the company's colour,
   flip the text to cream and fill the tag pills. The focus ring is the cream ink drawn just
   inside the filled row: the site's black ring would vanish on a dark fill. */
@media (hover:hover){
  .row:hover{background:var(--co-fill);color:var(--row-ink);}
  .row:hover .tag{background:var(--row-ink);color:var(--co-fill);border-color:var(--row-ink);}
}
.row:focus-visible{
  background:var(--co-fill);color:var(--row-ink);
  outline:2px solid var(--row-ink);outline-offset:-7px;border-radius:0;
}
.row:focus-visible .tag{background:var(--row-ink);color:var(--co-fill);border-color:var(--row-ink);}

/* Tablet: the side column would be too narrow for a company's description, so each company
   stacks: name and description, then its rows, all in the content column. */
@media (min-width:48rem) and (max-width:63.99rem){
  .company{grid-column:2;display:block;}
  .co-info{padding-top:0;margin-bottom:clamp(1.6rem,3.4vw,2.25rem);}
  .co-desc{max-width:52ch;}
}

/* Phone: the same stack across the full width, and each row stacks too: title, then tags. */
@media (max-width:47.99rem){
  .company{grid-column:1 / -1;display:block;}
  .co-info{padding-top:0;margin-bottom:1.6rem;}
  .row{grid-template-columns:minmax(0,1fr);row-gap:.7rem;align-items:start;}
  .row-tags{justify-content:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  .row,.tag{transition:none;}
}
html.reduce-motion .row,
html.reduce-motion .tag{transition:none;}

/* ============================================================
   ABOUT
   ============================================================ */
.section--about{padding-bottom:var(--section-space);}
.about-bio{
  max-width:52ch;
  font-family:var(--body-text);
  font-size:clamp(1.15rem,1.68vw,1.4rem);
  line-height:1.38;letter-spacing:.022em;
  color:var(--ink);
  text-wrap:pretty;
}
.about-bio + .about-bio{margin-top:clamp(.7rem,1.5vw,1.1rem);}

/* The prints keep the site's polaroid look, laid on the grid: three equal columns under the
   copy, sharing its left edge. */
.about-photos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.6vw,2.5rem);
  max-width:56rem;
  margin-top:clamp(2.5rem,6vw,4.5rem);
}
.polaroid{
  margin:0;
  background:var(--panel);
  padding:var(--polaroid-pad) var(--polaroid-pad) var(--polaroid-chin);
  box-shadow:var(--polaroid-shadow);
  transform:rotate(-2.5deg);
}
.polaroid:nth-child(even){transform:rotate(2deg);}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;}   /* height:auto so the photos' height attributes do not beat the square crop */
@media (max-width:47.99rem){
  .about-photos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .about-photos .polaroid:nth-child(3){grid-column:1 / -1;max-width:calc(50% - .5rem);}
}
@media (prefers-reduced-motion:reduce){
  .polaroid,.polaroid:nth-child(even){transform:none;}
}

/* ============================================================
   FOOTER — the closing green, as on the current home page.
   --focus-ring is overridden for the same reason: black is invisible on it.
   ============================================================ */

/* ============================================================
   INTRO OVERLAY
   Hidden unless the head script set html.intro-on. It reuses .masthead/.container/.wordmark,
   so the panel's wordmark occupies the same box as the real one. Everything moving is set
   inline by home-preview.js from a single clock, so a frame can be rendered at any time
   (?introAt=ms) for review.
   ============================================================ */
.intro,.intro-skip{display:none;}
html.intro-on .intro{display:block;}
html.intro-on .intro-skip{display:block;}
html.intro-lock{overflow:hidden;}

.intro{
  position:fixed;inset:0;z-index:200;
  background:var(--forest-900);
  color:var(--apricot-50);
  will-change:transform;
}
.intro .wordmark{color:var(--apricot-50);}
/* each letter rides up from behind a mask. The mask is padded generously so nothing is clipped,
   and the negative margins cancel the padding so letters sit exactly where they do unsplit. */
.intro-mask{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding:.16em .06em .3em;margin:-.16em -.06em -.3em;
}
.intro-letter{display:inline-block;will-change:transform;transform:translateY(120%);}

.intro-bar{position:absolute;left:0;right:0;bottom:clamp(2rem,7vw,4.5rem);}
.intro-bar-inner{
  max-width:96rem;margin-inline:auto;padding-inline:var(--step);
  display:flex;align-items:center;gap:1rem;
}
.intro-count{
  font-family:var(--gt);font-weight:500;font-size:.95rem;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  min-width:2.6ch;
}
.intro-line{
  flex:1;height:1px;background:var(--apricot-50);
  transform:scaleX(0);transform-origin:left center;
}

.intro-skip{
  position:fixed;z-index:210;
  right:var(--step);bottom:calc(clamp(2rem,7vw,4.5rem) + 1.6rem);
  font-family:var(--gt);font-weight:500;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--apricot-50);
  background:transparent;
  border:1px solid currentColor;border-radius:999px;
  padding:.55rem .95rem;
  cursor:pointer;
  --focus-ring:var(--apricot-50);
}
.intro-skip:focus-visible{outline:2px solid var(--apricot-50);outline-offset:3px;}

/* If the script never loads, the panel gets out of the way on its own. */
html.intro-on .intro,html.intro-on .intro-skip{animation:introFailsafe 0s linear 4s forwards;}
@keyframes introFailsafe{to{visibility:hidden;}}

/* ============================================================
   poster.css — EXPERIMENT (poster variant). Loaded after ../home-preview.css and styles only
   the two poster sections; everything else (intro, wordmark, roles, hero, footer) is shared.

   Colours: none defined here; every one is a var() from ../../css/tokens.css.
   Fonts: unchanged (Harry Obese / Harry Fat / Knockout / --ui).

   The layout takes principles, not pictures, from Swiss poster design:
     - scale contrast: a giant word cropped by the edge of its field against small type;
     - one strict axis: the small type of every panel starts on the same vertical line;
     - flat colour fields with hairline rules;
     - overlap: a darker plane crossing the giant letters, photos laid over type.
   ============================================================ */

/* ---------- SELECTED WORK: three colour fields --------------------------------------------- */
.poster-work{padding-bottom:0;}
.panel{
  position:relative;
  margin-top:clamp(1rem,2vw,1.5rem);
  background:var(--panel);
  color:var(--apricot-50);
  overflow:hidden;                                  /* crops the giant word at the field's bottom edge */
}
.poster-work .container + .panel{margin-top:clamp(1.25rem,2.5vw,2rem);}

.panel-inner{
  max-width:96rem;margin-inline:auto;
  padding:clamp(2rem,4.5vw,4rem) var(--step) 0;
  container-type:inline-size;                        /* the giant word is sized against this box */
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto 1fr;
  column-gap:var(--gap);
}
.panel-index{
  grid-column:1 / 5;grid-row:1;
  font-family:var(--gt);font-weight:500;font-size:.9rem;letter-spacing:.14em;line-height:1;
}

/* the strict axis: small type starts on the same vertical line in every panel */
.panel-info{
  grid-column:7 / -1;grid-row:1 / span 2;
  padding-bottom:clamp(2rem,4vw,3.5rem);
}
.panel-name{
  display:flex;align-items:center;gap:.6em;
  font-family:var(--display-alt);font-weight:400;
  font-size:clamp(1.15rem,1.6vw,1.5rem);
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
}
.p-icon{width:1.15em;height:1.15em;flex:none;}
/* the OCLC and CAS icons are supplied as transparent PNGs: used as a mask, so they take the panel's text colour */
.p-icon--book,.p-icon--flask{
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:var(--icon) center / contain no-repeat;
  mask:var(--icon) center / contain no-repeat;
}
.p-icon--book{--icon:url(../images/icons/oclc-book.png);}
.p-icon--flask{--icon:url(../images/icons/cas-flask.png);}
.panel-desc{
  margin-top:clamp(.9rem,1.5vw,1.3rem);
  font-family:var(--body-text);
  font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.45;letter-spacing:.022em;
}
.panel-list{margin-top:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--apricot-50);}
.panel-list li{border-bottom:1px solid var(--apricot-50);}

.proj{
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr) auto;
  column-gap:.9rem;
  align-items:center;
  padding:clamp(.85rem,1.6vw,1.2rem) .7rem;             /* hover fill stays exactly as wide as the rules */
  color:inherit;text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.proj-n{font-family:var(--gt);font-weight:500;font-size:.9rem;letter-spacing:.08em;}
.proj-t{
  font-family:var(--display-alt);font-weight:400;
  font-size:clamp(1.35rem,2.2vw,2rem);
  line-height:1;text-transform:uppercase;letter-spacing:-.005em;
}
.proj-tags{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end;}
.proj:hover,.proj:focus-visible{background:var(--apricot-50);color:var(--panel);}
.proj:hover .tag,.proj:focus-visible .tag{background:var(--panel);color:var(--apricot-50);border-color:var(--panel);}
.proj:focus-visible{outline:2px solid var(--panel);outline-offset:-6px;border-radius:0;}

/* the giant word: bottom-left, cropped by the field's edge */
.panel-word{
  --word-w:46cqw;
  grid-column:1 / 7;grid-row:2;align-self:end;
  position:relative;
  width:var(--word-w);
  font-family:var(--display);
  font-size:calc(var(--word-w) / var(--ratio));
  line-height:.78;
  letter-spacing:.02em;
  font-kerning:none;
  white-space:nowrap;
  margin-bottom:-.27em;                              /* the crop: cuts a slice off the letters' feet */
  color:var(--panel-deep);                           /* one tone only: the panel's deepest */
  user-select:none;
}
.panel-word .w{display:block;}

/* the two-line word (craft / media) gets a gentler crop, so its second line stays legible */
.panel--craft .panel-word{margin-bottom:-.2em;}
/* cas has four rows, so its info column sets a tall panel; a larger word fills the left side instead of leaving it empty */
.panel--cas .panel-word{--word-w:49cqw;}
.panel--cas .proj{padding-block:clamp(.65rem,1.2vw,.9rem);}
.panel--cas .panel-info{padding-bottom:clamp(1.25rem,2.5vw,2rem);}

/* below desktop: info first, the giant word full width beneath it */
@media (max-width:63.99rem){
  .panel-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;}
  .panel-index{grid-column:1;grid-row:1;margin-bottom:1.1rem;}
  .panel-info{grid-column:1;grid-row:2;padding-bottom:clamp(2rem,6vw,3rem);}
  .panel-word{--word-w:100cqw;grid-column:1;grid-row:3;}
}
@media (max-width:47.99rem){
  .proj{grid-template-columns:1.9rem minmax(0,1fr);row-gap:.5rem;}
  .proj-tags{grid-column:2;justify-content:flex-start;}
}

/* ---------- ABOUT: type, then photos laid over it ------------------------------------------ */
.poster-about{padding-bottom:var(--section-space);}
.about-poster{
  position:relative;
  container-type:inline-size;
  margin-top:clamp(2rem,4vw,3.5rem);
  aspect-ratio:16 / 9.9;
  overflow:hidden;
}
.about-word{
  position:absolute;
  font-family:var(--display);
  line-height:.78;letter-spacing:.02em;font-kerning:none;white-space:nowrap;
  user-select:none;
}
/* "about" in the darkest ink, large at top-left; "me" in apricot, bottom-right, cropped by the edge */
.about-word--about{
  left:1cqw;top:0;z-index:2;
  font-size:calc(62cqw / 2.578);
  color:var(--ink);
}
.about-word--me{
  right:-.5cqw;top:36cqw;z-index:1;
  font-size:calc(48cqw / 1.389);
  color:var(--apricot-300);
}
/* the bio: two small columns on the same axis as the work panels' small type, laid over the "me" */
.about-copy{
  position:absolute;z-index:3;
  left:54cqw;top:21cqw;width:44cqw;
  column-count:2;column-gap:2.4cqw;
}
.about-bio{
  break-inside:avoid;
  font-family:var(--body-text);
  font-size:clamp(.95rem,1.15vw,1.15rem);
  line-height:1.4;letter-spacing:.022em;
  color:var(--ink);
  max-width:none;
}
.about-bio + .about-bio{margin-top:0;}
/* the polaroids: three prints in a loose stack, overlapping the foot of "about" */
.about-photos{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none;}
.about-photos .polaroid{
  position:absolute;width:15.5cqw;
  pointer-events:auto;
  transform:rotate(var(--tilt,0deg));
  margin:0;
}
.about-photos .polaroid:nth-child(1){left:3cqw;top:14cqw;--tilt:-4deg;}
.about-photos .polaroid:nth-child(2){left:15cqw;top:24cqw;--tilt:3deg;width:17cqw;z-index:2;}
.about-photos .polaroid:nth-child(3){left:31cqw;top:16cqw;--tilt:-2.5deg;}

/* below desktop: the same pieces in a stack, still overlapping */
@media (max-width:63.99rem){
  .about-poster{
    aspect-ratio:auto;overflow:visible;
    display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(1.25rem,4vw,2rem);
  }
  .about-word{position:relative;}
  .about-word--about{grid-row:1;left:0;top:0;font-size:calc(100cqw / 2.578);}
  .about-word--me{grid-row:2;right:auto;bottom:auto;left:0;margin-top:-.72em;margin-bottom:-.24em;font-size:calc(70cqw / 1.389);}
  .about-copy{grid-row:3;position:relative;z-index:3;left:auto;top:auto;width:auto;column-count:1;}
  .about-bio{font-size:clamp(1.05rem,2.4vw,1.2rem);}
  .about-bio + .about-bio{margin-top:.9rem;}
  .about-photos{
    grid-row:4;position:static;height:auto;pointer-events:auto;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,2.4vw,1.5rem);
  }
  .about-photos .polaroid,
  .about-photos .polaroid:nth-child(n){position:static;width:auto;left:auto;top:auto;z-index:auto;}
  .about-photos .polaroid:nth-child(3){grid-column:auto;max-width:none;}   /* undo the base sheet's 2 + 1 phone arrangement */
  .about-photos .polaroid:nth-child(1){--tilt:-3deg;}
  .about-photos .polaroid:nth-child(2){--tilt:2.5deg;}
  .about-photos .polaroid:nth-child(3){--tilt:-2deg;}
}

@media (max-width:47.99rem){
  .about-photos{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (prefers-reduced-motion:reduce){
  .proj,.tag{transition:none;}
  .about-photos .polaroid{transform:none;}
}
html.reduce-motion .proj,
html.reduce-motion .tag{transition:none;}

/* ============================================================
   TRAVEL MAP: the "traveling" link in the About bio and its dialog
   ============================================================ */
.travel-link{
  font:inherit;letter-spacing:inherit;color:inherit;
  background:none;border:0;padding:0 .08em;margin:0;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;
  border-radius:2px;
  transition:background-color .2s ease;
}
.travel-link:hover{background:var(--apricot-200);}
.travel-link.is-plain{text-decoration:none;cursor:text;}
html.travel-lock{overflow:hidden;}

.travel{
  width:min(64rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);
  margin:auto;padding:clamp(1rem,2.4vw,1.75rem);
  background:var(--apricot-50);color:var(--ink);
  border:1px solid var(--ink);border-radius:0;
  overflow:auto;
}
.travel::backdrop{background:var(--forest-900);opacity:.72;}
.travel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.travel-title{
  font-family:var(--display-alt);font-weight:400;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;text-transform:uppercase;letter-spacing:-.005em;
}
.travel-close,.travel-tab{
  font-family:var(--gt);font-weight:500;
  font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--ink);background:transparent;
  border:1px solid currentColor;border-radius:999px;
  padding:.55rem .95rem;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.travel-close:hover,.travel-tab:hover{background:var(--apricot-200);}
.travel-tab[aria-pressed="true"]{background:var(--ink);color:var(--apricot-50);}
.travel-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}
.travel-map{
  margin-top:1rem;background:var(--apricot-100);
  aspect-ratio:1000 / 576;display:grid;place-items:center;
}
.travel-svg{display:block;width:100%;height:100%;}
.travel-loading{font-family:var(--body-text);font-size:1.05rem;letter-spacing:.022em;padding:1rem;text-align:center;}
.travel-svg .c{fill:var(--apricot-200);stroke:var(--apricot-100);stroke-width:.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.travel-svg .c.visited{fill:var(--forest-700);}
.travel-svg .c.soon{fill:var(--orange-500);}
.travel-svg .c.st{stroke:var(--apricot-50);}
.travel-legend{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.9rem;
  font-family:var(--gt);font-weight:500;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;}
.travel-legend li{display:flex;align-items:center;gap:.5rem;}
.sw{width:1rem;height:1rem;display:inline-block;}
.sw--visited{background:var(--forest-700);}
.sw--soon{background:var(--orange-500);}
.travel-lists{margin-top:1rem;display:grid;gap:.6rem;
  font-family:var(--body-text);font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.4;letter-spacing:.022em;}
.travel-lists strong{font-family:var(--gt);font-weight:500;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;margin-right:.5em;}
@media (prefers-reduced-motion:reduce){.travel-link,.travel-close,.travel-tab{transition:none;}}

/* The bio's type does not scale with the poster's width, so on narrower desktops its columns run
   longer against the giant "me". The word steps down (and the poster grows to fit it) so the copy
   never overlaps it. Measured: the gap to the copy stays above about 5cqw at every width. */
@media (min-width:64rem) and (max-width:84.31rem){
  .about-poster{aspect-ratio:16 / 10.4;}
  .about-word--me{top:40cqw;}
}
@media (min-width:64rem) and (max-width:74.94rem){
  .about-poster{aspect-ratio:16 / 11;}
  .about-word--me{top:43cqw;}
}
@media (min-width:64rem) and (max-width:68.68rem){
  .about-poster{aspect-ratio:16 / 11.8;}
  .about-word--me{top:46.5cqw;}
}