/*
  Shared by all three A7 directions. Each page defines these tokens:
  --ground --ink --logo --accent-ui --dirs-bg --dirs-fg --sel-bg --sel-fg --scroll-thumb --ft-bg --ft-fg --ft-muted
*/

/* Icons: one authored set, 24px grid, 1.75 stroke (assets/icons.svg) */
.i{display:inline-block;width:18px;height:18px;flex:none;vertical-align:-.22em}

/* Browser surfaces take the palette */
::selection{background:var(--sel-bg);color:var(--sel-fg)}
html{scrollbar-color:var(--scroll-thumb) transparent;accent-color:var(--accent-ui)}
input,textarea,select{caret-color:var(--accent-ui)}
a{text-underline-offset:.22em;text-decoration-thickness:1px}

.skip{position:absolute;left:12px;top:-64px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--ground);font-weight:600;text-decoration:none;transition:top .2s ease}
.skip:focus{top:12px}
main:focus{outline:none}

/* Logo: responsive lockup. Full lockup by default, mark only on very narrow headers */
.brand{--lh:26px;display:inline-flex;align-items:flex-end;gap:calc(var(--lh) * .36);padding:calc((44px - var(--lh)) / 2) 0;color:var(--logo);text-decoration:none;flex:none}
.brand-mark{width:calc(var(--lh) * 1.85);height:var(--lh)}
.brand-word{width:calc(var(--lh) * 2.978);height:calc(var(--lh) * .46)}
.hdr .brand{margin-right:auto}
@media (max-width:359px){ .hdr .brand-word{display:none} }

/* Direction switcher (replaces the old pitch banner) */
.dirs{background:var(--dirs-bg);color:var(--dirs-fg);font-size:13px;line-height:1.3}
.dirs .wrap{display:flex;align-items:center;gap:14px;min-height:44px}
.dirs a{color:inherit;text-decoration:none}
.dirs-home{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;margin-right:auto}
.dirs-home .i{width:16px;height:16px;transform:rotate(180deg);transition:transform .35s cubic-bezier(.23,1,.32,1)}
.dirs-note{opacity:.78}
.dirs-set{display:flex;gap:2px}
.dirs-set a{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;font-weight:700;font-size:14px;transition:background-color .2s ease,color .2s ease}
.dirs-set a[aria-current="page"]{background:var(--dirs-fg);color:var(--dirs-bg)}
.dirs-set a:active{background:color-mix(in srgb,var(--dirs-fg) 22%,transparent)}
@media (hover:hover) and (pointer:fine){
  .dirs-set a:not([aria-current]):hover{background:color-mix(in srgb,var(--dirs-fg) 14%,transparent)}
  .dirs-home:hover .i{transform:rotate(180deg) translateX(3px)}
}
@media (max-width:700px){ .dirs-note{display:none} }

/* Placeholder and source tags: sentence case, never long all-caps */
.ph,.src{text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:600!important;line-height:1.2!important}

/* Review stars and the honest "Example review" label */
.stars{display:inline-flex;gap:3px;color:var(--star,#E0A43A)}
.stars .st{width:16px;height:16px}
.ex{display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;opacity:.72}

/* Footer: one compact band */
.ft{background:var(--ft-bg);color:var(--ft-muted);padding:26px 0;font-size:14px;line-height:1.45}
.ft .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px}
.ft .brand{--lh:22px;color:var(--ft-fg);margin-right:auto}
.ft p{margin:0}
.ft-tel{display:inline-flex;align-items:center;min-height:44px;color:var(--ft-fg);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.ft-mail{display:inline-flex;align-items:center;min-height:44px;color:var(--ft-fg);text-decoration:none}
.ft-legal{opacity:.8}
.ft a:active{opacity:.7}
@media (hover:hover) and (pointer:fine){ .ft-tel:hover,.ft-mail:hover{text-decoration:underline} }
@media (max-width:640px){
  .ft{padding:20px 0 24px}
  .ft .wrap{display:flex;flex-wrap:wrap;gap:0 18px}
  .ft .brand{flex-basis:100%;margin:0 0 2px}
  .ft-addr{flex-basis:100%}
  .ft-legal{flex-basis:100%;margin-top:2px}
}

/* Reduced motion: keep colour and opacity feedback, drop movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-property:color,background-color,border-color,box-shadow,opacity,fill,stroke!important;scroll-behavior:auto!important}
}
@media print{ *,*::before,*::after{animation:none!important} .dirs,.skip{display:none} }