/* ============================================================
   SILICA WORKS - inner pages, the shared layer
   ------------------------------------------------------------
   What faq.html and contact.html both need from the home page's
   own <style> block, pulled out once rather than pasted into
   each: the ink button, the caption strip, the chamfered sheet
   and the join with the footer.

   Every rule here is a copy of a home.html rule under a page-
   neutral name (.pg-*), with the home rule named beside it. The
   home page keeps its own copies, so it is never affected by a
   change made here.
   ============================================================ */

:root {
  /* The two greys the home hero sets its captions and asides in
     (--ap-soft, .ap-blurb). Named once so the inner pages use the
     same two steps rather than inventing a third. */
  --pg-soft: #6c6c65;
  --pg-body: #3b3b36;
  --pg-line: rgba(20, 20, 15, 0.16);
  --pg-ease: cubic-bezier(0.19, 1, 0.22, 1);

  /* The brand chamfer at sheet scale - the cut .ap-who takes out of
     its top corners and .sw-showcase paints into its bottom ones. */
  --pg-chamfer: clamp(1.5rem, 2.6vw, 2.75rem);

  /* HOW A BEVELLED BORDER STAYS ONE THICKNESS ALL THE WAY ROUND.
     ------------------------------------------------------------
     A clipped box cannot take a `border` - it follows border-radius
     only - so every bordered bevel on these pages is two clipped
     layers: the edge at full size, and the face on top of it inset
     by the border width, with the edge showing round its rim.

     The face's cut must NOT reuse the edge's notch. Insetting a 45°
     cut by d while keeping the notch moves the diagonal in by only
     d/√2 each way, so the border on every bevel came out √2 times
     the border on the straight sides - 2.1px against 1.5px, a
     visibly heavier corner on every chip, card and field.

     For the diagonal to sit exactly d from the edge's, the face's
     notch is the edge's less d·(2 - √2). That factor is this
     token; every face layer computes its notch as
       calc(<edge notch> - <border> * var(--pg-bevel-k))
     and the two lines then run parallel at one thickness. It is
     the same promise the nav bar keeps by stroking one SVG path
     (js/menu.js), kept in CSS instead. */
  --pg-bevel-k: 0.5858;

  /* The one colour the brand does not have. A form has to be able
     to say "this is wrong", and neither the accent (1.15:1 on
     paper) nor the ink (which is every other word on the page) can
     say it. A dark brick rather than a signal red: 6.6:1 on paper,
     and warm enough to sit with the ink's own olive cast. */
  --pg-error: #b3261e;
}

/* Visually hidden, still announced - home.html's .sr. */
.pg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   The button - one CTA for the whole site
   ------------------------------------------------------------
   The outline cut: two opposite corners bevelled, an edge in the
   colour that stands off the surface and a face in the surface's own
   colour, so at rest it is a drawn line, not another black block on
   pages already carrying heavy ink. Hover fills the face. Every CTA
   uses it - index.html's .ap-btn and the footer's .footer-btn are
   the same object in the same colours.

   The button's own fill is the edge; the face is laid over it 1.5px
   in, its cut pulled in by --pg-bevel-k so the line holds one weight
   on the corners. A surface sets the five colours and nothing else:
   paper (here), the FAQ's dark composer (css/thread.css), the lime
   footer (css/footer-panel.css).

   clip-path would shave an outline off, so focus shows as the fill
   - the same call home.html makes - with the arrow riding out as a
   second cue for anyone who cannot tell the two faces apart.
   ------------------------------------------------------------ */
.pg-btn {
  --btn-notch: 14px;
  --btn-edge: var(--sw-ink);
  --btn-face: var(--sw-paper);
  --btn-text: var(--sw-ink);
  --btn-fill: var(--sw-accent);
  --btn-fill-text: var(--sw-ink);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  padding: 1.25em 1.6em;
  border: 0;
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--btn-edge);
  color: var(--btn-text);
  cursor: pointer;
  clip-path: polygon(
    var(--btn-notch) 0,
    100% 0,
    100% calc(100% - var(--btn-notch)),
    calc(100% - var(--btn-notch)) 100%,
    0 100%,
    0 var(--btn-notch)
  );
  transition: color 0.15s ease;
}

.pg-btn::before {
  --c: calc(var(--btn-notch) - 1.5px * var(--pg-bevel-k));
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5px;
  background: var(--btn-face);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color 0.15s ease;
}

.pg-btn:hover,
.pg-btn:focus-visible {
  color: var(--btn-fill-text);
}

.pg-btn:hover::before,
.pg-btn:focus-visible::before {
  background-color: var(--btn-fill);
}

.pg-btn:focus-visible {
  outline: none;
}

/* Matches the home page's .ap-btn - every arrow CTA is one size. */
@media (max-width: 1000px) {
  .pg-btn { gap: 1.25rem; padding: 1.1em 1.3em; font-size: 0.8rem; }
}

.pg-btn[disabled] {
  cursor: progress;
  opacity: 0.6;
}

/* ------------------------------------------------------------
   The caption strip - home.html's .ap-cap
   ------------------------------------------------------------
   Small caps, an index in brackets, and a hairline that runs the
   slack. Used above and below every centrepiece, so a page's
   first screen is read like a plate in a catalogue.
   ------------------------------------------------------------ */
.pg-cap {
  display: flex;
  align-items: center;
  gap: 1rem;
  font: 500 0.7rem/1 "Inter Tight", sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pg-soft);
}

.pg-cap b {
  color: var(--sw-ink);
  font-weight: 600;
}

.pg-cap-idx {
  margin-right: 0.6rem;
}

.pg-rule {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--pg-line);
  overflow: hidden;
}

/* The rule's own fill, drawn left to right by the page script. */
.pg-rule > span {
  position: absolute;
  inset: 0;
  background: var(--sw-ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* The accent as a ground under ink - home.html's .ap-hl, the only
   way the accent is allowed to carry type. --hl is wiped from 0 by
   the page script once the line has landed. */
.pg-hl {
  color: var(--sw-ink);
  background: linear-gradient(var(--sw-accent), var(--sw-accent)) 0 60% / var(--hl, 100%) 78% no-repeat;
  padding: 0 0.12em;
  margin: 0 -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The live dot. A mark, not a surface, so it is the one round
   thing allowed - the same exemption the FAQ's typing dots take. */
.pg-live {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--sw-accent);
  box-shadow: 0 0 0 1px rgba(20, 20, 15, 0.35);
}

.pg-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sw-accent);
  animation: pg-live 2.2s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

@keyframes pg-live {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(3.2); opacity: 0; }
}

/* ------------------------------------------------------------
   The handwritten hand and its arrow - home.html's .ap-note
   ------------------------------------------------------------
   The note writes itself (js/intro-type.js); the arrow draws
   once it has, in two strokes - the curve, then the head. Hidden
   outright while the page is arming the write, so it cannot flash
   finished before the pen starts. */
.pg-note {
  position: relative;
  font-family: "Shadows Into Light", "Inter Tight", cursive;
  font-size: clamp(1.15rem, 0.55vw + 0.85rem, 1.7rem);
  line-height: 1.22;
  letter-spacing: 0.03em;
  -webkit-text-stroke: 0.018em currentColor;
  color: #4a4a44;
  text-wrap: balance;
}

.pg-arrow {
  position: absolute;
  width: clamp(4.5rem, 6vw, 7rem);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.pg-arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.pg-hw .pg-note[data-handwrite-load] {
  visibility: hidden;
}

.pg-note .pg-arrow path {
  stroke-dashoffset: 1;
}

.pg-note.is-written .pg-arrow path,
html:not(.pg-hw) .pg-note:not(.is-writing) .pg-arrow path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.pg-note.is-written .pg-arrow path + path {
  transition-delay: 0.55s;
  transition-duration: 0.3s;
}

/* ------------------------------------------------------------
   The chamfered sheet - home.html's .ap-who::before
   ------------------------------------------------------------
   A section that is laid over the one before it rather than
   butted against it: its own ground is painted by ::before with
   the brand's chamfer cut from the two top corners, so whatever
   sits underneath shows through the cuts.

   The ground colour is a custom property so the same sheet can
   be paper over ink (contact) or ink over paper (the FAQ thread).
   It runs 2px past the bottom for the reason home.html gives: the
   clip edge is anti-aliased, and a dark layer underneath bleeds
   through it as a hairline at the next seam.
   ------------------------------------------------------------ */
.pg-sheet {
  --sheet-ground: var(--sw-paper);
  position: relative;
  isolation: isolate;
}

.pg-sheet::before {
  content: "";
  position: absolute;
  inset: 0 0 -2px;
  z-index: -1;
  background: var(--sheet-ground);
  clip-path: polygon(
    var(--pg-chamfer) 0,
    calc(100% - var(--pg-chamfer)) 0,
    100% var(--pg-chamfer),
    100% 100%,
    0 100%,
    0 var(--pg-chamfer)
  );
}

/* The last sheet before the footer mirrors the first: the chamfer
   is painted INTO its two bottom corners, in the accent, so the
   notches read whether or not the footer is behind them yet -
   home.html's .sw-showcase. Layered onto ::after so it composes
   with a sheet that already uses ::before for its own ground. */
/* CUT WITH A CLIP, NOT PAINTED WITH A GRADIENT. home.html paints
   these with two hard-stop linear-gradients, and a gradient's hard
   stop is not anti-aliased: the diagonal came out as a staircase
   beside the clean clip-path cuts at the top of every sheet. A
   polygon edge is smoothed like every other cut on the page.

   One polygon draws both triangles. It runs down the left cut,
   along the sheet's foot, up the right cut, and back along the
   bottom of the box - so the only area between the triangles is the
   2px strip that hangs below the sheet over the footer's own
   accent, where it cannot be seen. */
.pg-foot-notch::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px;
  height: calc(var(--pg-chamfer) + 2px);
  z-index: 0;
  pointer-events: none;
  background: var(--sw-accent);
  clip-path: polygon(
    0 0,
    var(--pg-chamfer) var(--pg-chamfer),
    calc(100% - var(--pg-chamfer)) var(--pg-chamfer),
    100% 0,
    100% 100%,
    0 100%
  );
}

/* ------------------------------------------------------------
   The lifted last sheet - home.html's .sw-showcase + .page::after
   ------------------------------------------------------------
   The alternative to .pg-foot-notch: the bottom corners are CUT,
   not painted, and the sheet casts a shadow onto the footer as it
   slides up over it - so the parallax reads as a sheet of paper
   lifting off the panel rather than a flat edge wiping across it.

   Three parts, as on home:
     1. The ground (::before) gets the bottom chamfers in its clip
        as well as the top ones, so the notches are genuinely empty.
     2. The sheet paints accent under its last --pg-chamfer, so the
        empty notches still read green before the footer is behind
        them - whatever is stacked behind the sheet.
     3. ::after is a copy of the sheet's bottom silhouette carrying
        the drop-shadow. It sits BELOW the ground (z-index -2 inside
        the sheet's isolated context), so only what it casts under
        the sheet and into the notches shows.

   Home keeps its silhouette on .page::after; here it lives on the
   sheet so it can take --sheet-ground. A paper silhouette behind
   the FAQ's ink sheet would fringe the anti-aliased cut with a
   light hairline, where the sheet's own colour cannot.

   The silhouette is gradients, not a clip-path: clip-path applies
   after filter, so it would cut the shadow off along with the
   shape. The half-pixel stops anti-alias the diagonals to match
   the ground's clip edge. Static, so it is painted once and
   scrolls for free. */
.pg-foot-lift::before {
  /* No 2px overhang - there is no next sheet for a seam to show
     against, and the overhang would sit the cut 2px below the
     silhouette's. */
  inset: 0;
  clip-path: polygon(
    var(--pg-chamfer) 0,
    calc(100% - var(--pg-chamfer)) 0,
    100% var(--pg-chamfer),
    100% calc(100% - var(--pg-chamfer)),
    calc(100% - var(--pg-chamfer)) 100%,
    var(--pg-chamfer) 100%,
    0 calc(100% - var(--pg-chamfer)),
    0 var(--pg-chamfer)
  );
}

/* The accent under the notches is the sheet's OWN background, not
   .page's as on home. Whatever sits behind the sheet would show
   through the cuts - on contact that is the ink hero, which stays
   sticky for the length of the page. The sheet is isolated, so its
   background paints first in its own context: this strip, then the
   silhouette and its shadow (-2), then the ground (-1). Only the
   two notches are left uncovered, with the shadow falling into them. */
.pg-foot-lift {
  background: linear-gradient(var(--sw-accent), var(--sw-accent)) left bottom / 100% var(--pg-chamfer) no-repeat;
}

/* ...and .page paints the same accent under its own last strip. The
   page often ends on a sub-pixel, and the sheet's strip snaps to
   whole pixels, so its last fractional row is left to whatever is
   behind the sheet - here .page, which would otherwise show paper
   there as a light hairline along the foot of each notch. */
.page:has(.pg-foot-lift) {
  background:
    linear-gradient(var(--sw-paper), var(--sw-paper)) top / 100% calc(100% - var(--pg-chamfer)) no-repeat,
    var(--sw-accent);
}

.pg-foot-lift::after {
  --c: var(--pg-chamfer);
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--c) * 3);
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(to top right, transparent 50%, var(--sheet-ground) calc(50% + 0.5px)) left bottom / var(--c) var(--c) no-repeat,
    linear-gradient(to top left, transparent 50%, var(--sheet-ground) calc(50% + 0.5px)) right bottom / var(--c) var(--c) no-repeat,
    linear-gradient(var(--sheet-ground), var(--sheet-ground)) top / 100% calc(100% - var(--c) + 1px) no-repeat,
    linear-gradient(var(--sheet-ground), var(--sheet-ground)) bottom / calc(100% - 2 * var(--c) + 2px) var(--c) no-repeat;
  /* Home's values: a tight contact line where the sheet meets the
     footer, then a long soft cast. Ink at low alpha, never black -
     a neutral grey over the acid green reads as dirt. */
  filter:
    drop-shadow(0 1px 2px rgba(20, 20, 15, 0.14))
    drop-shadow(0 18px 34px rgba(20, 20, 15, 0.22));
}

@media (max-width: 1000px) {
  /* Shorter lift on a phone - the full cast reads as a dark band
     across a narrow screen rather than as depth. */
  .pg-foot-lift::after {
    filter:
      drop-shadow(0 1px 2px rgba(20, 20, 15, 0.12))
      drop-shadow(0 12px 22px rgba(20, 20, 15, 0.18));
  }
}

/* ------------------------------------------------------------
   The join with the footer - home.html's overrides
   ------------------------------------------------------------
   No soft fade: .page ends on a hard edge and the footer starts
   at full accent, with the notches above doing the softening. */
.page {
  -webkit-mask-image: none;
  mask-image: none;
}

.footer::before {
  content: none;
}

/* ------------------------------------------------------------
   Section titles on a phone - the home page's treatment
   ------------------------------------------------------------
   The shared rule (css/featured.css) stacks a title's three words
   into a column below 1000px. The home page keeps them on one row
   instead, spread edge to edge as on desktop, with the size giving
   way rather than the layout (css/home-mobile.css, SECTION TITLES).
   Without the same rule here the FAQ and the brief opened on a
   three-line 40px title where every home section opens on a
   one-line 30px one - a different rhythm down the whole page. These
   are home-mobile.css's numbers, solved there for the widest title
   on the site, so every title on the three pages sets at one size.

   Scoped to the pages' own section heads (and the 404's sheet,
   whose title is its head), so the other pages that share this
   file keep their own titles. */
@media (max-width: 1000px) {
  :is(.tm-head, .th-head, .ct-sheet-head, .nf-sheet) .sw-section-title.sw-featured-title {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.35em;
    font-size: min(calc((100vw - 3rem) / 11.3), 4.25rem);
    line-height: 1;
    text-align: left;
  }

  /* The pills, stepped down with the type so they stay a tag on the
     word rather than a second heading. */
  :is(.tm-head, .th-head, .ct-sheet-head, .nf-sheet) .sw-featured-title .sw-tag--title {
    font-size: clamp(0.9rem, 3.4vw, 1.2rem);
    --sw-tag-nose: 0.55rem;
  }

  /* "No jargon" hangs off the LAST word, which sits hard against the
     right gutter - anchored from the right it hangs under the word
     instead of running off the screen, as "Real clients" does. */
  :is(.tm-head, .th-head, .ct-sheet-head, .nf-sheet) .sw-ft-word--c > .sw-tag--title {
    left: auto;
    right: 0;
    margin-top: 0.1em;
  }

  /* "Two of us" and "3 minutes" hang off the MIDDLE word. The
     desktop tuck (-0.35em) is sized for 98px type and at this size
     sinks the pill into the letters, so it drops to the word's foot
     the way "Unedited" does on the home page. */
  :is(.tm-head, .th-head, .ct-sheet-head, .nf-sheet) .sw-ft-word--b > .sw-tag--title {
    top: 92%;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   Motion off
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pg-live::after {
    animation: none;
    opacity: 0;
  }
}

/* The drawn arrow inside a .pg-btn slides through on hover, as the
   footer's and the home page's do. */
.pg-btn:hover .footer-btn-arrow svg:first-child,
.pg-btn:focus-visible .footer-btn-arrow svg:first-child {
  transform: translate(110%, -110%);
}

.pg-btn:hover .footer-btn-arrow svg + svg,
.pg-btn:focus-visible .footer-btn-arrow svg + svg {
  transform: none;
}