/* /v3/ home prototype only. Loaded after styles.css; every rule is scoped to body.v3 so v1 is untouched.
   Adds: a flex top bar (monogram · tools) and the list view. */

/* ---------- Field / List crossfade ---------- */
body.v3 #stage{transition:opacity .35s ease,visibility 0s linear 0s}
body.v3.mode-list #stage{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.v3-list{container-type:inline-size;position:fixed;top:var(--it);right:var(--ir);bottom:var(--ib);left:var(--il);z-index:5;overflow-y:auto;overscroll-behavior:contain;border-radius:var(--rad);background:var(--bg);box-shadow:inset 0 0 0 1px rgba(30,32,36,.10);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
body.v3.mode-list .v3-list{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
body.v3.instant #stage,body.v3.instant .v3-list{transition:none!important}

/* card size (small / medium / large): columns follow the width, so a wide monitor gets more of them instead of taller cards.
   field-v3.js sets data-size on the list (default medium, remembered in localStorage). */
.v3-list{--card-min:300px;--card-gap:24px}
.v3-list[data-size="small"]{--card-min:200px;--card-gap:16px}
.v3-list[data-size="large"]{--card-min:520px}
/* one quiet grey for card text and agency marks (4.68:1 on the paper colour; a test checks AA) */
.cards{--card-grey:#73706b}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card-min)),1fr));gap:var(--card-gap);margin:0;padding:68px 28px 32px;list-style:none}
@container (max-width:599px){.cards{grid-template-columns:minmax(0,1fr);gap:18px}}
.card>a{display:flex;flex-direction:column;height:100%;padding:14px 14px 18px;border-radius:18px;background:var(--paper);color:var(--card-grey);text-decoration:none;box-shadow:0 1px 0 rgba(30,32,36,.06);transition:transform .25s cubic-bezier(.2,.7,.1,1),box-shadow .25s}
.card:hover>a{transform:translateY(-3px);box-shadow:0 8px 22px rgba(30,32,36,.10)}
.card a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.card .tile{position:relative;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/5;margin:0 0 14px;border-radius:12px;background:var(--tint,#e6ddd0);overflow:hidden}
.card .tile img{width:78%;height:92%;object-fit:contain;object-position:bottom;display:block}
.card .mr{display:flex;align-items:center;gap:12px}
.card .nm{flex:1 1 auto;min-width:0;font-size:19px;font-weight:500;line-height:1.25}
/* intro: hidden at rest; on hover/focus a frosted strip rises from the bottom edge of the picture (the tile clips it).
   A short delay on the way in means a passing mouse does not flash it; it leaves at once. Phones have no hover, so they skip it;
   the story page carries the full summary. */
.card .in{position:absolute;left:0;right:0;bottom:0;z-index:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;padding:12px 14px;background:rgba(251,249,245,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--card-grey);font-size:14px;line-height:1.4;text-align:left;opacity:0;transform:translateY(100%);transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1);pointer-events:none}
.card:hover>a .in,.card a:focus-visible .in{opacity:1;transform:none;transition:opacity .45s ease .12s,transform .6s cubic-bezier(.16,1,.3,1) .12s}
@media (hover:none){.card .in{display:none}}
@media (prefers-reduced-motion:reduce){.card .in,.card:hover>a .in,.card a:focus-visible .in{transform:none;transition:opacity .2s}}
/* agency credit: a small mark at the end of the name row, never on the screenshot.
   Same grey as the card text at rest (black at .55 on paper = #73706b); own colours when the card is hovered or focused. */
.card .ag{position:relative;flex:none;display:flex;align-items:center;margin-left:auto;height:19px;cursor:default}
.card .ag img{display:block;height:19px;width:auto;filter:brightness(0);opacity:.55;transition:filter .25s,opacity .25s}
.card:hover>a .ag img,.card a:focus-visible .ag img{filter:none;opacity:1}
/* the CM monogram is a heavy full-height serif: ~11% shorter than the Hail mark reads as the same size */
.card .ag-cm img{height:17px}
.card .ag-tip{position:absolute;right:0;bottom:calc(100% + 8px);padding:5px 9px;border-radius:7px;background:var(--ink);color:var(--paper);font-size:12.5px;line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .15s,transform .15s;z-index:3}
.card .ag:hover .ag-tip{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.card .ag img,.card .ag-tip{transition:none}}
/* site-screenshot tile (test cards): top of the homepage fills the tile; on hover field-v3.js scrolls the full page inside it */
.card .tile.shot{position:relative;display:block;margin:-14px -14px 14px;border-radius:18px 18px 0 0;background:none}
.card .tile.shot img{position:absolute;left:0;top:0;width:100%;display:block}
.card .tile.shot img.top{height:100%;object-fit:cover;object-position:top}
.card .tile.shot img.full{height:auto;opacity:0;will-change:transform}
.card .tile.shot img.full.ready{opacity:1}
@media (prefers-reduced-motion:reduce){.card .tile.shot img.full{display:none}}
/* small cards: tighter padding and type; large cards: a touch bigger. Phones (one column) always use the medium look. */
@container (min-width:600px){
  .v3-list[data-size="small"] .card>a{padding:10px 10px 13px;border-radius:14px}
  .v3-list[data-size="small"] .card .tile{margin-bottom:10px;border-radius:10px}
  .v3-list[data-size="small"] .card .tile.shot{margin:-10px -10px 10px;border-radius:14px 14px 0 0}
  .v3-list[data-size="small"] .card .nm{font-size:15px}
  .v3-list[data-size="small"] .card .in{padding:8px 10px;font-size:12.5px}
  .v3-list[data-size="small"] .card .ag,.v3-list[data-size="small"] .card .ag img{height:18px}
  .v3-list[data-size="small"] .card .ag-cm img{height:16px}
  .v3-list[data-size="large"] .card .nm{font-size:21px}
  .v3-list[data-size="large"] .card .in{font-size:15.5px}
}

/* card-size switch: top right inside the frame, list mode only (same pill look as the Field / List switch) */
.v3-size{position:fixed;z-index:8;top:calc(var(--it) + 14px);right:calc(var(--ir) + 22px);display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(239,233,223,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
body.v3.mode-list:not(.open) .v3-size{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.v3-size button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;padding:0;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.v3-size button svg{width:17px;height:17px;display:block}
.v3-size button:hover{color:var(--ink)}
.v3-size button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.v3-size button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(30,32,36,.14)}

/* ---------- phones: the list tools step aside ---------- */
@media (max-width:767px){
  .v3-size{display:none}
  .cards{padding:12px}
}
/* panel: solid sheet, site screenshot on top (figure as fallback), agency label above the name, one site link */
body.v3 #panel{bottom:auto;max-height:calc(100dvh - var(--it) - var(--ib) - 24px);background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 24px 60px -24px rgba(30,32,36,.28);padding:16px 22px 22px}
body.v3 #panel .p-shot{flex:none;margin:0 -6px 20px;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
body.v3 #panel .p-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
body.v3 #panel .p-fig{margin-top:6px}
body.v3 #close{z-index:1;top:24px;right:24px;width:32px;height:32px;font-size:18px;background:var(--paper)}
body.v3 #close:hover{background:#f0ece5}
body.v3 #panel .credit{margin:0 0 6px;font-size:13px;letter-spacing:.01em}
body.v3 #panel h2{font-size:1.75rem;line-height:1.08;letter-spacing:-.025em;margin:0 0 10px}
body.v3 #panel .summary{color:var(--ink);font-size:15px;line-height:1.55}
body.v3 #panel .btns{padding-top:20px}
body.v3 #panel a.b{padding:12px 0;font-size:14px}
body.v3 #panel .p-shot[hidden]+.p-fig[hidden]+.credit,body.v3 #panel .p-shot[hidden]+.p-fig[hidden]+.credit[hidden]+h2{margin-top:6px;margin-right:44px}
body.v3 #close:focus-visible{outline-offset:2px}
@media (max-width:767px){
  /* phones: the bottom sheet sits right under the card, so no screenshot; text and buttons fit without scrolling */
  body.v3 #panel{padding:22px;top:auto;bottom:calc(var(--ib) + 12px);height:auto;max-height:58vh}
  body.v3 #panel .p-shot{display:none}
  body.v3 #panel .credit{margin-right:44px}
  body.v3 #panel h2{font-size:1.6rem}
}

/* Desktop: the "visit site" circle. Cards: top-right corner of the picture. Figures: hangs off the right end of the name pill. */
.card{position:relative}
.go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--chipink);text-decoration:none;box-shadow:0 4px 14px rgba(30,32,36,.22);opacity:0;pointer-events:none;transition:opacity .2s,translate .25s cubic-bezier(.2,.7,.1,1),background-color .2s}
.go:hover{background:#000}
.go:focus-visible{outline:2px solid var(--ink);outline-offset:3px;opacity:1;pointer-events:auto}
.go[data-label]::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 3px;padding:5px 9px;border-radius:8px;background:var(--ink);color:var(--chipink);font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,translate .15s}
.go:hover::after,.go:focus-visible::after{opacity:1;translate:-50% 0}
.fig .chip .go{position:absolute;left:calc(100% + 6px);top:50%;translate:0 -50%}
.fig.hov .chip .go{opacity:1;pointer-events:auto}
/* desktop: while shown, the name pill is part of the figure's hover zone (a click on it opens the site),
   and an invisible bridge covers the gap between the pill and its circle */
@media (min-width:768px) and (hover:hover){
  body.v3 .fig.hov .chip{pointer-events:auto}
  body.v3 .fig.hov .chip{cursor:pointer}
  .fig.hov .chip .go::before{content:'';position:absolute;right:100%;top:0;bottom:0;width:10px}
}
body.dragging .fig .go,body.open .fig .go{pointer-events:none;opacity:0}
@media (max-width:767px){.go{display:none!important}}
@media (prefers-reduced-motion:reduce){.go,.go::after{transition:none}}

/* list cards, desktop: a quiet text line under the project name, always shown.
   Starts on the name's left edge, smaller and greyer than the name. It sits over the
   card link's extra bottom padding (links can't nest) and lifts with the card on hover. */
.card .acts{display:none}
@media (min-width:768px){
  .card>a{padding-bottom:40px}
  .card .acts{position:absolute;left:14px;bottom:15px;z-index:3;display:flex;gap:18px;transition:translate .25s cubic-bezier(.2,.7,.1,1)}
  .card:hover .acts{translate:0 -3px}
  .card .ln{display:inline-flex;align-items:center;gap:3px;color:var(--card-grey);font-size:14px;line-height:18px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
  .card .ln svg{flex:none;width:12px;height:12px}
  .card .ln:hover{color:var(--ink);text-decoration-color:currentColor}
  .card .ln:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
  .v3-list[data-size="small"] .card>a{padding-bottom:34px}
  .v3-list[data-size="small"] .card .acts{left:10px;bottom:12px;gap:14px}
  .v3-list[data-size="small"] .card .ln{font-size:13px;line-height:16px}
  .v3-list[data-size="large"] .card>a{padding-bottom:44px}
  .v3-list[data-size="large"] .card .acts{bottom:17px;gap:22px}
  .v3-list[data-size="large"] .card .ln{font-size:15px;line-height:19px}
}
@media (prefers-reduced-motion:reduce){.card .acts,.card .ln{transition:none}}