/* A real place / Meet Tobi: Tobi's portrait is the main window; the showroom film sits on its cut corner. */
/* Isolation sits on the section so the title's blend sees the paper background, not a transparent layer. */
.place-window{position:relative;isolation:isolate;background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(56px,6vw,104px)}
.place-window-title{font-size:clamp(42px,12.8vw,58px);line-height:.97;letter-spacing:-.04em;font-weight:300;margin-bottom:26px}
.place-window-title>span:nth-child(n+3){display:block}
.place-window-media{position:relative;container-type:inline-size}
.place-window-portrait{position:relative;aspect-ratio:.794;background:#050505;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,9cqw 100%,0 calc(100% - 9cqw))}
.place-window-portrait img,.place-window-portrait video{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* The turn loop sits over the still: it opens turned away, faces the camera, turns back, and repeats. */
.place-window-portrait video{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.place-window-portrait.is-live video{opacity:1}
/* Below 1001px the film starts under the chin line (the portrait's bottom 13% is shirt) and hangs below the photo. */
.place-window-film{position:relative;z-index:2;display:flex;align-items:flex-start;margin:-16.4% 0 0 -10px}
.place-window-film-frame{position:relative;flex:none;width:38%;aspect-ratio:1/1.62;overflow:hidden;background:#d9d9d5;border:4px solid var(--paper);clip-path:polygon(0 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px))}
.place-window-film video{width:100%;height:100%;object-fit:cover;display:block}
.place-window-film figcaption{margin:calc(16.4% + 12px) 0 0 16px;font-size:13px;line-height:1.5;color:var(--muted)}
.place-window-film figcaption strong{display:block;font-weight:500;color:var(--ink)}
.place-window-film figcaption span{display:block}
.place-window-toggle{position:absolute;right:10px;bottom:10px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#f4f3efee;color:var(--ink)}
.place-window-toggle svg{width:16px;height:16px}
.place-window-toggle .place-window-play,.place-window-toggle[data-state=paused] .place-window-pause{display:none}
.place-window-toggle[data-state=paused] .place-window-play{display:block}
.place-window-rail{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.place-window-card{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px;border:1px solid var(--line);background:#fbfaf7;transition:border-color .2s,background .2s}
.place-window-card:hover{border-color:var(--ink)}
.place-window-card-text{display:flex;flex-direction:column}
.place-window-card small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.place-window-card strong{font-family:Archivo,Switzer,sans-serif;font-weight:700;font-size:clamp(21px,1.75vw,30px);letter-spacing:-.03em;line-height:1.1}
.place-window-card-text>span:not(.sr-only){font-size:14px;line-height:1.55;color:var(--muted);margin-top:8px}
.place-window-card svg{width:20px;height:20px;margin-top:2px}
.place-window-book{align-items:center;background:var(--ink);border-color:var(--ink);color:#fff}
.place-window-book:hover{background:#0d1214}
.place-window-book .place-window-card-text>span{color:#c9cfd2}
.place-window-founder{margin-top:12px;padding-top:24px;border-top:1px solid var(--line)}
.place-window-founder h3{font-family:Archivo,Switzer,sans-serif;font-weight:700;font-size:clamp(30px,2.4vw,42px);letter-spacing:-.035em;line-height:1.02;margin-bottom:14px}
.place-window-founder p{font-size:16px;line-height:1.65;color:var(--muted);max-width:46ch}
.place-window-founder .place-window-sign{margin-top:12px;font-family:Archivo,Switzer,sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.place-window-social{list-style:none;margin:14px 0 0;padding:6px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:0 22px;font-size:14px}
.place-window-social a{display:inline-flex;align-items:center;min-height:44px}
.place-window-social a:hover{text-decoration:underline;text-underline-offset:5px}

@media(min-width:651px) and (max-width:1000px){
  .place-window-frame{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,5fr) minmax(0,37fr);align-items:start}
  .place-window-title{grid-area:1/1/2/4;font-size:clamp(56px,8vw,76px);margin-bottom:34px}
  .place-window-media{grid-area:2/1}
  .place-window-rail{grid-area:2/3;margin-top:0}
  .place-window-card strong{font-size:21px}
}

/* Desktop: the frame follows the concept's proportions. Media is 46 units wide in a 94-unit row. */
@media(min-width:1001px){
  .place-window-frame{display:grid;grid-template-columns:minmax(0,21fr) minmax(0,49fr) minmax(0,3fr) minmax(0,27fr);align-items:start;container-type:inline-size}
  /* Sized from the frame, not the viewport, so the overlap with the portrait holds past the 1840px cap. */
  .place-window-title{grid-area:1/1;position:relative;z-index:3;margin:3.4cqw 0 0;white-space:nowrap;font-size:6.6cqw}
  .place-window-title>span{display:block}
  /* White text inverts to near-black on paper and stays white where it crosses the dark photo. */
  @supports(mix-blend-mode:difference){.place-window-title{color:#fff;mix-blend-mode:difference}}
  .place-window-media{grid-area:1/2}
  .place-window-portrait{aspect-ratio:.829;clip-path:polygon(0 0,100% 0,100% 100%,13cqw 100%,0 calc(100% - 13cqw))}
  .place-window-film{position:absolute;left:-28cqw;top:62.7cqw;width:36cqw;height:58.9cqw;margin:0;display:block}
  .place-window-film-frame{width:100%;height:100%;aspect-ratio:auto;border-width:max(3px,.87cqw);clip-path:polygon(0 0,100% 0,100% 100%,8.7cqw 100%,0 calc(100% - 8.7cqw))}
  .place-window-film figcaption{position:absolute;left:calc(max(3px,.87cqw) + 8px);top:calc(max(3px,.87cqw) + 8px);margin:0;padding:5px 9px;background:#f4f3efee;font-size:12px;line-height:1.4;color:var(--ink)}
  .place-window-film figcaption span{color:var(--muted)}
  .place-window-rail{grid-area:1/4;align-self:stretch;margin-top:0}
  .place-window-card{padding:clamp(16px,1.5vw,26px)}
  .place-window-founder p{font-size:clamp(15px,1.05vw,17px)}
  .place-window-social{margin-top:auto}
}

/* Entrance, once, when the section scrolls into view. place-window.js adds is-armed only when motion is allowed. */
@media screen and (prefers-reduced-motion:no-preference){
  .place-window.is-armed .place-window-title>span,.place-window.is-armed .place-window-portrait,.place-window.is-armed .place-window-film,.place-window.is-armed .place-window-rail>*{opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease)}
  .place-window.is-armed .place-window-title>span{display:inline-block;transform:translateY(.32em)}
  .place-window.is-armed .place-window-title>span:nth-child(n+3){display:block}
  .place-window.is-armed .place-window-portrait{transform:translateY(28px)}
  .place-window.is-armed .place-window-portrait>*{transform:scale(1.06);transition:transform 1.3s var(--ease),opacity .6s var(--ease)}
  .place-window.is-armed .place-window-film{transform:translate(-14px,30px)}
  .place-window.is-armed .place-window-rail>*{transform:translateY(18px)}
  .place-window.is-in .place-window-title>span,.place-window.is-in .place-window-portrait,.place-window.is-in .place-window-film,.place-window.is-in .place-window-rail>*{opacity:1;transform:none}
  .place-window.is-in .place-window-portrait>*{transform:none}
  .place-window.is-in .place-window-title>span:nth-child(2){transition-delay:.08s}
  .place-window.is-in .place-window-title>span:nth-child(3){transition-delay:.16s}
  .place-window.is-in .place-window-title>span:nth-child(4){transition-delay:.24s}
  .place-window.is-in .place-window-film{transition-delay:.45s}
  .place-window.is-in .place-window-rail>:nth-child(1){transition-delay:.6s}
  .place-window.is-in .place-window-rail>:nth-child(2){transition-delay:.7s}
  .place-window.is-in .place-window-rail>:nth-child(3){transition-delay:.8s}
  .place-window.is-in .place-window-rail>:nth-child(4){transition-delay:.9s}
}
@media(min-width:1001px) and (prefers-reduced-motion:no-preference){
  .place-window.is-armed .place-window-title>span{display:block}
}