/* ==========================================================================
   Piren — element defaults.
   Kept deliberately thin: the brand's look comes from type + colour + square
   edges, not from a heavy component sheet.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  /* Anchor links land below the sticky header instead of under it. */
  scroll-padding-block-start:var(--header-offset,6rem);
}

body{
  margin:0;
  background-color:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--type-body);
  font-weight:var(--font-body-regular);
  line-height:var(--line-height-normal);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;

  /* The single page-level container. Every shell breakpoint below is a
     @container query against this, never a viewport media query. */
  container-type:inline-size;
  container-name:page;
}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--font-display-bold);
  color:var(--text-heading);
  letter-spacing:var(--letter-spacing-none);
  text-wrap:balance;
}
h1{font-size:var(--type-h1);line-height:var(--line-height-tight)}
h2{font-size:var(--type-h2);line-height:var(--line-height-tight)}
h3{font-size:var(--type-h3);line-height:var(--line-height-snug)}
h4{font-size:var(--type-h4);line-height:var(--line-height-normal)}
h5{font-size:var(--h5-font-size);line-height:var(--line-height-normal)}
h6{font-size:var(--h6-font-size);line-height:var(--line-height-normal)}

p{margin:0;max-width:var(--measure-prose)}

a{
  color:var(--link-color);
  text-decoration:none;
  transition:color var(--duration-fast) var(--ease-emphasis);
}
a:hover{color:var(--link-color-hover)}

strong,b{font-weight:var(--font-body-bold)}

ul,ol{margin:0;padding:0;list-style:none}

img,video,svg,iframe{max-width:100%;display:block}
img,video{height:auto}

button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

address{font-style:normal}

/* --- Focus -----------------------------------------------------------------
   One visible ring for every interactive element on the site. Uses the theme
   tokens so it stays legible on cream, on sage and on slate.               */
:where(a,button,input,select,textarea,summary,iframe,[tabindex]):focus-visible{
  outline:var(--svg-stroke-width-thick) solid var(--focus-ring-color);
  outline-offset:.2em;
  border-radius:var(--radius-none);
}
/* Keep the ring readable when it lands on a photograph. */
:where(a,button):focus-visible{
  box-shadow:0 0 0 .2em var(--focus-ring-offset);
}

/* --- Named type roles ------------------------------------------------------ */
.piren-display   {font-family:var(--font-display);font-weight:var(--font-display-bold);font-size:var(--type-display);line-height:var(--line-height-tight)}
.piren-text-large{font-size:var(--type-body-lg);line-height:var(--line-height-normal)}
.piren-text-small{font-size:var(--type-sm);line-height:var(--line-height-relaxed)}
.piren-eyebrow   {font-family:var(--font-body);font-weight:var(--font-body-bold);font-size:var(--type-sm);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}
.piren-lockup    {font-family:var(--font-body);font-weight:var(--font-body-medium);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}

/* --- Accessibility helpers ------------------------------------------------- */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;              /* 1px: a clip rect, not a design size */
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;
}

.skip-link{
  position:absolute;
  inset-block-start:var(--space-tight);
  inset-inline-start:var(--space-tight);
  z-index:var(--layer-dropdown);
  padding:.65em 1.2em;
  background:var(--button-bg);
  color:var(--button-text);
  font-weight:var(--font-body-medium);
  transform:translateY(-200%);
  transition:transform var(--duration-fast) var(--ease-emphasis);
}
.skip-link:focus-visible{transform:translateY(0)}