/* ============================================================
   ROARI SOLUTIONS — shared mechanics
   Reset, A4 sheets, artboard fitting, placeholders, print.
   Everything visual lives in css/diamond.css, css/site.css and css/practice.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4{font:inherit}
ol,ul{padding:0;list-style:none}
img{display:block}
a{color:#9C6B2E;text-decoration:none}
a:hover{color:#6E4A1E}

.pretty{text-wrap:pretty}
.fill{flex:1;min-height:0}
.mw-520{max-width:520px}
.mw-540{max-width:540px}
.mw-560{max-width:560px}
.mw-600{max-width:600px}

/* Slots for content that does not exist yet — photographs, map, signature,
   QR code, client logos. diamond.css sets the stripe and border. */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;font-family:monospace;font-size:11px;color:#9C6B2E}

/* ---------- A4 document ---------- */
.doc{min-height:100vh;padding:48px 24px;background:#f5f5f4}
.doc__pages{display:flex;flex-direction:column;align-items:center;gap:1rem;width:210mm;margin:0 auto}
/* contain:strict keeps each sheet monolithic at print: without it Blink
   fragments any decoration that bleeds past the sheet's bottom edge and
   re-centres its transform, shifting rotated shapes. */
.page{position:relative;flex:none;width:210mm;height:297mm;overflow:hidden;contain:strict;box-shadow:0 2px 10px rgba(0,0,0,.25);print-color-adjust:exact;-webkit-print-color-adjust:exact}

.doc-bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 24px;background:#fff;border-bottom:1px solid #dcdcd8;font:13px/1.4 system-ui,sans-serif;color:#1a1a18}
.doc-bar a{color:inherit}
.doc-bar a:hover{color:#9C6B2E}
.doc-bar__title{color:#6b6b66}
.doc-bar button{font:inherit;color:inherit;padding:6px 12px;background:none;border:1px solid #1a1a18;cursor:pointer}
.doc-bar button:hover{background:#1a1a18;color:#fff}
.doc-bar :focus-visible{outline:2px solid #9C6B2E;outline-offset:2px}

/* ---------- Identity boards ---------- */
.boards{padding:48px;background:#E8E4DC;font-family:Urbanist,sans-serif;color:#15120D}
.boards__intro{max-width:1320px;margin:0 auto 40px}
.boards__title{font-size:28px;font-weight:600;letter-spacing:-.02em}
.boards__lede{font-size:14px;line-height:1.6;color:#4A463F;max-width:620px;margin-top:8px;text-wrap:pretty}
.boards__stack{display:flex;flex-direction:column;align-items:center;gap:48px}

.board{width:1320px;padding:40px;display:flex;flex-direction:column;gap:28px}
.board__head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:20px}
.board__id{display:flex;gap:16px;align-items:flex-start}
.board__tag{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;letter-spacing:.1em}
.board__name{font-size:28px;font-weight:600}
.board__desc{font-size:14px;max-width:620px;margin-top:6px;text-wrap:pretty}
.board__meta{display:flex;gap:20px;align-items:center;font-size:12px}
.board__swatches{display:flex;gap:4px}
.board__swatches i{width:28px;height:28px}
.board__row{display:grid;grid-template-columns:350px 350px 400px;gap:28px;align-items:start}
.board__row--wide{grid-template-columns:460px 460px}
.board__item{display:flex;flex-direction:column;gap:12px}
.board__caption{font-size:11px}

@media (max-width:700px){
  .doc{padding:16px}
  .doc-bar{padding:10px 16px}
  .doc-bar__title{display:none}
  .boards{padding:16px}
}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ---------- Print: one sheet per page, full bleed ---------- */
@page{size:A4;margin:0}
@media print{
  *,*::before,*::after{animation:none!important}
  .no-print{display:none!important}
  .doc{min-height:0;padding:0;background:none}
  .doc__pages{display:block;zoom:1!important}
  .page{box-shadow:none;break-inside:avoid}
  .page:not(:first-child){break-before:page}
}