/* Shared by the topic pages. One file rather than a copy of the stylesheet in
   each: they are cached once, and a change to the look does not mean editing
   six files and missing one. index.html keeps its own inline style — it is the
   page that has to render in a single request. */
:root { --navy:#2B4A87; --navy-2:#3a5da5; --navy-soft:#e8eef8; --sky:#9db8ea;
  --ink:#191b1f; --paper:#f7f6f4; --muted:#6b6f76; --line:#e7e4df;
  --amber:#8a6414; --amber-soft:#f7efd9; --amber-line:#d8c184; }
* { margin:0; box-sizing:border-box }
body { font:16px/1.65 "Segoe UI",system-ui,Arial,sans-serif; color:var(--ink); background:var(--paper) }
.wrap { max-width:820px; margin:0 auto; padding:0 22px }
a { color:var(--navy) }

header { position:sticky; top:0; background:rgba(247,246,244,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid #e5e2dd; z-index:5 }
.nav { display:flex; align-items:center; gap:18px; padding:14px 0; max-width:1060px; margin:0 auto; padding-left:22px; padding-right:22px }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none }
.brand svg { width:34px; height:34px; border-radius:9px; flex:none }
.brand .nm { font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:19px;
  letter-spacing:.06em; color:var(--navy); line-height:1.05 }
.brand .bk { font-size:8.5px; letter-spacing:.55em; color:var(--muted); padding-left:2px }
.nav .right { margin-left:auto; display:flex; gap:18px; align-items:center; font-size:15px }
.nav .right a { color:var(--ink); text-decoration:none }
.btn { display:inline-block; background:var(--navy); color:#fff !important; padding:11px 22px;
  border-radius:9px; text-decoration:none; font-weight:700; border:0; cursor:pointer }
.btn:hover { background:var(--navy-2) }
@media (max-width:600px){
  .nav { flex-wrap:wrap; gap:10px }
  .nav .right { width:100%; margin-left:0; justify-content:space-between; font-size:14px }
}

.crumb { font-size:13px; color:var(--muted); padding:26px 0 0 }
.crumb a { color:var(--muted) }
article { padding:10px 0 40px }
h1 { font-size:clamp(28px,4.4vw,42px); line-height:1.14; letter-spacing:-.02em; margin:10px 0 0; text-wrap:balance }
.stand { font-size:19px; color:var(--muted); margin:16px 0 0; max-width:64ch }
h2 { font-size:clamp(20px,2.6vw,26px); margin:38px 0 0; letter-spacing:-.01em; text-wrap:balance }
h3 { font-size:16px; margin:24px 0 0 }
p { margin:14px 0 0; max-width:68ch }
ul { margin:14px 0 0; padding-left:0; list-style:none; max-width:68ch }
li { padding-left:16px; position:relative; margin-top:7px }
li::before { content:""; position:absolute; left:0; top:.68em; width:5px; height:5px;
  border-radius:50%; background:var(--sky) }
b, strong { font-weight:600 }

figure { margin:26px 0 0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px }
figure img { display:block; width:100%; height:auto; border-radius:8px }
figcaption { font-size:13.5px; color:var(--muted); padding:10px 8px 4px }

.note { margin:26px 0 0; background:var(--navy); color:#fff; border-radius:14px; padding:22px 24px }
.note p { color:var(--sky); margin-top:8px; max-width:none }
.note strong { color:#fff }

.soon { font-size:10px; font-weight:700; color:var(--amber); text-transform:uppercase;
  letter-spacing:.07em; background:var(--amber-soft); border:1px solid var(--amber-line);
  border-radius:20px; padding:1px 7px; white-space:nowrap }

.cta { margin:34px 0 0; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:26px; text-align:center }
.cta h2 { margin:0 }
.cta p { margin:8px auto 18px; color:var(--muted) }

.more { margin:38px 0 0; border-top:1px solid var(--line); padding-top:20px }
.more h2 { margin:0 0 10px; font-size:15px; letter-spacing:.02em }
.more ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px 22px }
.more li { margin-top:0 }

footer { border-top:1px solid #e5e2dd; padding:24px 0 40px; font-size:14px; color:var(--muted); margin-top:40px }
footer .wrap { display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; max-width:1060px }
/* LinkedIn and Instagram. Icons rather than words because the footer already
   carries three or four text links and wraps to two lines on a phone. The
   anchors take their colour from the footer, so they sit at the same weight as
   everything beside them until they are hovered. */
/* THE TAP TARGET IS 41px, THE ICON IS 19px. A 19px target is half what a thumb
   needs; this suite fixed the same thing once on the POS line controls and
   holds a 40px floor there (test 94). The padding makes the target and the
   negative VERTICAL margin gives that height back, so the bigger target costs
   no height of its own. gap is 0 because the two paddings already put 22px
   between the glyphs.
   On a phone the footer still gains a row — .wrap wraps, and this is a third
   item, so it lands on its own line. Measured at 375px: 37px taller. That is
   the new element, not the padding. */
footer .social { display:inline-flex; align-items:center; gap:0 }
footer .social a { display:inline-flex; padding:11px; margin:-11px 0; color:var(--muted); border-radius:6px }
footer .social a:hover, footer .social a:focus-visible { color:var(--navy) }
footer .social svg { width:19px; height:19px; display:block }

/* References to the standards. Paragraph numbers and our own summary of what
   each requires — never the text itself, which is the IFRS Foundation's. */
.refs { margin:34px 0 0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 24px }
.refs h2 { margin:0 0 4px; font-size:15px; letter-spacing:.02em }
.refs dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 18px; align-items:baseline }
@media (max-width:600px){ .refs dl { grid-template-columns:1fr; gap:3px } .refs dd { margin-bottom:9px } }
.refs dt { font-weight:600; font-size:13.5px; color:var(--navy); white-space:nowrap }
.refs dd { margin:0; font-size:14px; color:var(--muted) }
.refs .fine { font-size:12.5px; color:var(--muted); margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line); max-width:none }