/* The listing page, September 2026.

   Everything here is r5-tokens.html's, and only what it says differently
   from _shared.css. The shared sheet was written with stay4 as the source of
   truth, so a listing restates the handful of sizes and spacings r5 sets for
   itself. Nothing new is invented and no border, rule or hairline is drawn.

   Deliberately not restated:

   - the tokens. r5 carries --on-forest:#EDE8E6 and --bar:68px where stay4
     has #F1EDE8 and 76px. Those are the system, not this page, and stay4
     decides; the difference in the green is a shade either way.
   - the bar and the menu. r5 draws its own masthead with previous and next
     arrows; the shared SiteBar and SiteMenu are stay4's and are reused, not
     redrawn.
   - the type studies at the foot of the mock (.studies, .study, .tag, .tv,
     .flowtab). They are Fable's working, not part of the page.               */

/* ---- the top ---- */
.top{padding:clamp(40px,6vh,72px) 0 clamp(40px,6vh,64px)}
.ledger{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:clamp(32px,5vw,90px);align-items:center}
/* Restating .ledger here means restating where it stops being two
   columns. Without this line the shared sheet's own stacking rule is
   outranked by the one above, and on a phone the forest box was drawn
   straight over the title. */
@media(max-width:820px){.ledger{grid-template-columns:1fr}}
/* .top h1 as well as .title: the shared sheet carries itin3's .top h1,
   which is an element and a class together and so outranks a class on
   its own. Without this line the heading came out at stay4's 60px where
   r5 asks for 66. */
.title,.top h1{font-family:var(--face);font-weight:400;font-size:min(clamp(38px,4.6vw,66px), 28px + (clamp(38px,4.6vw,66px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.where{display:block;margin-top:16px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,20px);color:var(--ink-75)}

/* ---- the forest box, as a listing opens ---- */
.short{background:var(--forest);color:var(--on-forest);padding:clamp(26px,3vw,40px) clamp(26px,3vw,44px)}
.short .kick{color:var(--on-forest-55);margin-bottom:16px}
.short p{font-family:var(--serif);font-size:17.5px;line-height:1.68;text-wrap:pretty}
.btn{min-height:48px}

/* ---- the reading, and the heads below it ---- */
.reading{padding:var(--gap) 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(22px,3vh,32px)}


/* ============================================================
   The second round, 6 September 2026.

   Copied verbatim from listing.html, in the mock's own order: the reading
   rules for a body that arrives as legacy structure, the gap under the
   photograph credit, the sizes, and the two bands the design adds - the
   magazine and a guidebook of your own.

   This sheet is hand-written rather than generated, which is why these are
   appended rather than rebuilt. .col is read inside .reading, because the
   menu's three groups carry the same class name.
   ============================================================ */

@media(max-width:700px){.flow a span{display:none}.flow a i{display:none}}
.title{font-family:var(--face);font-weight:400;font-size:min(clamp(38px,4.6vw,66px), 28px + (clamp(38px,4.6vw,66px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.btn.quiet{background:transparent;color:var(--on-forest);border-color:rgba(237,232,230,.55)}
/* the living one: a slow cross-fade through the set, each frame drifting a little */
.ph.live img{position:absolute;inset:0;opacity:0;transform:scale(1);transition:opacity 1.6s ease}
.caprow{display:flex;justify-content:space-between;gap:20px;margin-top:12px;padding-bottom:var(--gap)}
.reading .col{max-width:var(--col);margin:0 auto;padding:0 clamp(20px,5vw,24px);text-align:left}
.prose p{font-family:var(--serif);font-size:clamp(19px,1.55vw,22px);line-height:1.72;text-align:left;text-align-last:auto;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4;text-wrap:pretty}
.prose h2{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.4vw,32px), 28px + (clamp(26px,2.4vw,32px) - 28px) * 0.6);line-height:1.12;margin:clamp(48px,7vh,72px) 0 clamp(16px,2.4vh,22px);text-wrap:balance;text-align:left;text-align-last:left}
.prose h3{font-family:var(--face);font-style:normal;font-weight:400;font-size:min(clamp(21px,1.9vw,25px), 28px + (clamp(21px,1.9vw,25px) - 28px) * 0.6);line-height:1.15;margin:clamp(36px,5vh,52px) 0 12px;text-align:left;text-align-last:left}
/* ---- the bands, heads, squares, rails ---- */
.band{padding:var(--gap) 0}
.c{flex:0 0 auto;scroll-snap-align:start;display:block;position:relative;width:clamp(220px,calc((100vw - 2*var(--edge) - 3*22px) / 3.6),330px);aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
/* ---- the studies ---- */
.studies{background:var(--ink);color:var(--paper);padding:clamp(40px,6vh,64px) 0}
.studies h2{font-family:var(--serif);font-weight:400;font-size:min(clamp(28px,3vw,40px), 28px + (clamp(28px,3vw,40px) - 28px) * 0.6);line-height:1.05;max-width:22ch;text-wrap:balance}
.studies p{margin-top:14px;max-width:60ch;font-size:16px;color:rgba(251,249,246,.7)}
.study{padding:clamp(48px,7vh,88px) 0}
.tag{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(22px,3vh,32px);flex-wrap:wrap}
.tag span{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}
.tag b{font-family:var(--serif);font-weight:400;font-size:17px}
.tag em{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-75)}
.note{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-75);margin:0 0 14px}
.tv{display:grid;gap:clamp(44px,7vh,80px)}
.tv > div{text-align:center}
.tv .t{font-family:var(--face);font-weight:400;line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.tv .t em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em;letter-spacing:0}
.tv .s1{font-size:min(clamp(42px,5.4vw,78px), 28px + (clamp(42px,5.4vw,78px) - 28px) * 0.6)}
.tv .s2{font-size:min(clamp(38px,4.6vw,66px), 28px + (clamp(38px,4.6vw,66px) - 28px) * 0.6)}
.tv .s3{font-size:min(clamp(34px,3.9vw,56px), 28px + (clamp(34px,3.9vw,56px) - 28px) * 0.6)}
.tv .w{display:block;margin-top:16px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,20px);color:var(--ink-75)}
.tv .wk{display:block;margin-top:18px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--moss)}
.tv .ws{display:block;margin-top:14px;font-family:var(--script);font-style:italic;font-weight:500;font-size:min(clamp(24px,2.4vw,34px), 28px + (clamp(24px,2.4vw,34px) - 28px) * 0.6);line-height:1.1;color:var(--ink-75)}
.prose p:has(> strong:first-child),.prose p:has(> b:first-child){text-align:left;text-align-last:left}
.prose p:has(> strong:only-child),.prose p:has(> b:only-child){font-family:var(--face);font-size:min(clamp(24px,2.2vw,30px), 28px + (clamp(24px,2.2vw,30px) - 28px) * 0.6);line-height:1.15;margin:clamp(40px,6vh,64px) 0 14px;text-transform:none;letter-spacing:0}
.prose p:has(> strong:only-child) strong,.prose p:has(> b:only-child) b{font-weight:400}
.prose strong,.prose b{font-weight:500;color:var(--ink)}
.prose ul,.prose ol{margin:18px 0 0 1.2em;text-align:left;text-align-last:left;font-family:var(--serif);font-size:clamp(19px,1.55vw,22px);line-height:1.72}
.prose li{margin:8px 0;text-align:left}
.prose li + li{margin-top:10px}
.prose div{display:contents}
.prose br + br{display:none}
.prose h2,.prose h3,.prose h4{text-align:left;text-align-last:left;text-transform:none}
.prose *{font-size:inherit}
.prose p,.prose li{font-size:clamp(19px,1.55vw,22px)}
.prose a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-35)}
.mag2{display:grid;grid-template-columns:minmax(240px,.4fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center}
.mag2 .cover{max-width:380px;justify-self:end}
.mag2 .cover img{width:100%;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.2)}
.mag2 h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,66px), 28px + (clamp(36px,4.4vw,66px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;max-width:12ch;text-wrap:balance}
.mag2 h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.mag2 p{margin-top:20px;font-family:var(--serif);font-size:19px;line-height:1.6;max-width:44ch}
.mag2 .btns{margin-top:24px}
.maker .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,90px);align-items:center}
.maker h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,66px), 28px + (clamp(36px,4.4vw,66px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;max-width:14ch;text-wrap:balance;color:#fff}
.maker h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.maker p{margin-top:18px;font-family:var(--serif);font-size:18px;line-height:1.6;max-width:46ch}
.maker .fine{margin-top:12px;font-style:italic;font-size:15.5px;opacity:.7}
.mag2 .btn{flex:0 0 auto;padding:0 26px;border:1px solid var(--forest);color:var(--paper);background:var(--forest)}
.mag2 .btn:hover{background:var(--moss);border-color:var(--moss)}
.mag2 .btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.mag2 .btn.quiet:hover{background:var(--ink);color:var(--paper)}


/* ============================================================
   The at-rules, 6 September 2026.

   Appended after the rules they belong to, because lifting rules out of a
   sheet by selector loses the query they sit inside - and a .mag2 that never
   collapses is a phone showing a cover 240px wide beside a headline.

   Verbatim from listing.html, in its order. The chrome's queries are not
   here: they are _shared.css's, and the menu is the redrawn one.
   ============================================================ */

@media(max-width:700px){.g-row{grid-template-columns:1fr 1fr}.g-row .ph.wide{grid-column:1/-1}}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.ph.live img.show{animation:none}}
@media(max-width:820px){.mag2{grid-template-columns:1fr}.mag2 .cover{justify-self:start;max-width:280px}.maker .in{grid-template-columns:1fr}}

/* ============================================================
   The one custom property this sheet reads and neither sheet set.

   .band's padding and .caprow's space under the credit are both var(--gap),
   verbatim from listing.html - and with nothing declaring it they computed
   to nothing at all. The value is the mock's.
   ============================================================ */

:root{--gap:clamp(64px,10vh,120px)}


/* ============================================================
   The quote band, 6 September 2026.

   It lived in _shared.css until today, so every page inherited it - and
   `.say` is a paragraph in Lora on the account and the sign-in screens, which
   arrived 702px tall on a forest ground. The band is a page component rather
   than chrome: six of the eight page sheets already carried it, and this was
   the one that did not.

   Verbatim from listing.html.
   ============================================================ */

.say{position:relative;min-height:min(78vh,720px);display:grid;place-items:center;overflow:hidden;background:var(--forest);color:#fff;text-align:center}
.say img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.say .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,24,20,.25),rgba(20,24,20,.55))}
.say blockquote{position:relative;max-width:26ch;padding:clamp(64px,10vh,120px) var(--edge);font-family:var(--serif);font-style:italic;font-weight:400;font-size:min(clamp(28px,3.4vw,50px), 28px + (clamp(28px,3.4vw,50px) - 28px) * 0.6);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.say cite{display:block;margin-top:28px;font-style:normal;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.say cite b{font-weight:600;color:#fff}

/* ============================================================
   The reading column, redrawn 6 September.

   Fable fixed it at the source after Jack saw /listings/faunoran-house: the
   column reads left, its heading is Larken and left, and one section stands
   clear of the next. This sheet is hand-written and loads after _shared.css,
   so it had been quietly keeping the old centred column on every place.

   .col is read inside .reading, because the menu's three groups are .col too.
   ============================================================ */

.reading .col + .col{margin-top:clamp(48px,7vh,72px)}
.reading .col .lede{text-align:left}

/* the partner's own page: a bar under the site bar, and Change on every part (the Studio's edit-in-place) */
.edit-bar{background:var(--forest);color:var(--on-forest)}.edit-bar .in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;min-height:48px;padding-top:8px;padding-bottom:8px}.edit-bar span{font-family:var(--sans);font-size:13px}.edit-bar nav{display:flex;gap:4px;flex-wrap:wrap}.edit-bar nav a{font-family:var(--sans);font-size:12.5px;font-weight:500;padding:6px 10px;color:var(--on-forest);border:1px solid rgba(241,237,232,.35)}.edit-bar nav a:hover{background:var(--paper);color:var(--forest)}.edit-bar nav a.home{background:var(--paper);color:var(--forest);border-color:var(--paper)}
.edit-tag{display:inline-flex;align-items:center;gap:6px;margin:12px 8px 0 0;padding:6px 10px;background:var(--paper);border:1px solid var(--forest);color:var(--forest);font-family:var(--sans);font-size:12px;font-weight:500;transition:background .2s,color .2s}.edit-tag::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h4l10-10-4-4L4 16z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h4l10-10-4-4L4 16z'/%3E%3C/svg%3E") center/contain no-repeat}.edit-tag:hover{background:var(--forest);color:var(--paper)}

/* ============================================================
   The opening hours, 7 September 2026.

   Approved by Jack from scratchpad/design-2026/hours-panel.html, then moved:
   the live sign sits under the title with the place, and the seven days sit
   in the forest panel under the short description. One box, not two.

   --lit is the one colour this adds to the September palette. An open sign is
   a green light in the world and Jack asked for one; it is pulled well down
   in saturation so it sits with forest and moss rather than shouting over
   them. It is used for nothing else.
   ============================================================ */

:root{--lit:#AFA065; --lit-dim:rgba(175,160,101,.28)}

/* The lamp hangs in the margin so the words line up with the title and the
   place above them - three lines, one left edge. Below 600px there is no
   margin to hang in, so it sits inline and the sign indents instead. */
.top .sign{display:inline-flex;align-items:baseline;gap:9px;margin-top:10px;font-family:var(--sans);font-size:13px;letter-spacing:.02em}
@media (min-width:600px){.top .sign{margin-left:-17px}}
.top .sign .lamp{width:8px;height:8px;border-radius:50%;flex:none;align-self:center;background:var(--lit);box-shadow:0 0 0 4px var(--lit-dim)}
.top .sign.is-shut .lamp{background:transparent;border:1px solid var(--ink-35);box-shadow:none}
.top .sign .word{font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px}
.top .sign .tail{font-family:var(--serif);font-size:14.5px;color:var(--ink-75)}
.top .sign.is-shut .word{color:var(--ink-55)}

@media (prefers-reduced-motion: no-preference){
  .top .sign .lamp{transition:background .3s var(--ease),box-shadow .3s var(--ease)}
}


/* ============================================================
   The head, rebuilt 7 September 2026 — option five.

   Jack, on the old two-column head: "it doesnt look good on desktop - this
   whole top part needs redesigned to suit these elements." He was right. The
   forest panel had grown to hold a description, a website, seven days and two
   buttons, and stood six hundred pixels tall beside a column carrying a title
   and one line.

   So: the name and whether the door is open, then the photographs at full
   width, then a band holding the sentence and the practical facts. The
   pictures are the strongest thing we hold about a place and now nothing
   stands between them and the name.
   ============================================================ */

.top.lead{padding-bottom:clamp(22px,3vh,34px)}
.top.lead .where{display:block;margin-top:10px}
.top.lead .sign{margin-top:12px}

/* A ground of its own. On paper it sat a shade off the stone above it and
   read as the same band continued; stone-2 is the next step down in the
   September palette and separates the two plainly. */
.ledge{background:var(--stone-2);padding:clamp(30px,4vh,46px) 0 clamp(30px,4vh,46px)}
.ledge .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:clamp(28px,5vw,64px);align-items:start}
.ledge .said{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink);max-width:32em;text-wrap:pretty}

/* The facts keep the right-hand column whether or not there is a sentence
   beside them. Without this they slid into the wide left column on every
   listing whose sentence has not been written yet, so the band looked like a
   different design from one listing to the next. */
.ledge .keys{display:grid;gap:11px;grid-column:2}
.ledge .keys>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:14px;align-items:baseline}
.ledge .keys>div>span:first-child{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-55)}
.ledge .keys>div>span:last-child{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-75)}
.ledge .keys a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}


/* The week was here, in seven columns across the band, until Jack cut it on
   7 September: "we dont need this". The sign under the title answers the
   question people actually ask, and the seven days were a table nobody had
   asked for. The rules that drew it are gone with it, and so is HoursWeek -
   dead CSS and a dead export are two ways of leaving a room untidy. The
   design is in scratchpad/design-2026/hours-panel.html if it is ever wanted.
   ============================================================ */

@media (max-width:860px){
  .ledge .two{grid-template-columns:minmax(0,1fr);gap:26px}
  .ledge .keys{grid-column:1}
}

@media (max-width:520px){
  .ledge .keys>div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* A band with nothing to say still carries the two buttons, so it draws - but
   it does not need the height of one that does. */

/* The two actions, under the sign and beside the name.
   Save was a quiet button on a pale ground and could not be seen, so it is
   drawn with a real edge here rather than left to inherit.

   `flex` is said out loud for the same reason. build-stay.py copies this
   block into _stay.css, and that sheet redefines the bare .btn with `flex:1`
   because on stay4 every button sits inside the forest box and fills it. The
   two here do not: left to inherit they took half the ledger each, 325px of
   Save beside 325px of Add to trip, where the listing page draws the same
   two at 76 and 126. A button in the head is as wide as its own word. */
.top .acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.top .acts .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  padding:0 20px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;background:var(--forest);color:var(--on-forest);border:1px solid var(--forest)}
.top .acts .btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink-35)}
.top .acts .btn.quiet:hover{border-color:var(--ink)}

/* ============================================================
   The photographs, full size. 7 September 2026.

   Clicking one opened the page it was already on - PhotoRow takes an href and
   the listing was handing it its own address. This is the gallery those
   clicks were asking for.

   Forest at full strength for the ground, the caption and credit set as they
   are under the row, and the two arrows the Nearby rail uses. Nothing new.
   ============================================================ */

.lightbox{position:fixed;inset:0;z-index:200;background:var(--forest);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.5vh,26px);padding:clamp(46px,7vh,72px) clamp(18px,4vw,64px)}

.lightbox figure{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center;
  max-width:min(100%,1200px);max-height:100%;min-height:0}
.lightbox img{max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain}

.lightbox figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:center;text-align:center}
.lightbox .cap{font-family:var(--serif);font-size:15px;color:var(--on-forest)}
.lightbox .by{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-forest-55)}

.lightbox .shut{position:absolute;top:clamp(14px,2.5vh,26px);right:clamp(16px,3vw,34px);
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-forest);background:none;border:0;padding:10px 4px;cursor:pointer}
.lightbox .shut:hover{text-decoration:underline;text-underline-offset:4px}

.lightbox .turn{display:flex;align-items:center;gap:20px}
.lightbox .turn button{width:46px;height:46px;border:1px solid rgba(241,237,232,.35);background:none;
  color:var(--on-forest);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox .turn button:hover{border-color:var(--on-forest)}
.lightbox .turn span{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-forest-55);font-variant-numeric:tabular-nums}

.lightbox :focus-visible{outline:2px solid var(--on-forest);outline-offset:3px}

/* The row itself gives a pointer, since it now opens something. */
.shots a{cursor:zoom-in}

/* inside the Studio split screen ---------------------------------------
   The listing page, framed beside the questions. It stays the page a reader
   gets; it only drops the partner's own edit chrome and dims everything but
   the part being worked on. Reachable only with ?studio=1 as the owner, so
   a reader never meets any of it. */
.hs-framed [data-hs]{transition:opacity .45s cubic-bezier(.16,1,.3,1)}
.hs-framed [data-hs].hs-dim{opacity:.24}
.hs-framed [data-hs].hs-lit{opacity:1}
.hs-framed .edit-bar,.hs-framed .edit-tag{display:none}
/* The framed page is also a way in: a click on a block opens that part in the Studio (Jack, 12 September). */
.hs-framed [data-hs]{cursor:pointer}
.hs-framed [data-hs]:hover{outline:2px solid rgba(43,48,29,.5);outline-offset:-2px}