/* _square.css - HAND-WRITTEN, like _ours.css and _listing.css. An experiment on two
   pages and then three - /places/see-and-do, /places and /accommodation (the cards
   there through components/design/square-card.tsx) - at Jack's asking. The name over
   the picture: a 4:5 picture, four across; the foot of the picture blurred
   progressively, kept below the words; the name in Larken and a line of no more than
   eighty characters held to two lines; Save and Add to trip rising into the middle on
   hover under a veil, the caption staying put beneath it. Photographs, and film that
   plays on its own, in the same frame. Loaded through config('design.extras') after
   _shared.css and _index.css, so it only overrides. No class is invented: .card .c
   .sh .t .do .go are all in place-index.html; .sh, the mock's scrim, is here the
   holder of the blur layers; .filmed on the hero is set by the film itself. If it is
   kept it goes into the mock and build-index.py; if not, delete this file, the one
   line in config/design.php, and the branch in places/shelf.tsx. */
.grid,.grid4{gap:clamp(22px,2.6vw,36px)}
/* four across from a thousand pixels (Jack, 8 Sep: "try 4 images on one row") */
@media(min-width:1000px){.grid,.grid4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,1.9vw,28px)}}
/* the card stands on its own: what _index.css gave it on see-and-do is here too, so
   the same markup is dressed the same on /places, which loads _landing.css instead */
.card{position:relative;display:flex;flex-direction:column;background:transparent;padding:0;border:0;
  box-shadow:none;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.card .c{display:block;position:relative;overflow:hidden;color:#fff;text-decoration:none}
.card .c .t{position:absolute;z-index:1}
.card .c .t .k,.card .c .t .w{display:none}
.card .go{position:absolute;inset:0;z-index:1}
.card .do{position:absolute}
/* in a rail (the choosers on /destinations) the card takes the rail's own width and snaps as its cards do */
.rail .card{flex:0 0 auto;scroll-snap-align:start;width:clamp(220px,calc((100vw - 2*var(--edge) - 3*22px) / 3.6),330px)}
.card .c.on{outline:2px solid var(--august);outline-offset:-2px}
.card:hover{transform:translateY(-4px)}
.card.hide{display:none}
.card.lit{outline:2px solid var(--forest);outline-offset:4px}
.card.lit .c{outline:0}
/* the picture, four by five; film wears the same frame as a photograph */
.card .c{aspect-ratio:4/5;background:var(--stone-2);isolation:isolate}
.card .c img,.card .c video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.card:hover .c img,.card:hover .c video{transform:scale(1.03)}
/* the blur, kept to the foot: the deepest layer reaches only a tenth of the way up,
   the lightest a third, so the words sit on it and the picture above them is untouched */
.card .c .sh{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,13,18,.34) 0,rgba(14,13,18,.10) 22%,rgba(14,13,18,0) 38%)}
.card .c .sh i{position:absolute;inset:0;display:block;
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 4%,transparent var(--z));
  mask-image:linear-gradient(to top,#000 0,#000 4%,transparent var(--z));
  -webkit-backdrop-filter:blur(var(--b));backdrop-filter:blur(var(--b))}
.card .c .sh i:nth-child(1){--b:2px;--z:36%}
.card .c .sh i:nth-child(2){--b:4px;--z:29%}
.card .c .sh i:nth-child(3){--b:8px;--z:22%}
.card .c .sh i:nth-child(4){--b:16px;--z:16%}
.card .c .sh i:nth-child(5){--b:28px;--z:10%}
/* the caption on the blur: the name in Larken, the line in Larken on two lines at most.
   Sized for a card a quarter of the page wide: eighty characters go on two lines. */
.card .c .t{left:18px;right:18px;bottom:17px;transition:opacity .34s var(--ease),transform .42s var(--ease)}
.card .c h3{font-family:var(--face);font-weight:400;font-size:clamp(19px,1.5vw,23px);line-height:1.08;letter-spacing:-.006em;color:#fff;text-wrap:balance}
.card .c .t p{margin:8px 0 0;font-family:var(--face);font-weight:400;font-size:13.5px;line-height:1.48;color:rgba(255,255,255,.88);
  max-width:none;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:999px){.card .c .t{left:22px;right:22px;bottom:20px}.card .c h3{font-size:min(clamp(22px,2.6vw,27px), 28px + (clamp(22px,2.6vw,27px) - 28px) * 0.6)}.card .c .t p{font-size:14.5px;max-width:36ch}}
/* the two actions rise into the middle of the picture; the caption stays beneath the veil */
.card .do{top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  opacity:1;transform:none;transition:none;pointer-events:none;z-index:2}
.card .do::before{content:"";position:absolute;inset:0;background:rgba(14,13,18,.56);opacity:0;transition:opacity .4s var(--ease)}
.card:hover .do::before,.card:focus-within .do::before{opacity:1}
.card .do button,.card .do a{position:relative;pointer-events:auto;text-decoration:none;width:min(66%,172px);height:44px;padding:0;
  background:#fff;color:var(--ink);font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;
  opacity:0;transform:translateY(16px) scale(.94);
  transition:opacity .46s var(--ease),transform .46s var(--ease),background .2s,color .2s,box-shadow .2s}
.card .do button + button{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.card .do button + button:hover{box-shadow:inset 0 0 0 1px #fff}
.card .do button.on{background:#fff;color:var(--ink);box-shadow:none}
.card:hover .do button,.card:focus-within .do button,.card:hover .do a,.card:focus-within .do a{opacity:1;transform:none}
.card:hover .do > :nth-child(1){transition-delay:.07s,.07s,0s,0s,0s}
.card:hover .do > :nth-child(2){transition-delay:.14s,.14s,0s,0s,0s}
.card:hover .do > :nth-child(3){transition-delay:.21s,.21s,0s,0s,0s}
@media(hover:none){.card .do::before{opacity:1}.card .do button,.card .do a{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.card,.card .c img,.card .c video,.card .c .t,.card .do::before,.card .do button{transition:none}}

/* ── the stay card (Jack, 8 Sep, deck four, 3.3) ──
   A place to stay wears the same card with three differences: the name in Gelica
   Extra Light, letter-spaced .03em; beneath it the region in Jost capitals and no
   line; and on the picture a Tweed badge, SLEEPS small with the number large, when
   the listing holds the number. With the caption a line shorter the blur at the foot
   comes down to meet the top of the words: the lightest layer to a fifth of the
   height, the deepest to six percent. Gelica comes from the Adobe Fonts kit in the
   page head; where it has not arrived the name falls back to Larken. */
.card[data-stay] .c h3{font-family:gelica,var(--face);font-weight:200;font-size:min(clamp(22px,2.1vw,27px), 28px + (clamp(22px,2.1vw,27px) - 28px) * 0.6);letter-spacing:.03em;line-height:1.05}
.card[data-stay] .c .t .k{display:block;margin:8px 0 0;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.card[data-stay] .c .price{position:absolute;top:14px;left:14px;right:auto;z-index:3;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  background:var(--tweed);color:var(--shell);font-family:var(--sans);font-weight:500;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.card[data-stay] .c .price i{font-style:normal}
.card[data-stay] .c .price b{font-family:var(--face);font-weight:400;font-size:22px;line-height:1;letter-spacing:0}
.card[data-stay] .c .sh{background:linear-gradient(to top,rgba(14,13,18,.34) 0,rgba(14,13,18,.10) 12%,rgba(14,13,18,0) 21%)}
.card[data-stay] .c .sh i:nth-child(1){--z:20%}
.card[data-stay] .c .sh i:nth-child(2){--z:16%}
.card[data-stay] .c .sh i:nth-child(3){--z:12%}
.card[data-stay] .c .sh i:nth-child(4){--z:9%}
.card[data-stay] .c .sh i:nth-child(5){--z:6%}
@media(max-width:999px){.card[data-stay] .c h3{font-size:min(clamp(22px,2.8vw,28px), 28px + (clamp(22px,2.8vw,28px) - 28px) * 0.6)}}

/* ── the homepage's guidebook band (Jack, 8 Sep): a photograph on the .desk stage in
   place of the drawn book - Conor Gault's frame of The Best of Isle of Skye on the
   table, cropped to the stage's own ratio ── */
.maker .desk > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ── the hero film under a see-through Cask veil, the words in Shell (Jack, 8 Sep) ──
   The photograph beneath is the film's own first frame, so nothing else can show
   through; when the film says it is playing the hero takes .filmed and the two cross
   over, film in, photograph out, and the photograph is there again if the film stops. */
.hero > video.film{opacity:0;transition:opacity .9s var(--ease)}
.hero.filmed > video.film{opacity:1}
.hero > img{transition:opacity .9s var(--ease)}
.hero.filmed > img{opacity:0}
.hero .veil{background:rgba(57,41,22,.44)}
/* /places (the hero with the Plan your day button): shorter, so the page comes up
   (Jack, 8 Sep, "test making the hero less height"); the words at the homepage's height
   now the Where / When / What strip no longer overlaps the foot of the hero */
.hero:has(.journey){height:clamp(520px,72vh,780px)}
.hero .in{bottom:clamp(56px,9vh,96px)}
/* a photograph's credit has no place over a film that is our own; a photograph keeps its own */
.hero:has(video.film) .credit,.hero:has(video.film) .cap{display:none}
.hero h1,.hero h1 em,.hero .where{color:#F9F5EE}
.hero .credit{color:rgba(249,245,238,.78)}
.hero .credit b{color:#F9F5EE}
@media(prefers-reduced-motion:reduce){.hero > video.film,.hero > img{transition:none}}

/* ------------------------------------------------------------------ 18 Sep
   THE SETTLED LISTING CARD.

   Everything above is the 8 September experiment this file was written for -
   the name over the picture, on a blurred foot. Jack settled the listing on
   12 September the other way round: "for the title just have the place name
   below, nothing fancy", and "i dont want any of this, just the name of the
   listing". Then, 17 September: "i feel like listings should be consistent
   across the site."

   So the card is the photograph and the name under it. The rules above are
   left where they are rather than cut out, because this file is still the
   experiment its own header describes, and putting the name back over the
   picture is now one block to delete.

   This reaches every page that draws square-card.tsx: /places,
   /accommodation, /places/see-and-do and every region page.

   The corner chip stays. SLEEPS and the distance are facts about the place,
   not card furniture, and "just the name" was said about the words under the
   photograph. */
/* ...and the ground under it: the photograph's stone placeholder was on
   .c, so with the words moved under the picture they sat on a grey strip
   (More places to stay, Stormhouse South, 24 Sep). The stone is on the img. */
.card .c{aspect-ratio:auto;overflow:visible;color:var(--ink);isolation:auto;background:none}
.card .c img,.card .c video{height:auto;aspect-ratio:4/5;background:var(--stone-2)}
/* the blurred foot the name used to sit on has nothing to hold up */
.card .c .sh{display:none}
.card .c .t{position:static;z-index:auto;left:auto;right:auto;bottom:auto;
  padding:12px 0 0;transform:none;opacity:1}
/* a stay's name was still Gelica 27px from .card[data-stay] .c h3, which
   outranks the plain selector; both are named here */
.card .c h3,.card[data-stay] .c h3{font-family:var(--face);font-weight:400;font-size:19px;line-height:1.26;
  letter-spacing:-.005em;color:var(--ink);text-shadow:none}
/* the eighty-character line, and the region under a stay: not the name */
.card .c .t p,.card[data-stay] .c .t .k{display:none}
@media(max-width:999px){
  .card .c .t{left:auto;right:auto;bottom:auto;padding:12px 0 0}
  .card .c h3{font-size:19px}
}