/* ============================================================
   CONCEPTO P — THE HAND, in the stylesheet
   house/hand.js is how a word answers the hand. This sheet is what stays when
   it has finished answering: no underline in any state, nothing that looks like
   a button, a focus told by ink and never by a ring, the air that stands where a rule stood,
   and the three voices an action is written in.

   Loaded after fluid.css, so a room that forgets still gets the house.
   Everything here that is a base sits in :where(), at no weight: any room's own
   class wins over it. What is meant to be absolute (no underline, no ring) is not.
   ============================================================ */

/* ---- the letters hand.js cuts a word into: custom tags, so no sheet written for span, i or em lands on one.
   They move by their own offset, never by becoming boxes, so kerning, breaks and justification stay as set ---- */
hd-l{ position:relative; top:0; }
hd-sr{ user-select:none; -webkit-user-select:none; }

/* ---- a finger leaves no flash on a word ---- */
html{ -webkit-tap-highlight-color:transparent; }
:where(a, button, summary, [role="button"], [role="link"], [data-hand], label){ -webkit-tap-highlight-color:transparent; }

/* ---- no underline, in any state, anywhere a link is. The Documents' certificate keeps its ruled sheet
   (its section rules and its field leaders are its own); its links are words like any other ---- */
a, a:hover, a:focus, a:focus-visible, a:active, a:visited, a:target,
a *, a:hover *, a:focus *, a:focus-visible *, a:active *, a:visited *{
  text-decoration:none !important;
}
:where(mark, abbr, ins, u){ text-decoration:none; background:none; color:inherit; }
:where(abbr[title]){ text-decoration:none; cursor:inherit; }
/* an underline drawn as the foot of a box: a link has no foot, and neither has a word that acts */
a, a:hover, a:focus, a:focus-visible, a:active{ border-bottom-color:transparent !important; }
a::after, a::before{ text-decoration:none; }
/* an underline drawn as a hairline gradient under a word: the families rooms wrote for themselves (verified with
   check-hand.js). The room that owns each should delete its own rule; until then none of them draws. */
.lg-hl, .ac-mat, .ac-find, .nf-way{ background-image:none !important; }
button, button:hover, button:focus, button:focus-visible, button:active,
[role="button"], [role="button"]:hover, [role="button"]:focus-visible, [role="link"], summary,
button *, [role="button"] *{
  text-decoration:none !important;
}
button, button:hover, button:focus, button:focus-visible, button:active,
[role="button"], [role="button"]:hover, [role="button"]:focus-visible, [role="link"], summary{
  border-bottom-color:transparent !important;
}

/* an underline drawn as a child of the action (an aria-hidden <i> a hairline high at its foot, that draws across on
   hover): the Gallery's way words, "Inquire" and the rest. It is neither a border nor a pseudo-element of the link, so
   the rules above never saw it. The Gallery's owner should stop creating it (gallery.js, gx-way-r); until then none draws. */
.gx-way-r{ display:none !important; }

/* a line drawn under a word that is a station on the Paper's rail (assets/cpn/cpn.css, the Paper's own sheet).
   R7b is taking the rail away; until it has, none of it draws. Verified with check-hand.js. */
.pr-rail button::after, .pr-rail a::after{ content:none !important; display:none !important; }

/* ---- no button: a button is a word, with air to be found by a thumb ----
   what is made of a border, a fill or a radius is read here as nothing, at no weight; a room's own class that
   sets its own padding or font still wins. The tap area is padding, which draws nothing. */
:where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]){
  -webkit-appearance:none; appearance:none;
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:.6em 0; margin:0;
  color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit; text-transform:inherit;
  cursor:pointer;
}
:where(button:disabled, [role="button"][aria-disabled="true"]){ cursor:default; opacity:.4; }
@media (pointer:coarse){
  :where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]){ min-height:44px; }
}

/* ---- a thumb's area, for the words the shared files set: padding takes no room in the line (negative margin gives
   it back), so the word stays where it was set and a finger finds it ---- */
@media (pointer:coarse){
  .foot-meta a, .lost-go{ padding-block:.9em; margin-block:-.9em; }
  /* the Editorial's running head: its words are 15px high on a phone; a thumb needs 44 (its owner may take this over) */
  .edr a{ padding-block:15px; margin-block:-15px; }
}

/* ---- focus: told by ink, never by a box (P's review of 17 October: no outline, no ring, no box). A key finds a word
   and the word holds its hover state (hand.js: its letters lift once, nearest first, and its ink is held a notch
   deeper); here the word's own ink thickens by a hair, so it stays found after its letters have settled. A sheet (a
   work, a card) is nudged along its line by the hand and keeps it while the key is on it. Every outline any room
   still draws round an action is read as nothing. The baseline of a field you type in stays: it is the one line. ---- */
:is(a, button, summary, [role="button"], [role="link"], [data-hand], [tabindex]):focus-visible,
:is(a, button, summary, [role="button"], [role="link"], [data-hand], [tabindex]):focus{
  outline:none !important;
}
:is(a, button, summary, [role="button"], [role="link"], [data-hand]:not([data-hand="off"])):focus-visible{
  -webkit-text-stroke:.022em currentColor; paint-order:stroke fill;
}

/* ---- reduced motion: hand.js keeps the letters still; the ink alone changes (opacity .62 to 1, 0.2 s) ---- */

/* ============================================================
   THE POINTER
   There is no mark that follows the pointer (P, round 2). The browser's own pointer stays; over anything that
   acts it is the pointing hand, at no weight, so a room that wants a zoom, a grab or a crosshair says so
   and wins. Everything else that tells a word can be pressed is the word itself (hand.js).
   ============================================================ */
:where(a[href], button:not(:disabled), summary, [role="button"], [role="link"], label[for], [data-hand]:not([data-hand="off"])){ cursor:pointer; }
:where(button:disabled, [aria-disabled="true"]){ cursor:default; }

/* ---- no approach: nothing answers a hand that is only passing near (hand.js, T2) ---- */

/* ============================================================
   THE LETTERHEAD FLOATS
   Nothing is drawn under #nav: no mist, no band, no feather, no veil, no blur (P, round 2). Whatever a room
   still says about #nav::before or ::after is read as nothing. (#nav-wake is a pointer strip and draws nothing.)
   ============================================================ */
#nav::before, #nav::after{ content:none !important; display:none !important; background:none !important; }
#nav{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* ============================================================
   AIR WHERE A RULE STOOD
   Sections flow into each other; what separated them was a line, and a line is
   replaced by room. Four steps of vertical rhythm. A room takes the step it
   needs with the token (padding-block: var(--rhythm-3)) or the class.
   ============================================================ */
:root{
  --rhythm-1:clamp(20px, 2.6vw, 40px);      /* between a head and what it names; between two rows */
  --rhythm-2:clamp(44px, 6.4vh, 88px);      /* between two paragraphs' worth; a block in a section */
  --rhythm-3:clamp(84px, 13vh, 168px);      /* between two sections */
  --rhythm-4:clamp(136px, 22vh, 280px);     /* between two rooms' worth of page: a section that is a change of air */
}
.air-1{ margin-block-start:var(--rhythm-1); }
.air-2{ margin-block-start:var(--rhythm-2); }
.air-3{ margin-block-start:var(--rhythm-3); }
.air-4{ margin-block-start:var(--rhythm-4); }
/* the same, taken inside the block instead of before it */
.pad-1{ padding-block:var(--rhythm-1); }
.pad-2{ padding-block:var(--rhythm-2); }
.pad-3{ padding-block:var(--rhythm-3); }
.pad-4{ padding-block:var(--rhythm-4); }

/* ---- a rule that is not the thing: never drawn ---- */
hr{ display:none; }

/* ============================================================
   THE THREE VOICES OF AN ACTION
   Without a shape, a word reads as something to press by what it is set in, and
   by the hand's answer (hand.js). Three voices; a room picks one and writes nothing
   else of its own.

   .act        inline: the reading voice in italic, in its sentence's own ink. Where a
               sentence says "see the materials", the materials are .act.
   A figure inside any of the three takes --num (the numeral system's face), never a monospace.
   .act-label  a label: the letterhead's caps (.t-label of type.css: the display face at the
               nav's size, tracked, in the letterhead's vinyl). Navigation-like actions: back,
               next, open, the ways out of a section.
   .act-big    a large editorial action: a section's title (.t-title of type.css), in vinyl. The
               next room, the one thing a page wants done.

   No arrows. .act-go onward · .act-out leaves the house · .act-back returns:
   the classes stay, nothing is drawn after them.
   .act-hit    gives any block or flex action a thumb's area without drawing anything
               (it uses ::before, so it is not for .act-back)
   ============================================================ */
.act, .act-label, .act-big{ cursor:pointer; text-decoration:none; }
.act{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:inherit; line-height:inherit; letter-spacing:0; text-transform:none; color:inherit;
  /* an inline word's area, taller than its line and drawn as nothing: padding on an inline box takes no room
     in the line, and the margin gives back what it takes sideways. A finger finds it. */
  padding:.6em .3em; margin:-.6em -.3em;
}
.act-label{
  display:inline-flex; align-items:center; gap:.9em; min-height:44px;
  /* the letterhead's own caps (type.css .t-label): one voice for every way in the house */
  font-family:var(--display); font-style:normal; font-weight:400;
  font-variant-caps:normal; font-variant-numeric:lining-nums proportional-nums;
  font-size:var(--t-label, var(--nav-size, 12px)); line-height:1.3; letter-spacing:.16em; text-transform:uppercase;
  color:inherit; filter:url(#cp-vinyl-xs);
}
@media (max-width:759px){ .act-label{ letter-spacing:.06em; } }
.act .num, .act-label .num, .act-big .num{ font-family:var(--num, inherit); font-style:normal; }
.act-big{
  display:inline-flex; align-items:baseline; gap:.5em; padding-block:.18em;
  font-family:var(--display); font-style:normal; font-weight:400;
  font-size:var(--t-title, var(--fs-door)); line-height:1.04; letter-spacing:-.015em; text-transform:none; color:inherit;
  filter:url(#cp-vinyl-s);
}
.act-hit{ position:relative; }
.act-hit::before{ content:""; position:absolute; inset:-14px -10px; }
/* No glyph after a way on (the arrow is gone everywhere, the Surface Registry first).
   The word is the way; the classes stay so nothing that reads them breaks. */
.act-go::after, .act-out::after, .act-back::before{ content:none; }